Apa itu Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** adalah model rendering Next.js yang menggabungkan **konten statis dan dinamis dalam satu halaman** — melayani shell statis instan sambil melakukan streaming bagian dinamis. Ini mengaburkan garis all-or-nothing lama antara SSG dan SSR. ## Masalah yang diselesaikan Secara tradisional, halaman adalah *baik* sepenuhnya statis (cepat, tetapi tidak dapat memiliki konten per-pengguna) *atau* sepenuhnya dinamis (dapat dipersonalisasi, tetapi lebih lambat dan tidak dapat dicache). Halaman nyata bercampur: halaman produk memiliki layout/deskripsi statis tetapi jumlah keranjang dinamis dan rekomendasi yang dipersonalisasi. PPR memungkinkan **halaman yang sama** untuk keduanya. ## Cara kerjanya ```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 kunci: semua yang **di luar** batas `` adalah **prerendered sebagai shell statis** pada waktu build. Apa pun yang **di dalam** Suspense (yang membaca data dinamis — cookie, header, fetch tanpa cache) diperlakukan sebagai "lubang" dinamis yang melakukan streaming pada waktu permintaan. ## Urutan pengiriman ```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 mendapatkan first paint yang bermakna secara instan (shell statis dari CDN), kemudian bagian yang dipersonalisasi diisi — yang terbaik dari keduanya: kecepatan statis *dan* konten dinamis, tanpa keputusan routing atau rendering-mode terpisah. ## 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 ini penting PPR menghilangkan pilihan palsu antara "cepat tetapi statis" dan "dinamis tetapi lambat." Dengan prerendering shell dan melakukan streaming hanya lubang dinamis (ditandai oleh Suspense), satu halaman memberikan first paint instan CDN ditambah konten yang dipersonalisasi — secara otomatis, tanpa memisahkan halaman atau memilih SSG vs SSR secara manual. Ini mewakili arah rendering Next.js: komposisi statis/dinamis granular, per-komponen.