ISR（Incremental Static Regeneration） 是 Next.js 的独特功能，它结合了静态生成（SSG）和服务器渲染（SSR）的优点，是一种 “按需再生的静态页面” 渲染模式。
ISR = 静态生成（SSG） + 按需更新
它让静态页面在构建后仍可自动更新，而无需重新构建整个站点。
构建时（build time）
页面通过 getStaticProps() 生成静态 HTML 文件，直接部署到 CDN。
用户访问时
页面从缓存（CDN）中返回——速度极快（无需服务器渲染）。
过期后自动再生
当到达 revalidate 时间，Next.js 在后台重新生成页面（增量更新），下次请求时自动使用新的静态版本。
// pages/posts/[id].tsx
export async function getStaticProps() {
const post = await fetch('https://api.example.com/posts/1').then(r => r.json());
return {
props: { post },
revalidate: 60, // ⏱️ 每60秒后台自动再生成一次
};
}
export default function Post({ post }) {
return <article>{post.title}</article>;
}
| 优点 | 说明 |
|---|---|
| ⚡ 超快加载 | 与 SSG 一样，直接从 CDN 提供静态页面 |
| 🔄 自动更新 | 数据可定期刷新，而不需重新部署 |
| 💰 节省成本 | 无需全量重建（build），仅增量更新 |
| 🌍 SEO 友好 | 内容以静态 HTML 提供，利于搜索引擎抓取 |
| 模式 | 渲染时机 | 性能 | 数据更新 | 适用场景 |
|---|---|---|---|---|
| SSG | 构建时 | ⚡⚡⚡ | ❌ 需重新构建 | 内容稳定 |
| SSR | 请求时 | ⚡ | ✅ 实时数据 | 动态内容 |
| ISR | 构建时 + 按需更新 | ⚡⚡ | ✅ 定时更新 | 内容半动态、频繁变动的博客、产品页 |
🔹 SSG = 一次生成，永不变
🔹 SSR = 每次生成，永远新
🔹 ISR = 一次生成，定期更新
💡 典型用例：