面试题：Next.js 中 getStaticPaths 在复杂场景下的优化策略与实践

Question

假设你的 Next.js 项目有大量动态路由且数据频繁更新，同时需要考虑 SEO 优化。请详细描述如何运用 getStaticPaths 结合其他 Next.js 特性（如 Incremental Static Regeneration）进行高效的前端开发，包括具体的代码示例和部署时可能遇到的问题及解决方案。

Answer 1

1. 使用 getStaticPaths 和 Incremental Static Regeneration 进行高效前端开发

1.1 getStaticPaths

getStaticPaths 用于生成动态路由的路径。在 Next.js 中，当页面使用动态路由（例如 pages/post/[id].js），且需要在构建时生成这些路径，可以通过 getStaticPaths 来实现。

// pages/post/[id].js
import React from 'react';
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  // 假设这里从 API 获取所有文章的 ID
  const res = await fetch('https://example.com/api/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // 每 60 秒重新生成一次
  };
}

const Post = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

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

export default Post;

在上述代码中：

• getStaticPaths 函数通过 API 获取所有文章的 ID，并生成对应的路径数组。fallback: false 表示只有在 paths 数组中的路径会在构建时生成静态页面，其他路径会返回 404。
• getStaticProps 函数根据传入的 id 参数从 API 获取具体文章的数据。revalidate 字段开启了 Incremental Static Regeneration，每 60 秒重新生成一次页面数据。

1.2 Incremental Static Regeneration

Incremental Static Regeneration 允许在页面已经生成静态 HTML 之后，在后台重新生成页面。这对于数据频繁更新的场景非常有用。

通过在 getStaticProps 中设置 revalidate 字段来启用 Incremental Static Regeneration。例如：

export async function getStaticProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // 每 60 秒重新生成一次
  };
}

当有用户访问页面时，如果距离上次生成时间超过了 revalidate 设置的时间（这里是 60 秒），Next.js 会在后台重新运行 getStaticProps 来获取最新数据并更新页面。同时，用户仍然会看到旧版本的页面，直到新数据获取并更新完成。

2. 部署时可能遇到的问题及解决方案

2.1 API 速率限制

• 问题：在 getStaticPaths 和 getStaticProps 中频繁调用 API 可能触发速率限制。
• 解决方案：
  • 缓存 API 响应。可以使用本地缓存（如 node-cache）或者服务器端缓存（如 Redis）。
  • 优化 API 调用逻辑，尽量减少不必要的请求。例如，在 getStaticPaths 中可以批量获取数据，而不是多次单个请求。

2.2 首次加载延迟

• 问题：如果数据量非常大，getStaticPaths 和 getStaticProps 的执行时间可能较长，导致构建时间或首次加载时间延迟。
• 解决方案：
  • 采用增量构建策略，只重新构建变化的部分。Next.js 本身在一定程度上支持这种策略，但对于非常大的项目可能需要额外的配置和优化。
  • 优化数据获取逻辑，确保 API 响应速度快。可以对数据库进行索引优化，或者使用 CDN 加速数据传输。

2.3 缓存一致性

• 问题：Incremental Static Regeneration 可能导致缓存不一致的问题，特别是在数据更新非常频繁的情况下。
• 解决方案：
  • 合理设置 revalidate 时间，平衡数据的新鲜度和缓存的有效性。
  • 可以考虑在数据更新时主动触发缓存刷新机制，例如通过 Webhook 通知 Next.js 重新生成相关页面。在某些云平台（如 Vercel）上，支持通过 API 触发重新验证。