SSR vs SSG vs ISR渲染模式对比

SSR（Server-Side Rendering）

每次请求在服务端渲染HTML：

export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

优点：

• 实时数据（每次请求最新）
• SEO完美
• 首屏加载快（HTML直达）

缺点：

• TTFB（首字节时间）较慢（需等待服务端渲染）
• 服务端负载大
• CDN缓存困难（动态内容）

适用： 电商详情页（价格实时）、用户仪表盘、个性化页面

SSG（Static Site Generation）

构建时预先生成HTML：

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

export async function getStaticPaths() {
  const posts = await fetchPosts();
  return { paths: posts.map(p => ({ params: { id: p.id } })), fallback: false };
}

优点：

• 最快加载（CDN直接服务HTML）
• 最小服务端负载
• 安全性好（无动态数据库查询）

缺点：

• 数据过时（构建时的快照）
• 大量页面构建时间长
• 不适合动态内容

适用： 博客、文档、营销页面、产品目录

ISR（Incremental Static Regeneration）

SSG的升级版：静态HTML+增量更新：

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // 每60秒尝试重新生成
  };
}

工作原理：

1. 构建时生成静态HTML
2. 第一次请求（revalidate到期后）触发后台重新生成
3. 用户始终看到旧版本（或stale-while-revalidate）
4. 新版本生成后更新CDN缓存

优点：

• 兼具SSG的速度和动态内容的时效性
• 无需全量重新构建
• CDN高效缓存

缺点：

• 数据不是绝对实时（有revalidate窗口）
• 首次触发重新生成时用户可能看到旧数据

适用： 博客含评论、电商库存（可接受短时间延迟）、新闻门户

Next.js中如何选择

场景	推荐模式
数据实时性高/个性化	SSR
内容少且静态不变	SSG
内容多且有时效性	ISR
用户交互为主	CSR（客户端渲染）
混合需求	按页面选择不同模式