Apa iku Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** minangka modél rendering Next.js sing nggabungake **konten statik lan dinamik ing sawijining halaman** — nyariyoake shell statik instant nalika streaming bagéan dinamike. Iki ngaburake garis lama all-or-nothing antara SSG lan SSR. ## Masalah sing ditangani Sakdidisit, sawijining halaman kuwi *salah siji* sepenuhé statik (cepet, nanging ora bisa duwe konten per-user) *utawa* sepenuhé dinamik (bisa dipribadisasi, nanging luwih alon lan ora bisa dicache). Halaman nyata iku campuran: halaman produk duwe tata letak/deskripsi statik nanging cacah cart dinamik lan rekomendasi sing dipribadisasi. PPR ndawehi **halaman sing sama** isa dadi loro-lorone. ## Cara kerjane ```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 */}

); } ``` Ide utama: kabéh **ing njaba** batas `` iku **prerendered minangka shell statik** ing wektu build. Apa-apa **ing dalam** Suspense (sing maca data dinamik — cookies, headers, fetch sing ora dicache) dianggep minangka "bolongan" dinamik sing streaming ing wektu request. ## Urutan panyariyoan ```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 ``` Penggunaakne ngliloni first paint sing bermakna sadhegé (shell statik saka CDN), banjur bagéan sing dipribadisasi isine — sing paling apik: kacepetan statik *lan* konten dinamik, tanpa routing utawa keputusan rendering-mode sing kapisah. ## 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. ``` ## Mengapa iki penting PPR mbusak pilihan palsu antara "cepet nanging statik" lan "dinamik nanging alon." Kanthi prerendering shell lan streaming mung bolongan dinamik (ditandhai dening Suspense), sawijining halaman nyariyoake instant first paint CDN plus konten yang dipribadisasi — sacara otomatis, tanpa mbagi halaman utawa milih SSG vs SSR kanthi manual. Iki nuduhake nang-go rendering Next.js: komposisi granular, per-component statik/dinamik.