PPR (Partial Pre-Rendering) ist eine Rendering-Strategie von Next.js, die statische, vorgerenderte HTML-Hüllen mit dynamischen, gestreamten Inseln kombiniert und so ein schnelles erstes Rendering sowie Benutzerfrische bietet.
Eingeführt in Next.js als experimental.ppr = "incremental" in Next.js 14 und schrittweise stabilisiert durch Next.js 15 und 16, funktioniert PPR, indem es die Teile einer Seite vorgerendert, die statisch sind (Titel, kanonisch, hreflang, JSON-LD, Hero) und dynamische Grenzen (Warenkorb-Badge, zuletzt angesehen, personalisierte Empfehlungen) identifiziert, die in <Suspense> eingekapselt sind. Die statische Hülle wird sofort aus dem Edge-Cache gestreamt; die dynamischen Inseln werden danach gestreamt, oft innerhalb von wenigen Millisekunden.
Für E-Commerce ist PPR besonders wertvoll, da SEO-kritische Inhalte (Titel, kanonisch, strukturierte Daten) in der statischen Hülle enthalten sind und vor jedem Datenbankaufruf ankommen. Die dynamischen Inseln bieten die benutzerspezifische Erfahrung, ohne die SEO-Oberfläche zu blockieren.
PPR passt natürlich zu Cache Components (cacheComponents: true) — Komponenten entscheiden sich für das Caching auf Komponentenebene, und PPR fügt die statischen und dynamischen Teile zu einem kohärenten Stream zusammen.