面试题：Next.js getStaticProps 与增量静态再生的关联与差异

联系

数据获取方式：getStaticProps 和增量静态再生都是 Next.js 用于在构建时或请求时获取数据并注入到页面中的机制。它们都旨在提高页面的性能，通过在服务器端获取数据，避免在客户端进行重复的数据请求。
应用场景：都适用于页面数据不需要实时更新，并且可以预先渲染的数据场景。例如博客文章页面、产品介绍页面等，这些页面的数据相对稳定，不需要在每次请求时都获取最新数据。

区别

数据更新机制
- getStaticProps：数据是在构建时获取并嵌入到静态页面中的。一旦构建完成，页面的数据就固定下来，不会随时间变化。如果数据发生变化，需要重新构建应用才能更新页面数据。
- 增量静态再生：在构建时获取初始数据并生成静态页面。但与 getStaticProps 不同的是，它允许在后续请求时重新生成静态页面，更新数据。数据更新可以按一定时间间隔进行，也可以在特定事件触发时进行。
性能优化
- getStaticProps：由于数据在构建时获取，构建过程可能会因为数据获取而变长。但构建完成后，页面可以快速交付给用户，适合数据不常变化的场景，减少运行时的计算开销。
- 增量静态再生：在构建时只获取初始数据，构建速度相对较快。后续数据更新在请求时进行，不会影响构建时间。但每次数据更新都需要一定的时间，可能会导致首次更新请求时稍有延迟。
适用场景
- getStaticProps：适用于数据极少变化的页面，如公司的“关于我们”页面，数据几个月甚至几年都不会改变。
- 增量静态再生：适用于数据有一定更新频率，但不需要实时更新的页面。例如新闻文章页面，虽然新闻内容不会实时变动，但可能需要每天更新一次以获取最新的评论数量等数据。

示例：何时选择增量静态再生

假设你正在开发一个电子商务网站的产品页面。产品的基本信息（如名称、描述、价格）在一段时间内是稳定的，但库存数量会随着订单的处理而实时变化。虽然库存数量不需要实时显示在产品页面上，但需要每隔几小时更新一次，以反映当前的库存情况。

在这种情况下，使用增量静态再生会比单纯使用 getStaticProps 更合适。

export async function getStaticProps({ params }) {
  const product = await getProductFromDB(params.productId);
  return {
    props: {
      product
    },
    revalidate: 3600 // 每小时重新验证并更新数据
  };
}

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

在这个例子中，getStaticProps 在构建时获取产品的基本信息，并通过 revalidate 选项设置每小时重新验证并更新数据。这样既保证了页面在构建时能够快速生成，又能定期更新库存数量等数据。如果使用单纯的 getStaticProps，库存数量只有在重新构建应用时才会更新，无法满足定时更新的需求。

星途面试题库

面试题：Next.js getStaticProps 与增量静态再生的关联与差异

知识考点

面试题答案

联系

区别

示例：何时选择增量静态再生