面试题：Next.js 中 getStaticProps 与 getStaticPaths 如何协同进行基本的静态站点生成

使用 getStaticProps 和 getStaticPaths 实现静态生成博客文章页面
- getStaticPaths 函数：
  - 这个函数用于生成所有需要静态生成页面的路径。在博客系统中，假设每篇博客文章有一个唯一的标识符（比如 id），可以从数据源（如数据库、文件系统等）中获取所有文章的 id 列表。
  - 示例代码如下：

export async function getStaticPaths() {
    // 假设从数据库获取所有文章的id列表
    const posts = await getAllPostsFromDatabase();
    const paths = posts.map(post => ({
        params: { id: post.id.toString() }
    }));
    return { paths, fallback: false };
}

 - `fallback` 为 `false` 表示只有在 `paths` 数组中指定的路径才会被静态生成。如果设置为 `true`，当用户访问不存在的路径时，Next.js 会在用户请求时生成页面。如果设置为 `blocking`，Next.js 会在用户请求时生成页面并阻塞请求直到页面生成完成。

getStaticProps 函数：
- 这个函数在构建时（如果 fallback 为 false）或用户请求时（如果 fallback 为 true 或 blocking）执行，用于获取每个页面的数据。
- 示例代码如下：

export async function getStaticProps(context) {
    const { id } = context.params;
    const post = await getPostFromDatabase(id);
    return {
        props: {
            post
        },
        revalidate: 60 * 60 * 24 // 可选，设置页面重新验证时间（秒），用于增量静态再生
    };
}

 - 在页面组件中，可以通过 `props` 接收 `getStaticProps` 返回的数据，例如：

const PostPage = ({ post }) => {
    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </div>
    );
};
export default PostPage;

执行时机：
- getStaticPaths：在构建阶段执行，用于确定哪些页面需要静态生成。它返回一个包含所有需要生成页面路径的数组，以及一个 fallback 选项。
- getStaticProps：对于 fallback: false 的情况，在构建阶段，为 getStaticPaths 返回的每个路径执行，获取对应页面的数据。对于 fallback: true 或 fallback: blocking 的情况，除了构建阶段为 getStaticPaths 返回的路径执行外，当用户请求一个未在构建时生成的路径时也会执行，以在请求时生成页面。如果设置了 revalidate，getStaticProps 还会在指定的时间间隔后在服务器端重新执行，更新页面数据（增量静态再生）。
相互关系：
- getStaticPaths 确定需要静态生成的页面路径，而 getStaticProps 为这些路径对应的页面获取数据。getStaticPaths 的执行先于 getStaticProps，getStaticPaths 返回的路径会作为 getStaticProps 中 context.params 的来源，以便 getStaticProps 根据不同的路径参数获取相应的数据。

星途面试题库

面试题：Next.js 中 getStaticProps 与 getStaticPaths 如何协同进行基本的静态站点生成

知识考点

面试题答案