Web 渲染策略 · 深度解析

CSR · SSR
SSG · ISR

现代 Web 框架提供了多种页面渲染策略。理解它们的原理、权衡与适用场景， 是每一位前端工程师的核心能力。本文将用清晰的图解和真实的代码帮你彻底掌握四大渲染方案。

CSRSSRSSGISR

为什么渲染策略很重要？

性能体验

首屏加载时间直接影响用户留存率。每慢 100ms，转化率下降 7%。

搜索引擎优化

爬虫能否读取你的页面内容，取决于 HTML 是否在首次响应中包含完整数据。

基础设施成本

不同的渲染策略对服务器、CDN、构建工具的要求截然不同，直接影响运营成本。

四大渲染策略一览

csr

CSR

客户端渲染

所有渲染工作在浏览器端完成。服务器只返回一个空的 HTML 框架和 JavaScript Bundle，由浏览器下载、解析并执行 JS 后生成完整的 DOM。...

深入了解
ssr

SSR

服务端渲染

每次用户请求时，服务器在 Node.js 环境中实时执行 React 组件、获取数据、生成完整 HTML 字符串返回给浏览器，随后浏览器执行 Hydration...

深入了解
ssg

SSG

静态站点生成

在 构建时 (Build Time) 预渲染所有页面为纯静态 HTML 文件。部署到 CDN 后，用户请求直接获取预生成的 HTML，无需任何服务端计算。...

深入了解
isr

ISR

增量静态再生

SSG 的进化版本。在静态生成的基础上，通过设置 `revalidate` 时间窗口，让页面在指定秒数后**自动在后台重新生成**。兼具静态站点的速度和动态内容...

深入了解

深度解析

Client-Side Rendering

CSR

客户端渲染

所有渲染工作在浏览器端完成。服务器只返回一个空的 HTML 框架和 JavaScript Bundle，由浏览器下载、解析并执行 JS 后生成完整的 DOM。

最佳适用场景

适合对 SEO 要求不高、交互极其复杂的管理后台 / SPA 应用

后台管理系统在线文档编辑器Figma 类工具
执行流程
1

1. 浏览器请求

用户访问 URL

2

2. 返回 HTML 骨架

仅含 <div id='root'> 和 <script>

3

3. 下载 JS Bundle

可能数百 KB 至数 MB

4

4. 执行 JavaScript

React 初始化渲染

5

5. 发起 API 请求

获取动态数据

6

6. 渲染完整页面

用户终于看到内容

优势

  • 前后端彻底分离
  • 交互响应极快（后续导航）
  • 服务器压力极小
  • 部署简单（静态托管即可）

劣势

  • 首屏白屏时间长
  • SEO 极差
  • JS 未加载完页面不可用
  • 低端设备性能开销大

Server-Side Rendering

SSR

服务端渲染

每次用户请求时，服务器在 Node.js 环境中实时执行 React 组件、获取数据、生成完整 HTML 字符串返回给浏览器，随后浏览器执行 Hydration 使其可交互。

最佳适用场景

适合需要强 SEO + 内容频繁变化的页面，如电商商品详情、新闻文章

电商产品页新闻详情页用户个人主页
执行流程
1

1. 浏览器请求

用户访问 /product/42

2

2. 服务端执行

运行 React + fetch 数据

3

3. 生成完整 HTML

含数据的完整文档

4

4. 返回浏览器

立即可看到内容

5

5. 加载 JS Bundle

下载客户端代码

6

6. Hydration

事件绑定，页面可交互

优势

  • SEO 非常友好
  • 首屏渲染极快
  • 动态数据实时反映
  • 社交分享有完整预览

劣势

  • 每次请求都要计算，服务器压力大
  • TTFB 受服务器性能影响
  • 需要 Node.js 服务器环境
  • Hydration 阶段仍需加载 JS

Static Site Generation

SSG

静态站点生成

