深入理解 CSR / SSR / SSG：前端三种渲染模式的本质与选型
深入理解 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 渲染流程
1. 浏览器请求页面
2. 服务器返回基础 HTML（只有一个挂载点）
3. 浏览器下载 JS
4. 执行 JS
5. 框架生成 DOM
6. 页面可见
示例 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 渲染流程
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 构建与访问流程
构建阶段：
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
差
好
极好
服务器压力
低
高
极低
架构复杂度
低
高
中
动态能力
强
强
弱
六、工程实践中的选型建议
一个简单但实用的判断逻辑：
是否需要 SEO？
├─ 否 → CSR
└─ 是
├─ 数据是否频繁变化？
│ ├─ 是 → SSR
│ └─ 否 → SSG
但在真实项目中，混合方案几乎是必然选择：
- 首页：SSG
- 内容详情页：SSR
- 后台系统：CSR
七、SO
CSR、SSR、SSG 并不存在“谁更先进”的问题，它们只是针对不同目标的工程方案：
- CSR：交互优先
- SSR：首屏与 SEO 优先
- SSG：性能与成本优先
理解三者的本质，有助于在架构设计阶段做出更合理的技术决策。
Finally
如果 you 正在使用 Nuxt / Next，你会发现它们的真正价值在于：
让开发者可以在一个项目中自由组合 CSR / SSR / SSG
这也是现代前端框架发展的核心方向。