Next.js 15 Partial Prerendering PPR 深入实践 Suspense-Streaming-force-static

概览PPR 通过在 React Server Components 中使用 Suspense 包裹动态数据，使页面的静态部分可提前生成并缓存，动态部分在到达后以流式方式填充。该策略提升首屏与交互稳定性，适合列表壳体 + 动态详情等场景。页面结构与策略app/products/[id]/page.tsxexport const dynamic = 'force-static' import { Suspense } from 'react' export default async function ProductPage({ params }: { params: { id: string } }) { return ( <div> <Shell id={params.id} /> <Suspense fallback={<ReviewsSkeleton />}> {/* 动态插槽：在数据就绪时填充 */} {/* @ts-expect-error RSC */} <Reviews id={params.id} /> </Suspense> </div> ) } 动态组件（RSC）// app/products/[id]/Reviews.tsx export default async function Reviews({ id }: { id: string }) { const data = await fetch(`https://api.example.com/reviews/${id}`, { next: { revalidate: 300, tags: ['reviews'] }, }).then((r) => r.json()) return ( <ul> {data.items.map((it: any) => ( <li key={it.id}>{it.content}</li> ))} </ul> ) } Streaming 与缓存// app/products/[id]/Shell.tsx export default function Shell({ id }: { id: string }) { return ( <section> <h1>产品 {id}</h1> <p>静态外壳内容可被长时间缓存</p> </section> ) } // 骨架 export function ReviewsSkeleton() { return <p>评论加载中…</p> } 治理要点使用 `dynamic = 'force-static'` 将页面外壳静态化；对必须动态的 Route 使用 `dynamic = 'force-dynamic'`。将动态区块包裹在 Suspense，以流式填充减少首屏等待。结合缓存标签（`tags`）进行局部失效，避免全页重渲染。对错误场景提供 `error.tsx` 与边界，以避免流式失败影响整体体验。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+Next.js：15.0+；Node.js：20.x；RSC 与 Streaming：稳定首屏可感知时间显著降低；动态评论在 1–3s 内填充