面试题：Next.js 中 getStaticProps 与 Incremental Static Regeneration 的关系及应用

getStaticProps 和 Incremental Static Regeneration 的关系

相同点：
- 目的：两者都旨在优化 Next.js 应用的性能，通过在构建时或之后生成静态页面。getStaticProps在构建时获取数据并生成静态页面，Incremental Static Regeneration 同样是为了生成静态页面，但可以在构建后更新这些页面。
- 静态优化：都利用了静态生成的优势，使得页面能够快速加载，因为静态文件可以直接从 CDN 等快速分发，减少服务器压力。
不同点：
- 数据获取时机：getStaticProps在构建时获取数据，这意味着数据在构建过程中被固定下来。而 Incremental Static Regeneration 不仅可以在构建时获取数据，还能在页面请求时（或指定的时间间隔）重新获取数据并更新静态页面。
- 实时性：getStaticProps生成的页面数据实时性取决于构建频率，构建频率低则数据更新不及时。Incremental Static Regeneration 允许页面数据在构建后更新，提高了数据的实时性。

电商产品详情页面场景优化

使用 getStaticProps 构建初始页面：

在电商产品详情页面中，使用getStaticProps在构建时获取产品的基本信息，如产品名称、描述、图片等相对稳定的数据。
示例代码：

export async function getStaticProps(context) {
  const productId = context.params.productId;
  const productData = await fetchProductData(productId);
  return {
    props: {
      product: productData
    },
    revalidate: 60 * 60 * 24 // 24 小时后重新验证，这里先设置好用于后续结合 Incremental Static Regeneration
  };
}

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

结合 Incremental Static Regeneration 实现数据更新：
- 由于产品信息可能偶尔更新，设置revalidate选项来启用 Incremental Static Regeneration。在上述getStaticProps的返回对象中设置revalidate属性，例如设置为60 * 60 * 24（表示24小时）。
- 当页面请求到达时，如果距离上次生成页面的时间超过了revalidate设置的时间，Next.js 会在后台重新运行getStaticProps获取最新数据并更新静态页面。在此期间，用户仍然会看到旧版本的页面，直到新页面生成完毕。这样既保证了页面的快速加载（得益于静态生成），又能在一定时间间隔后更新数据，提高了数据的实时性。
- 对于产品价格等更敏感的数据，也可以考虑结合前端轮询（在页面组件中使用useEffect和setInterval等方法）定期获取最新价格并显示，作为对 Incremental Static Regeneration 的补充，进一步提高数据实时性。

星途面试题库

面试题：Next.js 中 getStaticProps 与 Incremental Static Regeneration 的关系及应用

知识考点

面试题答案

getStaticProps 和 Incremental Static Regeneration 的关系

电商产品详情页面场景优化