24.1 SSR / SSG / ISR 核心原理与适用场景

在现代前端开发中，React 早已不局限于纯客户端渲染（CSR）。服务端渲染（SSR）、静态站点生成（SSG）和增量静态再生成（ISR）成为提升首屏性能、SEO 友好性和用户体验的关键技术。它们各有原理和适用场景，理解这些差异是架构选型的基础。

一、客户端渲染（CSR）的局限

传统的 React SPA 是这样的流程：浏览器下载一个几乎空的 HTML 骨架，再下载并执行 JavaScript，然后 React 在浏览器里构建整个页面。这导致两个核心问题：

• 首屏白屏时间长：JS 未完成时用户只能看到空白。
• SEO 不友好：搜索引擎爬虫很难正确索引纯 JS 渲染的内容。

SSR、SSG、ISR 正是为了解决这些痛点而生的策略。

二、服务端渲染（SSR）：请求时动态生成 HTML

核心原理
用户每次请求页面时，Node.js 服务端运行 React 组件，生成包含完整内容的 HTML 字符串返回给浏览器。浏览器先展示 HTML（首屏有内容），随后加载 JS 并执行注水（Hydration），让静态 HTML 重新拥有交互能力。

实际流程：

1. 浏览器请求页面。
2. 服务端执行 React 渲染，得到完整 HTML。
3. 服务端将 HTML 和对应的数据一起返回。
4. 浏览器显示内容，并下载 JS 包。
5. React 在水合阶段绑定事件，接管页面交互。

典型框架：Next.js（Pages Router 的 getServerSideProps，App Router 的 Server Components）、Remix。

适用场景：

• 内容高度动态、需要实时数据（如用户仪表盘、实时数据看板）。
• SEO 很重要，且页面内容频繁变化（如新闻详情页、电商商品页）。
• 需要根据请求定制页面（如根据 User-Agent 或 cookie 做个性化渲染）。

注意事项：

• 服务器压力较大，每个请求都要执行渲染，需配合缓存策略。
• 首字节时间（TTFB）可能比静态生成高，需要优化服务端逻辑。
• 若水合失败或过程过慢，可能造成页面交互迟滞。

三、静态站点生成（SSG）：构建时预生成 HTML

核心原理
在构建（Build）阶段，运行 React 组件生成静态 HTML 文件，部署时这些 HTML 直接作为静态资源。用户请求时，服务器（或 CDN）直接返回预先生成的 HTML，无服务端计算开销。

实际流程：

1. npm run build 时，工具（如 Next.js）执行所有需要静态生成的页面。
2. 每个页面生成对应的 HTML 文件（可能还有 JSON 数据文件）。
3. 部署后，CDN 直接分发静态 HTML。
4. 浏览器加载后同样进行水合。

典型框架：Next.js（getStaticProps，或 App Router 中默认的静态生成）、Gatsby。

适用场景：

• 内容不经常变化，或变化可控（如博客文章、文档站、营销落地页）。
• 追求极致的首屏速度和 CDN 缓存效果。
• 不需要每次请求服务端计算的页面。

注意事项：

• 内容更新需要重新构建和部署，不适合实时变化的页面。
• 大量页面时构建时间会很长，需要增量策略（如 ISR）。

四、增量静态再生成（ISR）：静态与动态的平衡

核心原理
ISR 是对 SSG 的扩展。你在构建时生成一组静态页面，但可以设定一个重新验证（revalidate）时间。当页面过期后，CDN 上仍提供之前版本的 HTML，同时后台触发一次重新生成，后续请求得到新版本。

实际流程：

1. 首次构建生成静态页面，并设置 revalidate 时间（如 60 秒）。
2. 用户请求页面，CDN 返回当前缓存的静态 HTML。
3. 若距离上次生成已超过 60 秒，下一次请求会触发后台异步重新生成该页面，新生成的 HTML 替换旧缓存。
4. 页面更新无需全站重新构建。

典型框架：Next.js（getStaticProps 加上 revalidate 选项）。

适用场景：

• 内容大部分时间不变，但偶尔更新（如 CMS 驱动的产品介绍、社交媒体信息流）。
• 需要静态生成的速度优势，却无法忍受全量构建的网站（几千个页面）。
• 对于大量页面，可做懒生成：只有第一个请求到来时才生成，之后缓存。

注意事项：

• 缓存失效期内用户可能看到旧内容，需评估兼容性。
• 生成的页面需要持久化存储（如本地文件系统、S3 或 CDN），对部署环境有一定要求。
• Next.js 12 之后还引入了按需重新验证（On-Demand ISR），通过 API 触发指定页面的更新，更加灵活。

五、三者的对比与选型决策

| 特性 | SSR | SSG | ISR |
|------|-----|-----|-----|
| 内容生成时机 | 请求时 | 构建时 | 首次请求或过期后 |
| 首屏速度 | 中等（依赖服务端性能） | 极快（CDN 直出静态 HTML） | 快（首次可能回退至 SSR 或旧版） |
| 内容实时性 | 实时 | 仅在下次构建时更新 | 按重新验证时间延迟 |
| 服务器负载 | 高（每个请求需计算） | 极低（仅静态文件） | 低（按需生成） |
| SEO 友好 | 很好 | 最好 | 很好 |
| 典型用例 | 用户仪表盘、电商搜索结果 | 博客、文档、营销页 | 电商商品页、新闻列表 |

选型不是非此即彼：Next.js 等框架允许你混合使用。比如一个网站，营销首页用 SSG，用户后台用 CSR（或 SSR），商品列表用 ISR，商品详情用 SSR。关键是针对每个页面的特性和需求选择最合适的模式。

六、React Server Components（RSC）带来的新思路

React 19 及 Next.js App Router 引入了 Server Components，它进一步模糊了服务端与客户端的边界。开发者可以直接写出仅运行在服务端的组件，它们可以异步获取数据、直接访问数据库，输出零客户端体积的 JSX 片段，与水合后的客户端组件交织渲染。这实质上是一种更细粒度的 SSR 方案，将会成为前端演进的下一阶段（详见第 25 章）。