在现代前端开发中，我们不再仅仅满足于用 JavaScript 在客户端渲染页面。为了更好的首屏加载速度和搜索引擎优化（SEO），一系列服务端相关的渲染模式应运而生。
开发者常常会遇到 SSR, SSG, ISR 等术语，它们都属于服务端渲染的范畴，但其工作方式和适用场景有显著区别。本文旨在清晰、系统地阐述这些主流的前端渲染模式，并对它们的优缺点和适用场景进行对比。
在开始之前，我们先定义一个基准：CSR (Client-Side Rendering) 。
- CSR 工作流程：浏览器下载一个近乎空白的 HTML 文件和一个 JavaScript 包。JS 包在浏览器端执行，通过 API 获取数据，然后渲染出页面内容。
- CSR 核心问题：首屏内容为空，SEO 不友好；用户需要等待 JS 下载并执行完毕才能看到内容，导致首屏加载速度慢（FCP/LCP 指标差）。
为了解决 CSR 的问题，以下四种渲染模式登上了舞台。
SSR (Server-Side Rendering) - 服务端渲染
每当用户请求页面时，服务器会实时查询数据，动态生成完整的 HTML 页面，然后返回给浏览器。
工作流程：
浏览器向服务器发起页面请求。
服务器接收请求，执行相关程序（例如，访问数据库或 API 获取数据）。
服务器将数据和前端组件渲染成一个完整的 HTML 字符串。
服务器将此 HTML 字符串发送回浏览器。
浏览器接收到 HTML 后，立刻可以展示出有内容的页面（优秀的 FCP/LCP）。
与此同时，浏览器在后台下载页面所需的 JavaScript 包。
JS 下载并执行完毕后，会对静态的 HTML 进行“注水”（Hydration），即附加事件监听器，让页面变得可交互。
优点：
- SEO 友好：返回给搜索引擎爬虫的是包含完整内容的 HTML。
- 首屏加载快：用户能非常快地看到页面的内容。
缺点：
- 服务器压力大：每个请求都需要在服务器端实时渲染，对服务器计算资源消耗较大。
- TTFB（Time to First Byte）较慢：因为服务器在返回第一个字节前，需要完成数据获取和渲染的全部工作。
适用场景：
- 内容需要频繁更新、高度动态化的页面，如新闻网站、电商商品列表、社交媒体信息流。
- 需要根据用户信息实时生成个性化内容的页面，如用户个人中心。
代表框架/工具：
- Next.js (
getServerSideProps) - Nuxt
SSG (Static Site Generation) - 静态站点生成
在构建时（Build Time），提前将所有页面都生成为静态的 HTML 文件。用户请求时，直接返回已经生成好的 HTML 文件。
工作流程：
- 开发者执行构建命令（如
npm run build）。 - 构建工具在构建过程中，获取所有需要的数据。
- 为每一个页面路径，生成一个对应的
.html文件。 - 将所有生成的 HTML、CSS、JS 文件部署到静态托管服务或 CDN 上。
- 当用户请求页面时，CDN 直接返回对应的 HTML 文件，无需服务器进行任何计算。
优点：
- 极快的 TTFB：响应速度是所有模式中最快的，因为文件是现成的。
- 服务器成本极低：无需应用服务器，只需静态文件托管服务。
- 安全性高：没有服务端逻辑，受攻击面小。
缺点：
- 构建时间长：如果网站页面数量巨大（如成千上万页），构建过程会非常缓慢。
- 内容更新不及时：每次内容更新，都需要重新构建并部署整个网站。
- 无法处理动态或个性化内容。
适用场景：
- 内容不经常变动的网站，如博客、产品文档、作品集、企业官网、营销落地页。
代表框架/工具：
- Next.js (
getStaticProps) - Nuxt (
nuxt generate) - Astro, Gatsby, Hugo
ISR (Incremental Static Regeneration) - 增量静态再生
SSG 的进化版。它允许你在构建后，根据设定的策略，在后台增量式地重新生成静态页面，而无需重新构建整个站点。
工作流程：
- 与 SSG 类似，在构建时生成一批静态页面。
- 为页面设置一个“重新验证”时间（例如
revalidate: 60，即 60 秒）。 - 用户请求一个页面，服务器返回缓存的静态 HTML。
- 如果距离上次生成该页面的时间超过了 60 秒，服务器会在后台悄悄地重新生成这个页面，并用新页面更新缓存。
- 第一个触发重新生成的的用户会看到旧的（stale）页面，但其后的所有用户都会看到最新的页面。
优点：
- 兼具 SSG 的速度和内容的准实时性。
- 无需为内容更新而重新构建整个站点，解决了 SSG 的痛点。
- 服务器负载远低于 SSR。
缺点：
- 触发更新的用户可能会在短时间内看到旧内容。
- 不适用于需要严格实时显示数据（如股票价格）的场景。
适用场景：
- 内容更新频繁，但对实时性要求不是极高的网站，如新闻门户、热门的电商商品页、社交媒体的热门帖子。
代表框架/工具：
- Next.js (在
getStaticProps中返回revalidate属性)
DPR (Distributed Persistent Rendering) - 分布式持久化渲染
一种与 ISR 类似的按需生成策略，但它不在构建时生成任何页面。页面只在第一次被用户请求时才生成，然后被持久化缓存到 CDN 上，供后续用户访问。
工作流程：
- 网站构建时，不生成具体的页面 HTML，只准备好生成页面的模板（通常是 Serverless Function）。
- 用户第一次请求某个页面（例如
/products/123）。 - CDN 未命中缓存，请求回源到 Serverless Function。
- Serverless Function 执行，获取数据，渲染出页面 HTML。
- 将生成的 HTML 返回给用户的同时，也将其持久化到 CDN 缓存中。
- 之后所有请求该页面的用户，都将直接从 CDN 获取缓存的 HTML。
优点：
- 构建速度极快，因为几乎不生成页面。
- 非常适合拥有海量页面（如数百万个商品）但大部分页面访问量很低的网站。
缺点：
- 每个页面的第一个访问者，需要经历一次较慢的 SSR 加载过程。
适用场景：
- 拥有超大规模页面的网站，如大型电商平台、文档库、历史存档网站。
代表框架/工具：
- Netlify (On-demand Builders)
- 可以通过其他 Serverless 平台（如 Vercel）自行实现此模式。
为了更直观地对比，我们可以用一个表格来总结：
| 特性 | CSR | SSR | SSG | ISR | DPR |
|---|---|---|---|---|---|
| SEO | 差 | 好 | 好 | 好 | 好 |
| TTFB | 快 | 慢 | 极快 | 极快 | 慢 (首次) / 极快 (后续) |
| 首屏速度(FCP/LCP) | 慢 | 快 | 快 | 快 | 慢 (首次) / 快 (后续) |
| 服务器成本 | 低 | 高 | 极低 | 低 | 中 (按需计算) |
| 数据实时性 | 实时 | 实时 | 差 (构建时) | 准实时 | 准实时 |
| 构建时间 | 快 | 快 | 慢 (页面多时) | 快 | 极快 |
我们如何选择用啥呢？
- 内容完全静态或更新极少：选择 SSG。 (博客、文档)
- 内容需要 SEO 且高度动态/个性化：选择 SSR。 (用户中心、搜索结果)
- 内容多、更新频繁但能接受分钟级延迟：选择 ISR。 (新闻网站、热门商品)
- 内容页面数量巨大，但长尾访问多：考虑 DPR。 (大型电商)
- 无需 SEO 的应用或后台系统：经典的 CSR 依然是简单高效的选择。
现代前端框架（如 Next.js）的强大之处在于，它们允许你在同一个应用中，为不同的页面灵活选择不同的渲染模式，让你能为每个场景都找到最优解。