编辑“︁Next.js增量静态再生成（ISR）”︁（章节）

== 基本用法 ==

要在Next.js中使用ISR，需要在`getStaticProps`函数中返回`revalidate`属性：

<syntaxhighlight lang="javascript">
// pages/products/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
    // 每60秒重新生成页面
    revalidate: 60,
  };
}
</syntaxhighlight>

同时，你还需要使用`getStaticPaths`来指定哪些路径应该预先生成：

<syntaxhighlight lang="javascript">
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }));

  // 预生成前10个产品页面，其余按需生成
  return { paths: paths.slice(0, 10), fallback: 'blocking' };
}
</syntaxhighlight>

关键参数说明：
* `revalidate`: 重新生成页面的时间间隔（秒）
* `fallback`: 
  * `false`: 只生成`paths`中指定的页面，其他路径返回404
  * `true`: 未生成的页面首次访问时在客户端生成
  * `'blocking'`: 未生成的页面首次访问时在服务器端生成