Kaj je Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** je Next.js model renderiranja, ki kombinira **statično in dinamično vsebino na eni strani** — podaja hitro statično lupino medtem ko pretaka dinamične dele. Zabrisuje staro pravilo »vse ali nič« med SSG in SSR. ## Problem, ki ga rešuje Tradicionalno je bila stran *bodisi* v celoti statična (hitra, vendar ne more imeti vsebine po uporabnikih) *bodisi* v celoti dinamična (je lahko personalizirana, vendar počasnejša in ne-shranjljiva v cache). Prave strani so mešane: stran izdelka ima statično razporeditev/opis, vendar dinamičen števec v košarici in osebne priporočile. PPR omogoča, da je **ista stran** oboje. ## Kako deluje ```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 */}

); } ``` Glavna ideja: vse **zunaj** meje `` je **prerenderirano kot statična lupina** ob času gradnje. Vse **znotraj** Suspense (ki bere dinamične podatke — piškotke, glave, ne-hranjene fetche) je obravnavano kot dinamična »luknja«, ki se prenese ob času zahteve. ## Zaporedje 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 ``` Uporabnik dobi smiselno prvo barvanje takoj (statična lupina iz CDN), nato se osebni kosi izpolnijo — najboljše oboje: statična hitrost *in* dinamična vsebina, brez ločenega usmerjanja ali odločitve o načinu 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. ``` ## Zakaj je pomembno PPR odstranja lažno izbiro med »hitro, vendar statično« in »dinamično, vendar počasno«. S prerenderianjem lupine in pretakanjem samo dinamičnih lukenj (označenih s Suspense) ena stran podaja CDN-takojšnjo prvo barvanje in personalizirano vsebino — avtomatično, brez delitve strani ali ročne izbire SSG proti SSR. Predstavlja smer, v katero se Next.js renderiranje usmerjava: granularno, sestavo statično/dinamično na raven komponent.