Partial Prerendering（PPR，部分预渲染） 是 Next.js 的一种渲染模型，它把 静态和动态内容组合在同一个页面中 —— 既能即时提供静态外壳（shell），又能流式传输动态部分。它打破了 SSG 与 SSR 之间过去那种非此即彼的界限。
传统上，一个页面 要么 完全静态（快，但无法承载按用户定制的内容），要么 完全动态（可以个性化，但更慢且无法缓存）。真实页面往往是混合的：一个商品页有静态的布局/描述，但有动态的购物车数量和个性化推荐。PPR 让 同一个页面 同时具备两者。
import { Suspense } from "react";
export default function ProductPage() {
return (
<main>
<Header /> {/* STATIC — prerendered, served instantly from CDN */}
<ProductInfo /> {/* STATIC — same for everyone */}
<Suspense fallback={<CartSkeleton />}>
<CartCount /> {/* DYNAMIC — streamed in per request */}
</Suspense>
<Suspense fallback={<RecsSkeleton />}>
<Recommendations /> {/* DYNAMIC — personalized, streamed */}
</Suspense>
</main>
);
}
关键思想是：处于 <Suspense> 边界 之外 的一切都在构建时 作为静态外壳被预渲染。处于 Suspense 之内 的任何内容（它会读取动态数据 —— cookies、headers、未缓存的 fetch）都被视为一个动态“空洞”，在请求时流式填入。
1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN
2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons
用户立即获得有意义的首屏绘制（来自 CDN 的静态外壳），随后个性化的部分逐步填入 —— 两全其美：既有静态的速度 又有 动态的内容，且无需单独的路由或渲染模式决策。
PPR has been an experimental/incremental feature; enable per-config/route.
Check your Next.js version — the API and stability have been evolving.
PPR 消除了“快但静态”与“动态但慢”之间的虚假选择。通过预渲染外壳、只流式传输动态空洞（由 Suspense 标记），一个页面就能交付 CDN 级即时首屏绘制加上个性化内容 —— 自动完成，无需拆分页面，也无需手动在 SSG 与 SSR 之间做选择。
它代表了 Next.js 渲染的发展方向：细粒度的、逐组件的静态/动态组合。