App Router 中的 generateStaticParams 的作用

知识点图片

在 Next.js 的 App Router 中，generateStaticParams 是一个非常关键的函数，主要用于 静态站点生成 (SSG)。

简单来说，它的作用是：在构建（Build）阶段，告诉 Next.js 哪些动态路由页面需要被预先生成为静态 HTML 文件。

如果你熟悉 Pages Router，它相当于以前的 getStaticPaths。

核心作用详解

1. 定义静态路径 (SSG)

当你的路由是动态的（例如 app/blog/[slug]/page.tsx），默认情况下，Next.js 可能会在用户访问时才在服务端渲染（SSR）。
如果你希望这些页面在构建时就生成好（为了极致的性能和 SEO），你需要导出 generateStaticParams 函数，返回一个包含所有可能参数的数组。

2. 代码示例

假设你有一个博客路由：app/blog/[slug]/page.tsx。

tsx

// app/blog/[slug]/page.tsx

// 1. 生成静态参数列表
export async function generateStaticParams() {
  // 模拟从数据库或 API 获取所有文章
  const posts = await fetch('https://api.example.com/posts').then((res) =>
    res.json()
  );

  // 返回一个对象数组，每个对象对应一个路径参数
  // 这里的 key (slug) 必须对应文件夹名称 [slug]
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// 2. 页面组件
export default async function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
  // 获取单篇文章详情
  const post = await fetch(`https://api.example.com/posts/${slug}`).then((res) => res.json());

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

执行流程：

运行 npm run build。
Next.js 执行 generateStaticParams。
获取到列表 [{ slug: 'a' }, { slug: 'b' }]。
Next.js 自动为 /blog/a 和 /blog/b 生成静态 HTML。

关键特性与行为

1. 智能去重 (Request Memoization)

这是 App Router 相比 Pages Router 的一大改进。
在上面的例子中，generateStaticParams 获取了文章列表，而 Page 组件可能也会请求同样的数据。

Pages Router: 你需要通过 getStaticProps 把数据传给组件。
App Router: 你可以在 generateStaticParams 和 Page 组件中发起相同的 fetch 请求。Next.js 会自动对 fetch 请求进行去重（Memoization），不会导致重复的网络请求。

2. 控制未生成的路径 (`dynamicParams`)

如果用户访问了一个不在 generateStaticParams 返回列表中的路径（例如 /blog/c），会发生什么？
这取决于页面导出的 dynamicParams 配置（默认为 true）：

true (默认): 类似于 ISR (增量静态再生)。Next.js 会在服务端实时渲染该页面，生成 HTML 返回给用户，并将其缓存。后续用户访问将直接读取缓存。
false: 类似于 fallback: false。直接返回 404 页面。

tsx

export const dynamicParams = false; // 仅允许访问 generateStaticParams 中定义的路径

3. 静态片段生成

它不仅用于整个页面，也可以用于生成 Layout 的一部分。例如，如果你的 Layout 中也有动态参数，也可以使用此函数。

与 Pages Router (`getStaticPaths`) 的对比

特性	App Router (`generateStaticParams`)	Pages Router (`getStaticPaths`)
位置	与 Page 或 Layout 组件在同一文件导出	仅在 Page 文件导出
数据传递	不需要传递 props，组件内直接获取数据（自动去重）	必须通过 `getStaticProps` 传递数据
返回值	对象数组 `[{id: '1'}, {id: '2'}]`	包含 `paths` 和 `fallback` 的复杂对象
Fallback 控制	通过导出变量 `export const dynamicParams = ...` 控制	通过返回值中的 `fallback` 字段控制

总结

generateStaticParams 就是 App Router 时代的静态路径生成器。 它的主要目的是为了让动态路由在构建时生成静态文件，从而提高网站加载速度和 SEO 表现。

播面