Next.js Partial Prerendering 与 Streaming 渲染实践

Next.js Partial Prerendering 与 Streaming 渲染实践概述Partial Prerendering（PPR）通过静态外壳 + 动态片段流式填充提升首屏与交互体验。结合 `Suspense` 与路由级 `dynamic/revalidate`，可在保证一致性的同时获得更好的 TTFB 与 INP 指标。关键参数/概念- `export const dynamic`: 路由/页面级渲染策略（`'force-static''force-dynamic'`）。`export const revalidate`: 静态片段的再验证周期（秒）。`Suspense`: 将动态数据片段以流式方式在外壳渲染后逐步填充。`fetch` 缓存：`cache/no-store` 与 `next.revalidate/tags` 控制片段级一致性与刷新。实践/示例// app/page.tsx（静态外壳 + 动态片段） export const dynamic = "force-static"; export const revalidate = 60; import { Suspense } from "react"; import PopularList from "./popular-list"; export default async function Home() { return ( <main> <h1>首页（静态外壳）</h1> <Suspense fallback={<p>热点数据加载中...</p>}> {/* 动态片段：以流式填充 */} <PopularList /> </Suspense> </main> ); } // app/popular-list.tsx（Server Component 动态片段） async function getPopular() { const res = await fetch("https://api.example.com/popular", { cache: "no-store", // 动态片段强一致 }); return res.json(); } export default async function PopularList() { const items = await getPopular(); return ( <ul> {items.map((it: any) => ( <li key={it.id}>{it.title}</li> ))} </ul> ); } 验证方法TTFB/首屏：在 DevTools Performance 与 Lighthouse 下对比 `force-static + Suspense` 与全动态的时序差异。一致性：将动态片段改为 `cache: 'force-cache' + next.revalidate`，验证刷新周期与用户感知差异。边界测试：在片段内抛错/超时，验证 `Suspense fallback` 与错误边界呈现。注意事项保持静/动态边界清晰：静态外壳不得引用请求时态数据；动态片段需保证错误隔离。CDN/缓存协作：静态外壳可走 CDN 缓存；动态片段走源站流式更新与短期再验证。