WHAT - SSR vs SSG vs ISR

在 WHAT - 前端同构 Isomorphic Javascript 中我们已经介绍过前端同构技术，其中提到了 SSR、SSV、ISR。今天我们主要来学习一下这三类技术场景。

这三个是现代前端中非常重要的渲染策略，尤其在像 Next.js 这样的同构框架中常见：

1. SSR（Server-Side Rendering）服务器端渲染

说明

每次用户请求页面时，服务器都会实时运行代码，生成 HTML，然后返回给浏览器。

特点

• HTML 是实时生成的
• 支持动态数据
• 首屏加载快、SEO 好
• 每次请求都会占用服务器资源

使用场景

• 页面内容频繁变化，如：用户个性化页面、后台管理系统、动态文章详情页

2. SSG（Static Site Generation）静态站点生成

说明

在构建（build）时，系统提前把所有页面生成成静态 HTML 文件，部署时直接访问这些文件。

特点

• 生成一次，访问多次，访问速度极快
• 几乎不占用服务器资源
• 内容不能实时更新，更新需要重新构建部署

使用场景

• 内容稳定的页面，如：博客、文档、营销页、公司官网

3. ISR（Incremental Static Regeneration）增量静态生成（Next.js 独有）

说明

结合了 SSG 和 SSR 的优点，在构建后支持“按需更新”某些页面。某页面在后台静默再生成，不影响用户访问。

特点：

• 初次构建使用 SSG，访问快
• 后台静默更新，不阻塞用户
• 页面可定时/按需更新

使用场景

• 类似新闻、商品详情页等，大部分内容稳定，偶尔更新

对比总结

特性	SSR	SSG	ISR (Next.js)
构建时生成	❌	✅	✅（首次）
每次请求	✅ 实时生成	❌	❌（后台更新）
动态内容支持	✅	❌	✅
性能	中（视服务器性能）	高（静态）	高（静态 + 智能更新）
SEO	✅	✅	✅

如果你在用 Next.js，可以通过以下方式选择：

// SSR
export async function getServerSideProps() {
  return { props: { data: ... } }
}

// SSG
export async function getStaticProps() {
  return { props: { data: ... } }
}

// ISR（在 SSG 中加 revalidate）
export async function getStaticProps() {
  return {
    props: { data: ... },
    revalidate: 60, // 每隔 60 秒后台更新一次
  }
}