Next.js13中getStaticParams导致Server Component重复渲染问题咨询

复现步骤 #

• 将以下代码添加至app/test/[id]/page.tsx文件中：

export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }]
}

async function Component({ params }) {
  const { id } = params

  console.log("id: ", id)

  return (
    <div>
      <h1>Component</h1>
    </div>
  );
}

export default Component

• 执行yarn build生成构建产物
• 执行yarn start启动生产服务
• 访问路由test/1（参数可替换为任意已预生成的值）

此时控制台会打印两次id: 1，即Server Component被渲染了两次。

问题分析与解决 #

这是Next.js 13 App Router下的预期行为，原因是：
当你使用generateStaticParams静态生成页面后，生产环境中第一次访问该路由时，Next.js会先执行一次组件代码以校验是否需要触发增量静态再生（ISR），随后才会返回预先构建好的静态页面内容，这两次执行就会导致日志打印两次。

如果想要避免日志重复，可以通过判断执行上下文来过滤日志，比如利用Next.js提供的headers()函数检查请求是否为ISR的校验请求：

import { headers } from 'next/headers'

async function Component({ params }) {
  const { id } = params
  const headersList = headers()
  // 过滤ISR校验请求的日志
  if (!headersList.get('next-isr-revalidate')) {
    console.log("id: ", id)
  }

  return (
    <div>
      <h1>Component</h1>
    </div>
  );
}

需要注意的是，这种重复执行仅会出现在生产环境首次访问静态生成页面的场景，后续访问会直接命中缓存，不会再触发重复渲染。

内容的提问来源于stack exchange，提问作者Polo D. Vargas