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 的关键。与段级配置及标签再验证协同，可在性能与新鲜度间建立稳定平衡。