深入理解 CSR / SSR / SSG：前端三种渲染模式的本质与选型

在前端工程化发展过程中，"页面是如何生成 HTML 的"逐渐成为一个绕不开的话题。

CSR、SSR、SSG 本质上并不是框架概念，而是渲染发生的时间与位置不同。

一、什么是"渲染模式"

所谓渲染模式，本质只有一个问题：

页面的 HTML 是在什么时候、由谁生成的？

模式	HTML 生成位置	生成时机
CSR	浏览器	运行时
SSR	服务器	请求时
SSG	构建环境	构建时

二、CSR（Client Side Rendering）

2.1 基本概念

CSR（客户端渲染）指的是：

服务器返回一个空壳 HTML，页面内容由浏览器执行 JavaScript 动态生成

典型的 SPA（Single Page Application）即 CSR 架构。

2.2 渲染流程

text 复制代码

1. 浏览器请求页面
2. 服务器返回基础 HTML（只有一个挂载点）
3. 浏览器下载 JS
4. 执行 JS
5. 框架生成 DOM
6. 页面可见

示例 HTML：

html 复制代码

<body>
  <div id="app"></div>
  <script src="/main.js"></script>
</body>

2.3 优缺点分析

优点

前后端分离彻底
架构简单，开发体验好
首屏之后交互性能优秀
非常适合复杂交互应用

缺点

首屏白屏时间长
对 SEO 不友好
弱网环境体验差

2.4 适用场景

后台管理系统
内部系统
对 SEO 无要求的应用
高交互、长生命周期页面

三、SSR（Server Side Rendering）

3.1 基本概念

SSR（服务端渲染）指的是：

服务器在接收到请求后，执行前端框架代码，生成完整 HTML 再返回给浏览器

浏览器拿到的 HTML 已经包含完整内容。

3.2 渲染流程

text 复制代码

1. 浏览器请求页面
2. 服务器执行 Vue/React
3. 生成完整 HTML
4. 返回 HTML
5. 浏览器直接渲染页面
6. 下载 JS
7. Hydration（事件绑定）

3.3 Hydration（水合）机制

Hydration 的本质是：

让客户端 JS 接管服务器生成的 DOM，而不是重新创建 DOM

主要工作包括：

事件绑定
状态同步
校验 DOM 一致性

如果两端生成的 DOM 不一致，就会出现常见的 Hydration mismatch 问题。

3.4 优缺点分析

优点

首屏速度快
SEO 友好
更好的可访问性（a11y）

缺点

服务器压力大
架构复杂度高
调试成本高
需要处理 Node / 浏览器环境差异

3.5 常见问题

window / document 在服务端不可用
请求数据的重复获取
状态在服务端与客户端同步问题
Hydration mismatch

3.6 适用场景

官网
内容型网站
对 SEO 有明确要求的页面
首屏性能敏感页面

四、SSG（Static Site Generation）

4.1 基本概念

SSG（静态站点生成）指的是：

在构建阶段直接生成 HTML 文件，运行时不再执行渲染逻辑

用户访问时，服务器只是返回一个静态文件。

4.2 构建与访问流程

text 复制代码

构建阶段：
1. 执行前端代码
2. 请求数据
3. 生成 HTML 文件

运行阶段：
1. 用户访问
2. CDN / 静态服务器直接返回 HTML

4.3 优缺点分析

优点

极致的首屏性能
SEO 效果最好
几乎没有服务器计算成本
非常适合 CDN

缺点

不适合高频变更数据
构建时间可能较长
动态性弱

4.4 SSG + CSR 的常见组合

实际中常见模式是：

首屏内容由 SSG 提供，页面加载后通过 CSR 请求实时数据

这也是 Nuxt / Next / Astro 中最常见的实践方式。

4.5 适用场景

博客
技术文档
产品官网
帮助中心

五、三种模式对比总结

维度	CSR	SSR	SSG
HTML 生成时机	运行时	请求时	构建时
首屏性能	一般	较好	最佳
SEO	差	好	极好
服务器压力	低	高	极低
架构复杂度	低	高	中
动态能力	强	强	弱

六、工程实践中的选型建议

一个简单但实用的判断逻辑：

text 复制代码

是否需要 SEO？
 ├─ 否 → CSR
 └─ 是
     ├─ 数据是否频繁变化？
     │    ├─ 是 → SSR
     │    └─ 否 → SSG

但在真实项目中，混合方案几乎是必然选择：

首页：SSG
内容详情页：SSR
后台系统：CSR

七、SO

CSR、SSR、SSG 并不存在"谁更先进"的问题，它们只是针对不同目标的工程方案：

CSR：交互优先
SSR：首屏与 SEO 优先
SSG：性能与成本优先

理解三者的本质，有助于在架构设计阶段做出更合理的技术决策。

Finally

如果 you 正在使用 Nuxt / Next，你会发现它们的真正价值在于：

让开发者可以在一个项目中自由组合 CSR / SSR / SSG

这也是现代前端框架发展的核心方向。