面试题：Next.js 中 getStaticPaths 与增量静态再生的结合应用

Question

已知在 Next.js 应用中有一个基于 getStaticPaths 的动态路由页面，现在需要引入增量静态再生机制，以保证页面数据在一定时间间隔内更新。请详细阐述实现步骤，并写出关键代码片段，包括如何在 getStaticProps 中配置增量静态再生相关参数。

Answer 1

实现步骤

1. 配置 getStaticProps 函数：在页面组件的 getStaticProps 函数中设置增量静态再生的相关参数。
2. 设置 revalidate 参数：revalidate 参数用于指定页面数据重新生成的时间间隔（以秒为单位）。

关键代码片段

假设我们有一个动态路由页面 pages/post/[id].js。

import React from 'react';
import { GetStaticPaths, GetStaticProps } from 'next';

// 模拟数据获取函数
const getPostData = async (id) => {
  // 这里应该是实际的数据获取逻辑，例如从数据库或 API 获取
  return { title: `Post ${id}`, content: 'This is the content' };
};

export const getStaticPaths: GetStaticPaths = async () => {
  // 这里获取所有可能的动态路由参数
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ];
  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await getPostData(params.id);

  return {
    props: {
      post
    },
    // 设置增量静态再生，每 60 秒重新生成一次页面数据
    revalidate: 60
  };
};

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

export default PostPage;

在上述代码中：

1. getStaticPaths 函数定义了所有可能的动态路由参数。
2. getStaticProps 函数通过 revalidate 参数配置了增量静态再生，每 60 秒重新生成一次页面数据。数据获取逻辑在 getPostData 函数中模拟，实际应用中应替换为真实的数据获取代码。