CSR，SSR和SSG

SPA、MPA、SSR 和 CSR 这几个词可能在你的工作生涯中经常出现，网上相关文章也很多。如果你对这些概念感到模糊或完全不了解，希望本文能帮助你理解这些渲染模式。 SPA 与 MPA MPA MPA（multiple page application） 称为多页应用, 指的是有多个页面的应用，从技术手段上来讲，你可以这么粗略地理解。 首屏速度快：各个页面相互独立，需要单独维护多个 html 页面，每个请求都直接返回 html。 切换页面比较慢：基于原生浏览器的文档跳转（navigating across documents）。因此每一次的页面更新都是一次页面重载，这将带来巨大的重启性能消耗。 对 SEO 友好：页面在初始时，就具有全部的页面内容而非 「无状态」，从而达到更好的收录效果。 SPA SPA（single page application）称为单页应用。通过 js 去感知到 url 的变化，动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上。此时的路由不是后端来做了，而是前端来做，动态显示需要的组件。 页面切换速度快：路由跳转是基于特定的实现（如 vue-router，react-router 等前端路由），而非原生浏览器的文档跳转，避免了不必要的整个页面重载。 前后端分离：基于前端路由，SPA 与应用后端解耦，使得前端不再依赖于后端的路由分配。 首屏时间慢：首屏除了 html 还要额外请求并执行 js 文件，通过 js 在空页面上渲染首屏。 SEO 不友好：内容都是靠 js 渲染生成出来的，但搜索引擎并不识别这部分内容，导致 SEO 效果差 CSR（Client Side Rendering） CSR（客户端渲染）是一种在浏览器上执行 JavaScript 以生成 DOM 并显示内容的渲染方法。CSR 更贴近现代前端开发，我们通常使用的 Vue 和 React 默认使用 CSR。其大致流程如下： 浏览器向前端服务器请求 html 和 js html 页面为空，初始加载不显示任何内容，通过执行 js 渲染内容 通过后端暴露的 API 进行交互 对于典型的 CSR 应用程序，浏览器仅接收一个用作应用程序容器的 HTML 页面，因此也称为单页应用，所以 CSR 的特点与之前提到的 SPA 类似。 ...