Digital Transformation
Partial Prerendering (PPR Next.js)
TL;DR: Partial Prerendering (PPR) di Next.js mengirim cangkang halaman statis langsung dari edge cache, lalu menyusulkan bagian dinamis lewat streaming dalam respons HTML yang sama. Hasilnya TTFB sekecil halaman statis dengan fleksibilitas data per-user, tanpa perlu memilih antara
force-staticatauforce-dynamic.
Apa itu Partial Prerendering?
Partial Prerendering adalah model render Next.js (App Router) yang memecah satu halaman menjadi dua lapisan: cangkang statis yang sudah dirender di build time, dan slot dinamis yang di-resolve saat request masuk. Cangkang dikirim langsung dari edge sehingga byte pertama tiba seperti halaman fully static. Slot dinamis menyusul lewat streaming, dibungkus Suspense dengan fallback.
PPR cocok untuk halaman yang punya bagian statis dominan (navbar, hero, footer, list konten) tapi butuh satu atau dua slot personal (greeting user, badge stok, harga regional). Sebelum PPR, Anda harus memilih: force-static (cepat tapi kaku) atau force-dynamic (fleksibel tapi TTFB membengkak). Lihat juga use cache directive untuk caching granular per komponen.
Cara Kerja PPR di Next.js
| Tahap | Apa yang Terjadi |
|---|---|
| Build | Next.js render cangkang statis ke HTML, sisakan placeholder untuk Suspense boundary |
| Request | Edge kirim cangkang dari cache (latensi seperti static page) |
| Streaming | Server resolve slot dinamis, kirim lewat HTTP streaming, browser hidrat saat tiba |
| Idle | Browser tampil interaktif penuh, slot dinamis sudah tergantikan |
Aktifkan via next.config.ts:
const nextConfig = {
experimental: { ppr: 'incremental' }
}
Lalu tandai segmen halaman:
export const experimental_ppr = true
Kenapa Penting?
Dari beberapa proyek Vito Atmo, halaman katalog yang dimigrasi dari force-dynamic ke PPR memangkas TTFB dari rentang 600-900 ms menjadi 80-140 ms tanpa kehilangan personalisasi harga regional. Pengalaman ini cocok untuk e-commerce, dashboard SaaS, dan halaman landing yang punya 1-2 widget personal.
Pertanyaan Umum
Apakah PPR sudah stabil di Next.js 15?
PPR masih di bawah flag experimental per Mei 2026. Aman untuk staging dan halaman non-kritis, awasi changelog rilis berikutnya.
Apakah PPR cocok untuk semua halaman?
Tidak. Halaman yang seluruhnya statis lebih baik tetap statis penuh. Halaman dengan banyak slot dinamis lebih cocok use cache granular.
Istilah Terkait