Kas yra Dalinė Išankstinė Vaizdavimo Sistema (PPR)?

Question

Accepted Answer

**Dalinė Išankstinė Vaizdavimo Sistema (PPR)** yra Next.js vaizdavimo modelis, kuris **sujungia statinį ir dinaminį turinį vienoje puslapyje** — pateikdamas momentinę statinę apvalkalą, o dinamines dalis transliuojant. Tai sumažina senosios visos arba nieko principo ribas tarp SSG ir SSR. ## Problema, kurią ji sprendžia Tradiciškai puslapis buvo *arba* visiškai statinis (greitas, bet negali turėti naudotojo konkretaus turinio) *arba* visiškai dinaminis (gali būti personalizuotas, bet lėtesnis ir nekaupinamas). Tikri puslapiai yra mišrūs: produkto puslapis turi statinį maketą ir aprašymą, bet dinaminį krepšelio skaičiavimą ir personalizuotus rekomendacijas. PPR leidžia **tam pačiam puslapiui** būti abiem. ## Kaip tai veikia ```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 */}

); } ``` Pagrindinė idėja: viskas **išorėje** nuo `` ribos yra **išankstiniai statinė apvalkalo paruošti** sukūrimo metu. Viskas **viduje** Suspense (kuri nuskaito dinaminius duomenis — cookies, antraštes, nekaupintus užklausimus) traktuojama kaip dinaminis "skylė", kuri transliuojama užklausos metu. ## Pristatymo seka ```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 ``` Naudotojas iš karto gauna reikšmingą pirmąją spalvą (statinė apvalkala iš CDN), tada personalizuotos dalys užpildomos — geriausias abiejų pasaulių variantas: statinė greitis *ir* dinaminis turinys, be atskiro maršrutizavimo ar vaizdavimo režimo sprendimo. ## Būsena ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Kodėl tai svarbu PPR pašalina melagingą pasirinkimą tarp "greito, bet statinio" ir "dinaminio, bet lėto". Išankstiniai apdorojant apvalkalą ir transliuojant tik dinamines skyles (pažymėtas Suspense), vienas puslapis pateikia CDN momentinę pirmąją spalvą ir personalizuotą turinį — automatiškai, be puslapio skaidymo ar rankinio SSG ir SSR pasirinkimo. Tai atspindi, į kur nukreipta Next.js vaizdavimas: granuliuotas, pagal komponentą atliekama statinė ir dinaminė kompozicija.