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 缓存；动态片段走源站流式更新与短期再验证。