Ce este Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** este un model de randare Next.js care combină **conținut static și dinamic pe o singură pagină** — servind o înveliș static instant în timp ce transmite în flux părțile dinamice. Estompează vechea linie totul-sau-nimic dintre SSG și SSR. ## Problema pe care o rezolvă Tradiție o pagină era *fie* în întregime statică (rapidă, dar fără conținut per-utilizator) *fie* în întregime dinamică (poate fi personalizată, dar mai lentă și fără cache). Paginile reale sunt mixte: o pagină de produs are un aspect/descriere statică, dar un număr de coș dinamic și recomandări personalizate. PPR permite ca **aceeași pagină** să fie ambele. ## Cum funcționează ```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 */}

); } ``` Ideea cheie: totul **în afara** unei limite `` este **pre-randat ca înveliș static** la momentul compilării. Orice **în interiorul** Suspense (care citește date dinamice — cookies, headers, preluări fără cache) este tratat ca un "gol" dinamic care transmite în flux la momentul cererii. ## Secvența de livrare ```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 ``` Utilizatorul obține o primă redare semnificativă imediat (înveliș static de la CDN), apoi piesele personalizate se completează — cel mai bun din ambele: viteza statică *și* conținut dinamic, fără rutare separată sau decizie privind modul de randare. ## Statut ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## De ce este important PPR elimină alegerea falsă dintre "rapid dar static" și "dinamic dar lent." Prin pre-randarea învelișului și transmisie în flux doar a găurilor dinamice (marcate de Suspense), o singură pagină livrează redare instantă CDN plus conținut personalizat — automat, fără a împărți pagina sau a alege manual SSG versus SSR. Reprezintă locul spre care se îndreaptă randarea Next.js: compoziție granulară, per-component, static/dinamic.