ReactJS(NextJs) 渲染模式 ~Incremental Static Regeneration (ISR)~

Source: Dev.to

ISR 的工作原理

• 从缓存提供：页面的首次请求会从缓存中提供预先生成的静态版本，确保始终快速响应。
• 后台再生成（基于时间）：你可以指定 revalidate 的秒数。该时间段过去后，下一次用户请求仍会立即收到陈旧（缓存）的页面。此请求会触发 Next.js 在后台重新生成页面的最新版本。
• 提供新鲜内容：一旦新页面成功生成，它会替换缓存的版本，随后所有访问者都会收到更新后的内容。

按需重新验证

在 Next.js 中的实现

// app/page.tsx or similar
export const revalidate = 60; // Regenerate the page every 60 seconds

export default async function Page() {
  const res = await fetch('https://example.com/items');
  const items = await res.json();
  // ... render items
}

好处

• 性能提升：页面即时从 CDN 缓存中提供。
• 构建时间缩短：仅重新生成必要的页面，对大型站点而言更高效。
• SEO 优势：交付新鲜的静态 HTML 页面，对搜索引擎友好。
• 无需重新部署即可获取新内容：来自 CMS 或数据库的内容更新会在不进行完整站点重建的情况下生效。