Next.js 中的 SSR、SSG 和 ISR 是什么？

Question

Accepted Answer

这三种是主要的策略，用于确定*何时*生成页面的 HTML。为每个页面选择正确的方案可以在新鲜度、性能和服务器成本之间实现平衡。 ## SSG — Static Site Generation（构建时） ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` 页面在构建时预先渲染为静态 HTML 并在 CDN 上缓存。**最快的**交付速度，但内容在下一次构建前保持冻结。最适合内容很少变化的场景：营销页面、文档、博客文章。 ## SSR — Server-Side Rendering（每次请求时） ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` 服务器在每次请求时渲染页面，因此数据始终是最新的——但代价是响应较慢且每次访问都会产生服务器负载。最适合个性化或始终需要新鲜数据的场景：仪表板、账户页面、搜索结果。 ## ISR — Incremental Static Regeneration（混合方案） ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR 提供静态 HTML（快速、CDN 缓存），但在后台按计划**重新验证**——这样可以获得静态性能和定期更新的数据，无需重新构建整个站点。最适合内容偶尔变化的场景：产品列表、新闻、排行榜。 ## 为什么这很重要 ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` 在 App Router 中，你通过 cache 选项（`force-cache` = SSG，`no-store` = SSR，`revalidate` = ISR）为每次 fetch 选择这些策略，而不是使用特殊函数。理解这个权衡——静态最快但过期，SSR 最新但成本高，ISR 两者兼顾——可以让你为每个页面优化出最适合的性能和数据新鲜度组合。