Digital Transformation
Partial Prerendering (PPR)
Partial Prerendering adalah teknik render Next.js yang menggabungkan halaman statis cepat dengan komponen dinamis yang di-stream, sehingga halaman tampil instan tanpa kehilangan data real-time.
TL;DR: Partial Prerendering (PPR) adalah model render hybrid yang dikenalkan Next.js, mengirim shell statis halaman lebih dulu, lalu meng-stream bagian dinamis seperti harga, stok, atau data user. Hasilnya, Largest Contentful Paint (LCP) tetap di bawah 2,5 detik meski halaman butuh data live. Per Mei 2026, fitur ini sudah stabil di Next.js 15+ untuk runtime Node maupun Edge.
Apa itu Partial Prerendering?
Partial Prerendering memecah satu halaman menjadi dua lapisan render. Lapisan statis (shell, layout, hero) di-prerender saat build dan disajikan dari CDN. Lapisan dinamis (data berubah-ubah) dibungkus React Suspense, lalu di-stream dari server saat request masuk.
Hasilnya, pengguna melihat halaman muncul cepat (mirip islands architecture), sementara bagian yang butuh database tetap fresh. Ini berbeda dari ISR yang menyimpan seluruh halaman, atau SSR yang membangun ulang seluruh halaman tiap request.
Kapan Pakai PPR?
| Kasus | Cocok PPR? | Alasan |
|---|---|---|
| Toko online dengan stok | Ya | Layout statis, stok dinamis |
| Dashboard internal | Tidak | Hampir semua bagian dinamis |
| Blog atau artikel | Tidak butuh | SSG cukup |
| Landing page dengan quote real-time | Ya | Shell statis, angka di-stream |
| Halaman profil user | Ya | Layout publik, data user dinamis |
Kenapa Penting?
Untuk website bisnis Indonesia yang traffic-nya menengah (puluhan ribu sampai ratusan ribu sesi per bulan), PPR menyelesaikan dilema klasik antara kecepatan dan freshness. Tanpa PPR, developer biasanya pilih salah satu, statis cepat tapi data basi, atau SSR fresh tapi LCP lambat.
Berdasarkan dokumentasi resmi Next.js, PPR memungkinkan mempertahankan skor Core Web Vitals hijau di e-commerce yang dulunya sulit lulus karena harus menampilkan harga real-time. Implementasinya cukup wrap komponen dinamis dengan Suspense dan eksplisitkan dynamic rendering.
Pertanyaan Umum
Apakah PPR sama dengan streaming SSR?
Tidak persis. Streaming SSR membangun seluruh halaman di server lalu mengirim secara bertahap. PPR mengirim shell statis dari CDN dulu, baru bagian dinamis di-stream dari server. PPR lebih cepat untuk first byte.
Apakah PPR butuh konfigurasi khusus di Vercel?
Per Mei 2026, PPR aktif otomatis di Vercel saat opsi experimental.ppr di-enable di Next.js config. Tidak perlu setup tambahan untuk caching shell.
Istilah Terkait