Wat is Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** is een Next.js rendering model dat **statische en dynamische inhoud op een enkele pagina** combineert — een instant statische shell serveren terwijl de dynamische delen streamen. Het doet de oude alles-of-niets grens tussen SSG en SSR vervagen. ## Waarom het belangrijk is Traditie was dat een pagina *ofwel* volledig statisch (snel, maar kan geen per-user inhoud hebben) *ofwel* volledig dynamisch (kan gepersonaliseerd zijn, maar is traag en niet cachebar) was. Echte pagina's zijn gemengd: een productpagina heeft een statische layout/beschrijving maar een dynamische winkelwagentelleraantal en gepersonaliseerde aanbevelingen. PPR laat **dezelfde pagina** beide zijn. ## Hoe het werkt ```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 */}

); } ``` Het kernidee: alles **buiten** een `` grens is **prerendered als een statische shell** tijdens het bouwen. Alles **binnen** Suspense (wat dynamische gegevens leest — cookies, headers, uncached fetches) wordt behandeld als een dynamisch "gat" dat tijdens het verzoek binnenstroomt. ## De leveringsvolgorde ```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 ``` De gebruiker krijgt onmiddellijk een betekenisvolle eerste weergave (statische shell van CDN), dan worden de gepersonaliseerde onderdelen ingevuld — het beste van beide: statische snelheid *en* dynamische inhoud, zonder afzonderlijke routing of rendering-mode beslissing. ## 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. ``` ## Waarom het belangrijk is PPR verwijdert de valse keuze tussen "snel maar statisch" en "dynamisch maar traag." Door de shell voor te renderen en alleen de dynamische gaten (gemarkeerd door Suspense) te streamen, levert een enkele pagina CDN-instant eerste weergave plus gepersonaliseerde inhoud — automatisch, zonder de pagina op te splitsen of handmatig SSG versus SSR te kiezen. Het vertegenwoordigt waar Next.js rendering naartoe gaat: granulaire, per-component statische/dynamische compositie.