预渲染技术对比：SSR vs SSG vs ISR vs CSR

为什么需要不同的渲染模式

在现代 Web 开发中，渲染模式的选择直接影响到网站的性能、SEO、用户体验和维护成本。不同的应用场景对渲染模式有截然不同的要求——一个博客网站需要极致的首屏加载速度和 SEO 友好度，而一个后台管理系统则更关注交互复杂度和实时数据更新。

目前主流的四种渲染模式——CSR（客户端渲染）、SSR（服务端渲染）、SSG（静态站点生成）和 ISR（增量静态生成）——各自在性能、灵活性和运维复杂度之间做出不同的权衡。本文将深入对比这四种方案，帮助你为项目选择最适合的渲染策略。

需要强调的是，这四个选项不是"先进代替落后"的线性关系，而是"按场景取舍"的平行关系。选错模式不会让网站立刻坏掉，但会在流量上来后以"首屏慢、服务器贵、改版难"的方式持续收费。

一、四种渲染模式详解

1.1 CSR - 客户端渲染

工作原理：服务器返回一个空的 HTML 骨架和 JavaScript 包，浏览器执行 JS 后渲染页面内容。

代表框架：Create React App、Vite + React/Vue

优点：

• 部署简单，仅需静态文件托管
• 页面切换速度快（SPA 体验）
• 服务器负载低

缺点：

• 首屏加载慢（需要下载并执行 JS）
• SEO 不友好（爬虫难以抓取动态内容）

典型场景是后台管理系统、数据看板这类"登录后才能用"的工具。用户不指望这些页面被搜索引擎收录，也不在乎首屏慢几百毫秒，但需要复杂的交互和状态管理——CSR 正好合适。

1.2 SSR - 服务端渲染

工作原理：服务器在收到请求时渲染完整的 HTML 页面，浏览器直接展示并激活交互。

代表框架：Next.js、Nuxt.js、Remix

优点：

• 首屏内容快速可见
• SEO 友好
• 适合动态内容

缺点：

• 服务器成本高（每个请求都需要渲染）
• 响应时间受数据获取速度影响

SSR 适合内容因人而异的页面，比如需要实时登录状态的个人中心、根据用户权限变化的页面。它最怕的"天敌"是慢接口：如果页面依赖一个 2 秒才返回的数据接口，那么所有访客都会在服务器上干等 2 秒，必须配合流式渲染或缓存缓解。

1.3 SSG - 静态站点生成

工作原理：在构建时生成所有页面的 HTML 文件，服务器直接返回预构建的静态文件。

代表框架：Astro、Gatsby、Hugo、11ty

优点：

• 加载速度最快（预构建的 HTML）
• 安全性高（无运行时服务器）
• 托管成本低（仅需 CDN）

缺点：

• 内容更新需要重新构建
• 不适合动态数据

内容型网站（博客、文档、官网）几乎都是 SSG 的受益者：页面内容在一段时间内是固定的，完全可以在构建时变成静态文件扔到 CDN 上。配合增量构建，几百篇文章的站点改一篇只需要重新生成一页，构建时间完全可以接受。

1.4 ISR - 增量静态生成

工作原理：结合 SSG 和 SSR 的优点，按需重新生成特定页面，无需全量构建。

代表框架：Next.js

ISR 的思路是"平时当静态站用，需要时后台悄悄更新"。例如电商的商品详情页，大多数时间内容不变，可以直接静态化；当价格或库存变动时，系统在后台按 revalidate 间隔重新生成这一页。它比纯 SSG 多一层"过期再生成"的逻辑，也比纯 SSR 省掉大量重复渲染。

二、方案对比

三、选型决策指南

3.1 按场景选择

• 内容型网站（博客、文档、官网）：优先考虑 SSG，性价比最高
• 电商平台：ISR 或 SSR，需要在 SEO 和内容实时性之间平衡
• 后台管理系统：CSR 完全可以满足需求
• 社交/新闻类：SSR 确保首次访问的即时内容展示

3.2 混合使用策略

大多数现代框架支持混合渲染模式。例如在 Next.js 中，你可以同时使用 SSG、SSR 和 ISR：

// 静态生成的营销页面
export async function getStaticProps() {
  return { props: { marketing: true } };
}

// ISR 的博客页面
export async function getStaticProps() {
  return {
    props: { posts: await getPosts() },
    revalidate: 60,
  };
}

// SSR 的用户仪表盘
export async function getServerSideProps(context) {
  return {
    props: { userData: await fetchUserData(context.req.cookies.token) },
  };
}

一个常见的混合落地方案：营销首页用 SSG、商品列表页用 ISR（每 60 秒重新生成）、用户购物车用 SSR。三种模式在同一个项目里各司其职，比"全站一种模式"更贴合真实业务。

3.3 一个完整案例

假设要做一个面向内容营销的官网：对外展示的博客、案例、定价页需要极快与极好的 SEO，用 SSG 构建后托管到 CDN；站内搜索和用户收藏是登录后的功能，用 CSR 实现；产品文档偶尔更新，用 ISR 设置 10 分钟 revalidate。最终整站 CDN 命中率接近 100%，源站几乎不承受请求压力，新文章上线后 10 分钟内即可通过文档站看到更新。这套组合把三种模式的优点都用在了刀刃上。

四、注意事项

1. 不要过度工程化：初创项目选择最简单的方案，按需升级
2. 考虑团队能力：SSR 和 ISR 对运维能力要求更高
3. 评估数据更新频率：内容更新频率决定了缓存策略
4. CDN 缓存策略：合理配置缓存可以有效弥补性能差距

五、总结

没有一种渲染模式能适用于所有场景。选择合适的方案取决于项目的具体需求——内容更新频率、SEO 要求、团队技术栈和预算。总体上，推荐优先考虑 SSG 作为默认选择，当需要动态内容时逐步引入 ISR 或 SSR。随着边缘计算和流式传输技术的发展，未来渲染模式的边界将越来越模糊。

参考：https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration（Next.js ISR 官方文档）
参考：https://www.smashingmagazine.com/2020/11/static-site-generator-build-logic-incremental-static-regeneration/（Smashing Magazine ISR 介绍）