Apakah itu Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** ialah model rendering Next.js yang menggabungkan **kandungan statik dan dinamik dalam satu halaman** — menyampaikan shell statik dengan serta-merta sambil men-stream bahagian dinamik. Ia mengaburkan garis lama "semua atau tiada langsung" antara SSG dan SSR. ## Masalah yang diselesaikannya Secara tradisinya halaman adalah *sama ada* sepenuhnya statik (pantas, tetapi tidak boleh mempunyai kandungan setiap pengguna) *atau* sepenuhnya dinamik (boleh diperibadikan, tetapi lebih lambat dan tidak boleh dicache). Halaman sebenar adalah bercampur: halaman produk mempunyai susun atur/penerangan statik tetapi kiraan troli dinamik dan cadangan yang diperibadikan. PPR membenarkan **halaman yang sama** menjadi kedua-duanya. ## Bagaimana ia berfungsi ```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 */}

); } ``` Idea utama: segala-galanya **di luar** sempadan `` adalah **dipra-render sebagai shell statik** pada masa build. Apa-apa **di dalam** Suspense (yang membaca data dinamik — cookies, headers, fetch yang tidak dicache) dianggap sebagai "lubang" dinamik yang di-stream masuk pada masa permintaan. ## Urutan penyampaian ```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 ``` Pengguna mendapat first paint yang bermakna dengan serta-merta (shell statik dari CDN), kemudian bahagian yang diperibadikan diisi masuk — gabungan terbaik kedua-duanya: kepantasan statik *dan* kandungan dinamik, tanpa keputusan routing atau mod rendering yang berasingan. ## 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 ia penting PPR menghapuskan pilihan palsu antara "pantas tetapi statik" dan "dinamik tetapi lambat." Dengan pra-render shell dan men-stream hanya lubang dinamik (ditanda oleh Suspense), satu halaman menyampaikan first paint serta-merta dari CDN berserta kandungan yang diperibadikan — secara automatik, tanpa memecahkan halaman atau memilih SSG vs SSR secara manual. Ia mewakili ke arah mana rendering Next.js menuju: komposisi statik/dinamik yang berbutir dan setiap komponen.