只要写过前端，尤其是用过 Vue / React / Next / Nuxt，这几个词你一定绕不开：CSR、SSR、SSG。
很多文章讲得很抽象，甚至越看越糊涂。其实它们的核心差别只有一句话：
页面是“什么时候”生成的，以及“在哪里”生成的。
下面我们从真实开发场景出发，把这三种渲染方式讲清楚。
一、CSR（Client Side Rendering）——浏览器自己干活
什么是 CSR
CSR 是最传统、也是前端最熟悉的一种方式。
流程很简单：
- 浏览器请求页面
- 服务端返回一个几乎“空”的 HTML
- 浏览器下载 JS
- JS 在浏览器里执行，发接口请求数据
- 最终把页面“拼”出来
Vue、React 默认都是 CSR。
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
CSR 的特点
优点：
- 开发体验好，前后端分离清晰
- 页面切换快（SPA）
- 非常适合后台系统、管理端
缺点：
- 首屏慢（要等 JS 下载和执行）
- SEO 很差（搜索引擎看到的是空壳）
- 弱网、低端设备体验不友好
适合什么场景
- 后台管理系统
- 内部系统
- 对 SEO 没要求的项目
👉 一句话总结：开发爽，首屏慢，SEO 差
二、SSR（Server Side Rendering）——服务器先把页面算好
什么是 SSR
SSR 的核心变化只有一个：
页面 HTML 在服务器上就已经生成好了。
流程变成：
- 浏览器请求页面
- 服务端执行 JS，拉数据
- 服务端生成完整 HTML
- 浏览器直接看到内容
- 再进行一次“Hydration”（接管交互）
在 Vue 里是 Nuxt SSR，在 React 里是 Next.js SSR。
SSR 的特点
优点：
- 首屏速度快
- SEO 非常友好
- 内容型页面体验好
缺点：
- 服务器压力大（每个请求都要算）
- 架构复杂
- 调试成本高
常见误区
很多人以为用了 SSR 就“性能无敌”，其实不对。
- SSR 只解决首屏
- 页面切换还是靠 CSR
- 接口慢，SSR 也救不了你
适合什么场景
- 官网
- 营销页
- 内容平台（博客、资讯）
👉 一句话总结：首屏快，SEO 好，但服务器要扛得住
三、SSG（Static Site Generation）——提前算好，直接发文件
什么是 SSG
SSG 和 SSR 很像，但时间点不同。
SSR 是「请求时生成」，
SSG 是「构建时生成」。
流程是：
- 项目 build 时
- 拉数据
- 生成一堆
.html文件 - 部署到 CDN / 静态服务器
- 用户访问时，直接返回 HTML
SSG 的特点
优点：
- 访问速度极快（接近 CDN）
- 没有服务器压力
- SEO 非常好
- 稳定性极高
缺点：
- 数据变更不实时
- 构建时间可能很长
- 不适合高频变化内容
适合什么场景
- 博客
- 文档站
- 帮助中心
- 落地页
👉 一句话总结：快、稳、便宜，但不适合动态内容
四、三者放在一起对比
| 维度 | CSR | SSR | SSG |
|---|---|---|---|
| 页面生成时间 | 浏览器 | 请求时 | 构建时 |
| 首屏速度 | 慢 | 快 | 非常快 |
| SEO | 差 | 好 | 非常好 |
| 服务器压力 | 小 | 大 | 几乎没有 |
| 架构复杂度 | 低 | 高 | 中 |
| 数据实时性 | 实时 | 实时 | 不实时 |
五、现实项目中，其实是“混合使用”
现在的框架（Next / Nuxt）几乎都在做一件事：
让你在同一个项目里混用 CSR、SSR、SSG。
比如：
- 首页：SSG
- 文章详情页：SSR
- 后台页面：CSR
这才是真正的工程化解法。
六、如果你现在不知道选哪个？
给你一个非常实用的判断方法：
- 后台系统 → CSR
- 官网 / 营销页 → SSR 或 SSG
- 博客 / 文档 → SSG
- 内容 + 实时数据 → SSR + CSR 混合
七、最后一句大实话
CSR、SSR、SSG 没有高低之分，只有“适不适合”。
很多性能问题，根本不是渲染方式的问题，而是：
- 接口慢
- 资源大
- 缓存没做好
选对场景，比盲目追新技术重要得多。
