Next.js 15 generateStaticParams 动态路由预渲染与再验证治理实践

核心价值对部分动态路由进行预渲染以提升首屏与 SEO，同时保持再验证更新。段级 dynamic 与 `revalidate` 协同，使数据更新行为可预期。generateStaticParams 示例// app/posts/[id]/page.tsx export const revalidate = 600 export async function generateStaticParams() { const ids = await fetch('https://api.example.com/posts/ids', { next: { revalidate: 600 } }).then(r => r.json()) return ids.slice(0, 50).map((id: string) => ({ id })) } export default async function Page({ params }: { params: { id: string } }) { const post = await fetch(`https://api.example.com/posts/${params.id}`, { next: { revalidate: 600, tags: ['posts'] }, }).then(r => r.json()) return <article><h1>{post.title}</h1><p>{post.body}</p></article> } 边界治理对未在 `generateStaticParams` 覆盖的路径，段可设置 `dynamic = 'force-dynamic'` 或在获取时使用 `cache: 'no-store'` 保持实时。export const dynamic = 'force-static' 按需再验证使用标签对列表与详情进行协同刷新：// app/api/revalidate/route.ts export const runtime = 'edge' export async function POST() { // revalidateTag('posts') return Response.json({ ok: true }) } 结论`generateStaticParams` 是动态路由静态化与 ISR 的关键。与段级配置及标签再验证协同，可在性能与新鲜度间建立稳定平衡。