页面渲染策略
这四个缩写（SSR, SSG, ISR, CSR）是现代前端开发中最核心的页面渲染策略。它们的本质区别在于：HTML 页面是在哪里生成的（服务器还是浏览器）以及什么时候生成的（请求时、构建时还是过期后）。
核心概念速览表
| 缩写 | 全称 | 中文名 | 生成时机 | 执行位置 | 优点 | 缺点 |
|---|---|---|---|---|---|---|
| SSR | Server-Side Rendering | 服务端渲染 | 每次请求时 | 服务器 | 首屏快、SEO好、内容实时 | 服务器压力大 |
| SSG | Static Site Generation | 静态站点生成 | 构建/部署时 | 服务器（构建阶段） | 极致性能、安全、便宜 | 数据不实时 |
| ISR | Incremental Static Regeneration | 增量静态生成 | 构建时 + 运行时更新 | 服务器 | 兼顾性能与实时性 | 可能短暂看到旧数据 |
| CSR | Client-Side Rendering | 客户端渲染 | 浏览器加载后 | 浏览器 | 交互流畅、开发简单 | 白屏久、SEO差 |
1. CSR (Client-Side Rendering)：客户端渲染
这是传统 Vue/React 单页应用（SPA）的默认模式。
- 工作原理：
服务器只返回一个空的 HTML 骨架（比如只有一个
<div id="app"></div>）和一个巨大的 JavaScript 文件。浏览器下载并执行 JS 后，才开始拉取数据、生成 DOM 元素并渲染页面。 - 适用场景： 后台管理系统、Dashboard、对 SEO 无要求的内部工具。
- 痛点： 用户打开页面时会经历“白屏 -> 加载转圈 -> 内容出现”的过程，且搜索引擎爬虫很难抓取内容。
2. SSR (Server-Side Rendering)：服务端渲染
这是为了解决 CSR 的首屏慢和 SEO 问题而生的。
- 工作原理： 当用户请求页面时，服务器会现跑一遍代码（获取数据、执行 React/Vue 的 renderToString），生成完整的 HTML 字符串，直接塞给浏览器。浏览器拿到就能立刻显示内容，随后 JS 下载完成再进行“注水”（Hydration）变成可交互状态。
- 适用场景： 新闻门户、电商首页、内容社区（需要 SEO 且数据实时变化）。
- 痛点： 每次请求都要服务器计算一次，高并发时服务器压力大。
3. SSG (Static Site Generation)：静态站点生成
这是性能的极致，属于“预渲染”。
- 工作原理： 在项目打包部署的时候（构建时），就把所有页面生成为纯 HTML 文件。部署后，这些文件就像普通的静态资源（图片、CSS）一样，通过 CDN 分发。
- 适用场景： 博客、文档站、营销落地页（内容不经常变）。
- 痛点： 如果想更新页面内容，必须重新构建整个项目并重新部署。
4. ISR (Incremental Static Regeneration)：增量静态生成
这是 Next.js 提出的一个“杀手级”特性，可以理解为 SSG 的升级版。
- 工作原理： 它结合了 SSG 和 SSR 的优点。初次访问时像 SSG 一样快，但同时它设定了一个“重新验证时间”（revalidate）。比如设为 60 秒，那么在第 61 秒有人访问时，服务器会在后台悄悄重新生成这个页面。旧用户看到旧页面，新用户看到新页面，且不需要重新部署整个站点。
- 适用场景： 电商商品详情页（价格库存偶尔变）、内容聚合页（兼顾性能与内容更新）。
总结与选型建议
- 想做博客/文档：首选 SSG (最快、最稳)。
- 做后台/内部系统：首选 CSR (交互多、无需 SEO)。
- 做电商/新闻站：高频变化用 SSR，低频变化用 ISR。
- 既要又要：现代框架（如 Next.js）支持混合模式，比如首页用 SSG，详情页用 SSR，后台用 CSR。