在现代前端开发中，我们不再仅仅满足于用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
- Next.js (
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
- Next.js (
ISR (Incremental Static Regeneration) - 增量静态再生
-
是什么？
SSG的进化版。它允许你在构建后，根据设定的策略，在后台增量式地重新生成静态页面，而无需重新构建整个站点。
-
工作流程：
- 与SSG类似，在构建时生成一批静态页面。
- 为页面设置一个"重新验证"时间（例如
revalidate: 60，即60秒）。 - 用户请求一个页面，服务器返回缓存的静态HTML。
- 如果距离上次生成该页面的时间超过了60秒，服务器会在后台悄悄地重新生成这个页面，并用新页面更新缓存。
- 第一个触发重新生成的的用户会看到旧的（stale）页面，但其后的所有用户都会看到最新的页面。
-
优点：
- 兼具SSG的速度和内容的准实时性。
- 无需为内容更新而重新构建整个站点，解决了SSG的痛点。
- 服务器负载远低于SSR。
-
缺点：
- 触发更新的用户可能会在短时间内看到旧内容。
- 不适用于需要严格实时显示数据（如股票价格）的场景。
-
适用场景：
- 内容更新频繁，但对实时性要求不是极高的网站，如新闻门户、热门的电商商品页、社交媒体的热门帖子。
-
代表框架/工具：
- Next.js (在
getStaticProps中返回revalidate属性)
- Next.js (在
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）的强大之处在于，它们允许你在同一个应用中，为不同的页面灵活选择不同的渲染模式，让你能为每个场景都找到最优解。
科普完毕，谢谢大家🙂