面试题：Next.js嵌套路由中如何使用 `getStaticProps` 进行数据预取

Question

在Next.js的嵌套路由结构下，假设存在多层嵌套路由，例如 `/parent/[id]/child`，请阐述如何在 `child` 页面组件中使用 `getStaticProps` 来预取数据，并且说明这种预取方式在构建时和运行时的行为表现。

Answer 1

在 child 页面组件中使用 getStaticProps 预取数据

1. 导入 getStaticProps：在 child 页面组件文件（例如 child.js）中，从 next 库导入 getStaticProps 函数。

import { getStaticProps } from 'next';

2. 定义 getStaticProps 函数：

export async function getStaticProps(context) {
  const { params } = context;
  const id = params.id;

  // 这里可以根据 `id` 从 API 或其他数据源获取数据
  const data = await fetch(`https://your-api.com/data/${id}`).then(res => res.json());

  return {
    props: {
      data
    },
    revalidate: 60 // 可选，设置数据重新验证时间（秒）
  };
}

3. 在组件中使用数据：

const ChildPage = ({ data }) => {
  return (
    <div>
      {/* 在这里展示数据 */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ChildPage;

构建时和运行时的行为表现

1. 构建时：
   • 数据预取：Next.js 在构建过程中，会调用 getStaticProps 函数，根据路由参数（如 [id]）获取数据。它会遍历所有可能的路由参数组合（如果使用 getStaticPaths 定义了路径），并为每个路径预渲染页面。
   • 页面生成：获取到的数据通过 props 传递给页面组件，然后 Next.js 使用这些数据生成静态 HTML 文件。这些文件会被输出到 .next 目录，最终部署到生产环境。
2. 运行时：
   • 首次加载：用户访问 child 页面时，服务器直接返回预渲染好的静态 HTML 文件，加快页面加载速度。由于数据在构建时已经预取，所以无需额外的网络请求即可展示数据。
   • 重新验证（如果设置了 revalidate）：如果设置了 revalidate 选项，在页面已经被静态生成并部署后，Next.js 会在指定的时间间隔（revalidate 的值，单位为秒）内，在后台重新运行 getStaticProps 函数。当有新请求到达时，如果数据已经重新验证，Next.js 会返回更新后的静态页面；如果还未完成重新验证，则返回旧的静态页面，同时继续在后台更新数据。这种机制在保持页面快速加载的同时，也能保证数据的相对实时性。