预渲染技术对比：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 不友好（爬虫难以抓取动态内容）

1.2 SSR - 服务端渲染

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

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

优点：

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

缺点：

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

1.3 SSG - 静态站点生成

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

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

优点：

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

缺点：

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

1.4 ISR - 增量静态生成

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

代表框架：Next.js

二、方案对比

三、选型决策指南

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) },
  };
}

四、注意事项

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

五、总结

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