面试题：Next.js 中 getStaticProps 与增量静态再生

1. getStaticProps 结合增量静态再生的工作原理

getStaticProps 基础：getStaticProps 是 Next.js 中用于在构建时获取数据并将其作为 props 传递给页面组件的函数。它会在构建阶段运行，将数据预渲染到 HTML 页面中，这样用户在访问页面时能够快速获取内容，提升了首屏加载性能。
增量静态再生：增量静态再生允许在页面已经生成静态 HTML 之后，在指定的时间间隔或者特定事件触发时重新生成该页面的静态内容。这意味着，即使页面是在构建时生成的，也可以在运行时进行更新，而无需重新构建整个应用。
结合工作原理：当使用 getStaticProps 结合增量静态再生时，页面首先在构建时通过 getStaticProps 获取数据并生成静态 HTML。然后，Next.js 会根据设置的 revalidate 选项（增量静态再生的关键配置），在指定的时间间隔后重新运行 getStaticProps 函数，更新页面的静态内容。在重新验证期间，如果有新请求访问该页面，Next.js 会先返回旧的静态内容，同时在后台更新静态内容，一旦更新完成，后续请求将收到新的静态内容。

2. 优势业务场景

内容频繁更新但需要良好 SEO 和性能：比如新闻网站，新闻内容经常变化，但又希望搜索引擎能够快速索引页面。使用 getStaticProps 结合增量静态再生，可以在构建时生成初始的静态页面以满足 SEO 需求，然后通过增量静态再生定期更新新闻内容，确保用户看到最新信息。
电商产品页面：产品信息可能会不时更新，如价格、库存等。通过这种结合方式，既可以在构建时快速生成产品页面以提供良好的用户体验，又能定时更新产品相关信息，保证用户获取到准确的数据。

3. 实现增量静态再生的简单代码示例

import React from 'react';

function MyPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();

  return {
    props: {
      data
    },
    revalidate: 60 * 5, // 每5分钟重新验证一次
  };
}

export default MyPage;

在上述示例中，getStaticProps 函数从 API 获取数据，并通过 revalidate 选项设置为每 5 分钟重新验证并更新静态页面内容。页面组件 MyPage 接收 data 作为 props 并展示数据。

星途面试题库

面试题：Next.js 中 getStaticProps 与增量静态再生

知识考点

面试题答案

1. getStaticProps 结合增量静态再生的工作原理

2. 优势业务场景

3. 实现增量静态再生的简单代码示例