Digital Transformation
Partial Prerendering (PPR)
TL;DR: Partial Prerendering (PPR) adalah model render hybrid yang diperkenalkan Next.js, menggabungkan shell statis yang dikirim instan dari edge dengan komponen dinamis yang di-stream setelahnya. Hasilnya: Time to First Byte (TTFB) secepat halaman statis, sementara konten personalisasi tetap real-time. Per Next.js 15, PPR masih dalam tahap experimental dan diaktifkan via konfigurasi.
Apa itu Partial Prerendering?
PPR memisahkan halaman menjadi dua bagian: shell statis (header, navigasi, layout) yang di-render saat build dan disajikan dari CDN, serta dynamic holes (komponen yang butuh data fresh seperti rekomendasi personal, cart, harga real-time) yang di-stream dari server. Pendekatan ini menyelesaikan dilema klasik antara SSG yang cepat tapi statis dan SSR yang dinamis tapi lambat. Konsep ini terkait erat dengan edge rendering dan streaming SSR.
Cara Kerja PPR
| Fase | Yang terjadi |
|---|---|
| Build time | Shell statis di-prerender dan disimpan di CDN |
| Request | CDN kirim shell ke browser dalam milidetik |
| Stream | Server lanjut stream komponen dinamis ke browser sebagai HTML chunks |
| Hydrate | React hydrate komponen sebagaimana datang |
Pengguna melihat layout lengkap dalam waktu di bawah 200 ms, sementara konten dinamis muncul progresif dalam 500 sampai 1500 ms berikutnya.
Kenapa Penting?
Untuk e-commerce dan SaaS Indonesia yang butuh personalisasi (rekomendasi produk, harga member, status cart), PPR memberi cara mendapatkan skor Core Web Vitals terbaik tanpa mengorbankan dinamika. Saat membangun katalog Nalesha (e-commerce parfum), kombinasi shell statis untuk listing dan dynamic hole untuk harga member menghasilkan LCP konsisten di bawah 1,8 detik bahkan di koneksi 3G. Dokumentasi resmi: Next.js Partial Prerendering.
Pertanyaan Umum
Apakah PPR siap dipakai di production?
Per Next.js 15 (rilis Oktober 2024), PPR masih experimental dan butuh flag experimental.ppr di next.config.js. Tim development sebaiknya menunggu stabilisasi atau memakai PPR di proyek dengan toleransi tinggi terhadap perubahan API.
Apa beda PPR dengan ISR?
ISR (Incremental Static Regeneration) merender ulang halaman utuh berdasarkan interval, sehingga semua pengunjung melihat versi sama selama window cache. PPR mempertahankan shell statis tetap fresh sambil tetap mengizinkan setiap pengunjung melihat komponen dinamis yang dipersonalisasi.
Istilah Terkait