Što je Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** je Next.js model renderiranja koji kombinira **statički i dinamički sadržaj na jednoj stranici** — služeći trenutnu statičku ljusku dok prenosi dinamičke dijelove. Zamagljuje stari sve-ili-ništa redak između SSG-a i SSR-a. ## Problem koji rješava Tradiciono je stranica bila *ili* potpuno statična (brza, ali ne može imati sadržaj po korisniku) *ili* potpuno dinamična (može biti personalizirana, ali sporija i ne-cacheable). Prave stranice su mješovite: stranica proizvoda ima statički raspored/opis, ali dinamički broj stavki u košarici i personalizirane preporuke. PPR omogućava **istoj stranici** biti oboje. ## Kako funkcionira ```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 */}

); } ``` Kljućna ideja: sve što je **izvan** granice `` je **prerenderano kao statička ljuska** tijekom vremena izrade. Sve što je **unutar** Suspense-a (što čita dinamičke podatke — kolačiće, zaglavlje, ne-cacheirane dohvate) tretira se kao dinamička "rupa" koja se prenosi u vrijeme zahtjeva. ## Slijed dostave ```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 ``` Korisnik dobija smislenu prvu boju odmah (statička ljuska s CDN-a), zatim se personalizirani dijelovi popunjavaju — najbolje od oboje: statička brzina *i* dinamički sadržaj, bez odvojene rute ili odluke o režimu renderiranja. ## 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. ``` ## Zašto je to važno PPR uklanja lažan izbor između "brz ali statičan" i "dinamičan ali spor." Prerendiranjem ljuske i prenosom samo dinamičkih rupa (označenih sa Suspense), jedna stranica pruža CDN-instan prvi prikaz plus personalizirani sadržaj — automatski, bez dijeljenja stranice ili ručnog odabira SSG naspram SSR-a. To predstavlja smjer prema kojem ide Next.js renderiranje: granularni, po-komponentni statički/dinamički sastav.