React Academy · 课时

增量静态再生成（ISR）

Q: 「增量静态再生成（ISR）」这节课中我会学到什么？

按计划或按需重新生成静态页面，无需完整重新部署。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

按计划或按需重新生成静态页面，无需完整重新部署。

增量静态再生成（ISR） 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是 ISR

增量静态再生成允许 Next.js 提供预先构建的静态页面，并在指定时间间隔后于后台重新生成页面，从而将静态 HTML 的速度与服务器渲染的新鲜度结合起来。

ISR 的工作原理

第一次请求时，Next.js 会提供缓存中的静态 HTML。重新验证时间窗口过期后，下一次请求会触发后台重新生成。重新生成完成后，后续请求会提供新页面。

使用 revalidate 启用 ISR

导出一个 revalidate 常量，或在服务器组件页面中的 fetch 调用上设置 next: { revalidate: N }。

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

动态路由中的 ISR

将 generateStaticParams 与 revalidate 结合使用，可以预先构建热门的动态页面，并按计划重新验证这些页面。

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

按需重新验证

从服务器操作、API 路由或 Webhook 处理程序中调用 revalidatePath() 或 revalidateTag()，即可立即重新生成指定页面，无需等待时间间隔结束。

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

未知路径的回退行为

对于不在 generateStaticParams 中的动态路由，将 dynamicParams = true（默认值）设置为按需渲染并缓存，或设置为 false 以返回 404。

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

先提供过期内容，再重新验证

重新生成期间，Next.js 会继续提供过期页面，直到新版本准备就绪。用户始终能获得响应，无需等待最新数据。

ISR、SSR 与静态渲染

静态渲染：构建一次，永不变化。ISR：预先构建，按计划重新生成。SSR：每次请求都渲染最新内容。对于偶尔变化但受益于静态提供速度的内容，请选择 ISR。

ISR 的注意事项

ISR 不适合个性化内容（特定于用户的数据）或必须实时更新的数据。对于这类内容，请使用 no-store fetch 和 SSR。

Pages Router 中的 ISR（getStaticProps）

在 Pages Router 中，ISR 使用 getStaticProps 及其返回值中的 revalidate。概念相同，但 API 不同。

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

验证 ISR

检查 x-nextjs-cache 响应标头：HIT 表示从缓存提供，MISS 表示刚刚渲染，STALE 表示在重新验证期间提供过期内容。

快速检查

当用户请求的 ISR 页面刚好超过重新验证时间窗口时，会发生什么？

回顾

ISR 会预先构建页面，并通过 export const revalidate = N 每 N 秒重新验证一次。使用 generateStaticParams 处理热门动态路由，并在数据变更后通过按需重新验证 revalidatePath/Tag 立即更新内容。

常见问题解答

「增量静态再生成（ISR）」课时是免费的吗？

是的 — 「增量静态再生成（ISR）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「增量静态再生成（ISR）」这节课中我会学到什么？

按计划或按需重新生成静态页面，无需完整重新部署。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「增量静态再生成（ISR）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy