Was ist Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** ist ein Next.js-Renderingmodell, das **statische und dynamische Inhalte auf einer einzelnen Seite kombiniert** — es liefert eine sofortige statische Shell und streamt die dynamischen Teile. Es verwischt die alte Alles-oder-Nichts-Grenze zwischen SSG und SSR. ## Das Problem, das es löst Traditionell war eine Seite *entweder* vollständig statisch (schnell, kann aber keinen benutzerspezifischen Inhalt haben) *oder* vollständig dynamisch (kann personalisiert werden, ist aber langsamer und nicht cachebar). Echte Seiten sind gemischt: Eine Produktseite hat ein statisches Layout/Beschreibung, aber eine dynamische Warenkorbanzahl und personalisierte Empfehlungen. PPR ermöglicht, dass **dieselbe Seite** beides ist. ## Wie es funktioniert ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` Die Kernidee: alles **außerhalb** einer ``-Grenze wird **als statische Shell zur Buildzeit vorgefertigt**. Alles **innerhalb** von Suspense (das dynamische Daten liest — Cookies, Header, nicht gecachte Abrufe) wird als ein dynamisches "Loch" behandelt, das zur Anfragezeitgestreamt wird. ## Die Liefersequenz ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` Der Benutzer erhält sofort einen sinnvollen ersten Paint (statische Shell vom CDN), dann werden die personalisierten Teile gefüllt — das Beste aus beiden: statische Geschwindigkeit *und* dynamischer Inhalt, ohne separates Routing oder Rendering-Mode-Entscheidung. ## Status ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Warum es wichtig ist PPR hebt die falsche Wahl zwischen "schnell aber statisch" und "dynamisch aber langsam" auf. Durch Vorfertigung der Shell und Streaming nur der dynamischen Löcher (gekennzeichnet durch Suspense) liefert eine einzelne Seite sofortiges CDN-First-Paint plus personalisierten Inhalt — automatisch, ohne die Seite zu teilen oder SSG vs. SSR manuell zu wählen. Es repräsentiert, wohin sich das Next.js-Rendering entwickelt: granulare, komponentenspezifische statisch/dynamische Zusammensetzung.