Mi az a Partial Prerendering (PPR)?

Question

Accepted Answer

**A Partial Prerendering (PPR)** egy Next.js renderelési modell, amely **statikus és dinamikus tartalmat kombinál egyetlen oldalon** — azonnali statikus héjat kiszolgálva, miközben a dinamikus részeket streameli. Elmosódja az SSG és SSR közötti régi mindent-vagy-semmit vonalat. ## A megoldott probléma Tradicionalisan az oldal *vagy* teljesen statikus volt (gyors, de nem lehet felhasználónkénti tartalom) *vagy* teljesen dinamikus (személyre szabható, de lassabb és nem cacheable). Az igazi oldalak vegyes: egy termékoldal statikus elrendezés/leírás, de dinamikus kosárszámláló és személyre szabott ajánlások. A PPR lehetővé teszi, hogy **ugyanaz az oldal** mindkettő legyen. ## Hogyan működik ```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 */}

); } ``` A kulcsfontosságú ötlet: minden, ami **kívül** van a `` határon, **statikus héjként előre van renderelve** a build időben. Minden, ami **belül** van a Suspense-ben (amely dinamikus adatokat olvas — sütik, fejlécek, gyorsítótár nélküli lekérdezések) dinamikus "lyukként" kezelendő, amely a kérés idejében streamelődik. ## A szállítási sorrend ```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 ``` A felhasználó azonnal értelmes első festést kap (statikus héj a CDN-ről), majd a személyre szabott darabok kitöltődnek — mindkettő legjobb: statikus sebesség *és* dinamikus tartalom, külön útválasztás vagy renderelési mód nélkül. ## Állapot ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Miért fontos A PPR eltávolítja a "gyors, de statikus" és "dinamikus, de lassú" közötti hamis választást. A héj előrendezésével és csak a dinamikus lyukak (Suspense-sel jelölt) streamelésével egyetlen oldal CDN-azonnali első festést és személyre szabott tartalmat biztosít — automatikusan, anélkül, hogy felosztaná az oldalt vagy kézzel választana SSG és SSR között. Ez azt reprezentálja, hogy a Next.js renderelés hova tart: szemcsésen, komponensenkénti statikus/dinamikus összetétel.