在现代前端开发中，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 重新拥有交互能力。
实际流程：
- 浏览器请求页面。
- 服务端执行 React 渲染，得到完整 HTML。
- 服务端将 HTML 和对应的数据一起返回。
- 浏览器显示内容，并下载 JS 包。
- React 在水合阶段绑定事件，接管页面交互。
典型框架：Next.js（Pages Router 的 getServerSideProps，App Router 的 Server Components）、Remix。
适用场景：
- 内容高度动态、需要实时数据（如用户仪表盘、实时数据看板）。
- SEO 很重要，且页面内容频繁变化（如新闻详情页、电商商品页）。
- 需要根据请求定制页面（如根据 User-Agent 或 cookie 做个性化渲染）。
注意事项：
- 服务器压力较大，每个请求都要执行渲染，需配合缓存策略。
- 首字节时间（TTFB）可能比静态生成高，需要优化服务端逻辑。
- 若水合失败或过程过慢，可能造成页面交互迟滞。
三、静态站点生成（SSG）：构建时预生成 HTML
核心原理
在构建（Build）阶段，运行 React 组件生成静态 HTML 文件，部署时这些 HTML 直接作为静态资源。用户请求时，服务器（或 CDN）直接返回预先生成的 HTML，无服务端计算开销。
实际流程：
npm run build时，工具（如 Next.js）执行所有需要静态生成的页面。- 每个页面生成对应的 HTML 文件（可能还有 JSON 数据文件）。
- 部署后，CDN 直接分发静态 HTML。
- 浏览器加载后同样进行水合。
典型框架：Next.js（getStaticProps，或 App Router 中默认的静态生成）、Gatsby。
适用场景：
- 内容不经常变化，或变化可控（如博客文章、文档站、营销落地页）。
- 追求极致的首屏速度和 CDN 缓存效果。
- 不需要每次请求服务端计算的页面。
注意事项：
- 内容更新需要重新构建和部署，不适合实时变化的页面。
- 大量页面时构建时间会很长，需要增量策略（如 ISR）。
四、增量静态再生成（ISR）：静态与动态的平衡
核心原理
ISR 是对 SSG 的扩展。你在构建时生成一组静态页面，但可以设定一个重新验证（revalidate）时间。当页面过期后，CDN 上仍提供之前版本的 HTML，同时后台触发一次重新生成，后续请求得到新版本。
实际流程：
- 首次构建生成静态页面，并设置
revalidate时间（如 60 秒）。 - 用户请求页面，CDN 返回当前缓存的静态 HTML。
- 若距离上次生成已超过 60 秒，下一次请求会触发后台异步重新生成该页面，新生成的 HTML 替换旧缓存。
- 页面更新无需全站重新构建。
典型框架：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 章）。