在 构建时 (Build Time) 预渲染所有页面为纯静态 HTML 文件。部署到 CDN 后，用户请求直接获取预生成的 HTML，无需任何服务端计算。

最佳适用场景

适合内容不经常变动的页面，如博客、文档站、营销着陆页

技术博客官方文档站公司官网营销着陆页
执行流程
1

1. 构建阶段

next build 执行

2

2. 预取数据

fetch 所有页面所需数据

3

3. 渲染 HTML

生成每个页面的 .html

4

4. 部署 CDN

上传到边缘节点

5

5. 用户请求

直接从 CDN 获取

6

6. 瞬间加载

毫秒级首屏展现

优势

  • 访问速度极快（CDN 边缘节点）
  • SEO 完美
  • 服务器零压力
  • 安全性高（无服务器代码）
  • 可离线访问

劣势

  • 构建时间随页面数增长
  • 内容更新需重新构建部署
  • 不适合高度动态内容
  • 大量页面时构建极慢

Incremental Static Regeneration

ISR

增量静态再生

SSG 的进化版本。在静态生成的基础上，通过设置 `revalidate` 时间窗口，让页面在指定秒数后**自动在后台重新生成**。兼具静态站点的速度和动态内容的新鲜度。

最佳适用场景

适合内容会变化但实时性要求不极端的场景，如电商首页、排行榜、新闻列表

电商首页热搜排行榜新闻列表页产品目录
执行流程
1

1. 首次构建

像 SSG 一样生成静态页

2

2. 用户请求

直接返回缓存的 HTML

3

3. 过期检测

超过 revalidate 秒数

4

4. 返回旧页面

用户先看到上一版本

5

5. 后台再生

服务端悄悄重新渲染

6

6. 替换缓存

下次请求获得最新版本

优势

  • 兼具 SSG 速度和动态数据
  • 无需全量重新构建
  • 后台更新对用户透明
  • 按需再生，资源高效利用

劣势

  • 首次再生时可能展示旧数据
  • 需要 Node.js 运行时
  • 再生期间有短暂时差
  • 逻辑理解相对复杂

全维度对比矩阵

首屏速度

CSR

慢

SSR

快

SSG

极快

ISR

极快
SEO 友好度

CSR

差

SSR

好

SSG

极好

ISR

极好
数据实时性

CSR

实时

SSR

实时

SSG

构建时

ISR

近实时
服务器压力

CSR

无

SSR

大

SSG

无

ISR

小
构建速度

CSR

快

SSR

—

SSG

慢

ISR

渐进
缓存能力

CSR

浏览器

SSR

较难

SSG

CDN

ISR

CDN+
交互复杂度

CSR

极好

SSR

好

SSG

好

ISR

好
适用规模

CSR

中小型

SSR

中型

SSG

大型

ISR

大型

如何选择？决策指南

你的页面需要被搜索引擎收录吗？

不需要 SEO
→ CSR

如管理后台、内部工具，SEO 不重要，追求极致交互体验

需要 SEO

数据变化频率有多高？

几乎不变（博客、文档）
SSG
偶尔变化（每小时/每天）
ISR
实时变化（每次请求不同）
SSR

关键洞察

01

不是非此即彼

在同一个 Next.js 应用中，你可以对不同路由使用不同的渲染策略。产品列表用 ISR，用户中心用 CSR，博客用 SSG。

02

RSC 是新范式

React Server Components 进一步模糊了 SSR 和 SSG 的边界。组件级别的渲染策略配置，让你在组件粒度上做出选择。

03

测量驱动决策

不要凭直觉选择。使用 Lighthouse、Core Web Vitals 真实数据来验证你的渲染策略是否达到了预期效果。

04

流式渲染崛起

Next.js App Router 的 Streaming SSR 和 Suspense 边界，让 SSR 也能实现渐进式内容呈现，大幅改善 TTFB 和感知性能。

一句话速记

CSR

浏览器干活

SSR

服务器实时算

SSG

提前做好放 CDN

ISR

先用缓存 后台更新