面试题：Next.js 中 getStaticPaths 的缓存策略与更新机制

Question

在 Next.js 应用中，getStaticPaths 获取的路径数据缓存是如何管理的？如果数据发生变化，如何触发 getStaticPaths 重新生成路径？请详细说明可能涉及的配置和实现方式。

Answer 1

getStaticPaths 路径数据缓存管理

1. 缓存机制：在 Next.js 中，getStaticPaths 获取的路径数据会被缓存。这个缓存主要用于构建时生成静态页面路径。在构建阶段，Next.js 会调用 getStaticPaths 方法来获取所有需要预渲染的页面路径。这些路径会被存储起来，用于生成静态 HTML 文件。
2. 缓存位置：缓存的数据存储在构建产物中，一般位于 .next 目录下。当应用部署后，这些缓存的路径数据用于确定哪些页面需要在构建时静态生成。

数据变化时触发 getStaticPaths 重新生成路径

1. 增量静态再生（Incremental Static Regeneration）：
   • 配置：在 getStaticProps 函数中，通过设置 revalidate 选项来启用增量静态再生。例如：

export async function getStaticProps({ params }) {
    const data = await fetchData(params.id);
    return {
        props: {
            data
        },
        revalidate: 60 // 每 60 秒重新验证一次
    };
}

- **实现方式**：启用 `revalidate` 后，当用户请求页面时，如果距离上次生成页面的时间超过了 `revalidate` 设置的时间（单位为秒），Next.js 会在后台重新调用 `getStaticProps` 来获取最新数据并更新页面。虽然 `revalidate` 主要针对 `getStaticProps`，但当 `getStaticProps` 重新获取数据时，如果 `getStaticPaths` 依赖的数据也发生了变化，在下次构建（如果是自动构建）或手动触发构建时，`getStaticPaths` 也会重新生成路径。

2. 手动触发重新构建： - 配置：在 CI/CD 环境中，可以通过配置重新触发构建流程。例如，在 GitHub Actions 中，可以设置当特定文件（如数据文件或配置文件）发生变化时，触发新的构建。 - 实现方式：假设你的数据存储在 data.json 文件中，在 .github/workflows/build.yml 中可以设置如下：

on:
  push:
    paths:
      - 'data.json'
jobs:
  build:
    runs-on: ubuntu - latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        # 部署步骤，根据具体部署服务进行配置

这样，当 data.json 文件发生变化并推送到仓库时，会触发新的构建，从而使 getStaticPaths 重新生成路径。 3. API 驱动的重新生成： - 配置：可以创建一个 API 端点，通过调用这个端点来触发重新构建。例如，使用 Vercel 的 API 路由，可以创建一个 /api/rebuild.js 文件。 - 实现方式：

import { withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function handler(req, res) {
    if (req.method === 'POST') {
        // 这里可以添加权限验证逻辑
        // 触发重新构建逻辑，例如调用 Vercel API 触发重新构建
        const response = await fetch('https://api.vercel.com/v9/projects/{project - id}/deployments', {
            method: 'POST',
            headers: {
                'Content - Type': 'application/json',
                Authorization: `Bearer ${process.env.VERCEL_TOKEN}`
            }
        });
        if (response.ok) {
            res.status(200).json({ message: 'Rebuild triggered successfully' });
        } else {
            res.status(500).json({ message: 'Failed to trigger rebuild' });
        }
    } else {
        res.status(405).json({ message: 'Method Not Allowed' });
    }
});

通过向这个 API 端点发送 POST 请求（并且经过权限验证），可以触发项目的重新构建，进而使 getStaticPaths 重新生成路径。