ISR(Incremental Static Regeneration) 首次静态构建 + 后续按需更新

🌱 一句话总结

ISR = 静态生成（SSG） + 按需更新
它让静态页面在构建后仍可自动更新，而无需重新构建整个站点。

🧭 工作原理（核心机制）

1. 构建时（build time）
   页面通过 getStaticProps() 生成静态 HTML 文件，直接部署到 CDN。

2. 用户访问时
   页面从缓存（CDN）中返回——速度极快（无需服务器渲染）。

3. 过期后自动再生
   当到达 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>;
}

• 第一次访问 → 返回构建时的静态 HTML
• 60 秒后 → Next.js 自动后台生成一个新的 HTML 文件
• 后续访问 → 直接使用更新后的静态文件

🚀 ISR 带来的好处

📊 ISR vs SSR vs SSG 对比

🧠 小结

🔹 SSG = 一次生成，永不变
🔹 SSR = 每次生成，永远新
🔹 ISR = 一次生成，定期更新

💡 典型用例：

• 博客文章（每隔几分钟更新）
• 电商商品详情页（库存/价格更新）
• 文档站点（内容变化不频繁）