Co je Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** je renderovací model Next.js, který kombinuje **statický a dynamický obsah na jedné stránce** — poskytuje okamžitou statickou kostru a streamuje dynamické části. Rozmazává starou úplně-nebo-nic hranici mezi SSG a SSR. ## Problém, který řeší Tradičně byla stránka *buď* zcela statická (rychlá, ale nemůže mít obsah specifický pro uživatele) *nebo* zcela dynamická (lze ji personalizovat, ale je pomalejší a nelze ji cachovat). Skutečné stránky jsou smíšené: stránka produktu má statický rozložení/popis, ale dynamický počet položek v košíku a personalizovaná doporučení. PPR umožňuje, aby **stejná stránka** byla obojím. ## Jak to funguje ```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 */}

); } ``` Základní myšlenka: všechno **mimo** hranici `` je **pre-renderováno jako statická kostra** v čase buildování. Cokoli **uvnitř** Suspense (které čte dynamická data — cookies, headers, nekešované fetche) je považováno za dynamickou "díru", která se streamuje v čase požadavku. ## Sekvence doručení ```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 ``` Uživatel získá smysluplné první vykreslení okamžitě (statická kostra z CDN), poté se personalizované části doplní — nejlepší z obojího: statická rychlost *a* dynamický obsah, bez samostatného routingu nebo rozhodování o režimu renderování. ## Stav ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Proč je to důležité PPR eliminuje falešnou volbu mezi "rychlým, ale statickým" a "dynamickým, ale pomalým". Předrendeningem kostry a streamováním pouze dynamických děr (označených Suspense) jedna stránka zajistí okamžité CDN první vykreslení plus personalizovaný obsah — automaticky, bez dělení stránky nebo ručního výběru SSG vs SSR. Reprezentuje směr, kterým se renderování Next.js ubírá: granulární, komponentu-specifická skládání statického/dynamického obsahu.