NextJS 14：在layout.tsx用generateStaticParams实现PPR预渲染

问题分析 #

你尝试通过PPR（部分预渲染）静态生成/en和/ka路由，但将动态路由设为/[locale]/layout.tsx、主页放在app/[locale]/(home)/page.tsx后，路由显示为动态（λ标识），未达到预期的部分预渲染（◐标识）。当前在layout中添加了generateStaticParams()和dynamic = 'force-static'但无效。

核心原因 #

1. force-static配置会强制整个路由完全静态，包括Suspense包裹的异步组件也会在构建时预渲染，直接阻断了PPR的触发逻辑。
2. generateStaticParams()在layout中定义时，无法直接控制page路由的静态生成策略，路由的动态性最终由page组件的配置决定。

解决方案 #

1. 调整Page组件配置 #

将generateStaticParams()移至page组件，并修改动态策略配置，保留PPR所需的异步加载逻辑：

// src/app/[locale]/(home)/page.tsx
import { Suspense } from 'react';
import { Skeleton } from '../components/layout/skeletons';
import ServerComponent from './components/banners/';

// 定义静态生成的locale参数
export async function generateStaticParams() {
  const locales = ['en', 'ka'];
  return locales.map((locale) => ({ locale }));
}

// 使用默认的auto动态策略，允许Next.js自动启用PPR
export const dynamic = 'auto';
// 禁止未定义的动态参数，仅允许generateStaticParams生成的路径
export const dynamicParams = false;

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between ">
      <Suspense fallback={<Skeleton/>}>
        <ServerComponent/>
      </Suspense>
    </main>
  );
}

2. 修改Layout组件配置 #

移除force-static配置，改用默认的动态策略，避免阻断子路由的PPR逻辑：

// src/app/[locale]/layout.tsx
import { ReactNode } from 'react';
import './globals.css';

// 移除force-static，允许子路由启用PPR
// export const dynamic = 'force-static';

export default async function RootLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: { locale: string };
}) {
  return (
    <html lang={params.locale}>
      <body>{children}</body>
    </html>
  );
}

// 可保留layout的generateStaticParams，用于预渲染layout的静态部分
export async function generateStaticParams() {
  const locales = ['en', 'ka'];
  return locales.map((locale) => ({ locale }));
}

验证结果 #

重新构建项目后，/en和/ka路由将显示◐标识：页面的基础结构在构建时预渲染，而ServerComponent会在客户端通过Suspense异步加载，符合PPR的部分预渲染逻辑。

内容的提问来源于stack exchange，提问作者Giorgi Gvimradze