CSR（Client Side Render）客户端渲染#
这个不用多说，前端用的最多的模式。
用户访问页面过程：
- 加载 HTML
- 加载相关资源（JS/CSS/…）
- 执行渲染逻辑（向一个 DOM 节点渲染页面）
带来的好处：服务器响应快，压力小（服务器无需渲染，直接返回静态文件即可）
SSR（Server Side Render）服务端渲染#
CSR 模式也会带来一些问题：
- 存在白屏
- 对 SEO 引擎不友好
在这先说几个性能指标概念
-
TTFB（Time to First Byte）：被视为从发起一个网络请求到第一个资源开始加载的时间。
-
FP（First Paint）：屏幕有效像素第一次对用户可见时的时间，用来衡量白屏时间。
-
FCP （First Contentful Paint）：主体内容（如文章正文等）可见的时间。
-
TTI （Time To Interactive）：前端应用开始可进行用户交互的时间（例如响应输入、点击事件）。
为什么会白屏？#
为什么会对 SEO 引擎不友好呢？#
因为引擎去爬取页面的内容，只会加载资源，不会执行代码。而现在爬取只会返回一个 CSR 渲染页面的 HTML 模版，并没有实际内容。所以我们只需在服务器把 CSR 的渲染逻辑执行一下，生成一个 HTMl，就解决问题了。
Hydrate 水合#
SSR 模式带来的问题，页面无法交互
SSG（Static Site Generation）#
SSR 模式带来的问题，服务器压力
Island 孤岛架构#
CSR 带来的问题 FCP 指标不好 TTI 指标不好