CSR，SSR和SSG on Last Stand

CSR，SSR和SSG

Tue, 05 Nov 2024 00:00:00 +0800

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 类似。