面试题：Next.js 中 getStaticPaths 高级缓存策略及性能优化

Question

在大型 Next.js 应用中，使用 getStaticPaths 生成大量静态页面。随着业务发展，页面更新频率不一致，且需要考虑缓存对性能的影响。请设计一套高级缓存策略，详细说明如何利用 Next.js 提供的特性（如缓存控制头、重新验证时间等），同时兼顾不同页面的更新需求，以达到最佳性能优化效果，并写出主要思路及关键代码示例。

Answer 1

主要思路

1. 利用缓存控制头：通过设置 Cache-Control 头，控制浏览器和中间层缓存的行为。对于更新频率低的页面，可以设置较长的缓存时间；对于更新频率高的页面，设置较短的缓存时间或不缓存。
2. 重新验证时间（Revalidate Time）：利用 Next.js 的 revalidate 参数，在 getStaticProps 中设置页面重新验证的时间间隔。这样，在指定时间后，页面会在用户请求时重新生成，确保数据的新鲜度。
3. 动态路由与缓存策略：在 getStaticPaths 中，根据页面的更新频率，为不同的动态路由设置不同的缓存策略。

关键代码示例

1. 设置缓存控制头

在 next.config.js 中，可以使用 headers 配置来设置缓存控制头：

module.exports = {
  async headers() {
    return [
      {
        source: '/low - update - frequency - pages/:path*',
        headers: [
          {
            key: 'Cache - Control',
            value: 'public, max - age=31536000, stale - while - revalidate=86400'
          }
        ]
      },
      {
        source: '/high - update - frequency - pages/:path*',
        headers: [
          {
            key: 'Cache - Control',
            value: 'public, max - age=60, stale - while - revalidate=60'
          }
        ]
      }
    ];
  }
};

2. 使用重新验证时间

在页面组件的 getStaticProps 中设置 revalidate：

export async function getStaticProps({ params }) {
  const data = await fetchData(params.id);
  return {
    props: {
      data
    },
    revalidate: data.updateFrequency === 'high'? 60 : 3600
  };
}

3. 根据页面更新频率设置动态路由缓存策略

在 getStaticPaths 中，可以根据数据的更新频率来决定是否预渲染页面：

export async function getStaticPaths() {
  const allPages = await getAllPages();
  const paths = allPages.map(page => ({
    params: { id: page.id.toString() },
    options: {
      // 根据页面更新频率设置缓存策略
      revalidate: page.updateFrequency === 'high'? 60 : 3600
    }
  }));
  return { paths, fallback: false };
}