Partial Prerendering (PPR) Next.js untuk Website Bisnis Indonesia 2026

TL;DR: Partial Prerendering (PPR) adalah strategi render Next.js yang menggabungkan shell halaman statis dengan slot dinamis berbasis Suspense. Hasilnya, konten utama tampil hampir instan sedangkan bagian personal seperti keranjang dan harga real-time tetap segar. Untuk website bisnis Indonesia, PPR memangkas waktu tampil halaman penting tanpa mengorbankan akurasi data.

Dalam beberapa proyek terakhir, saya melihat pola yang berulang. Pemilik website bisnis ingin halaman katalog dan landing page yang cepat, tetapi juga membutuhkan elemen dinamis seperti notifikasi stok, harga regional, atau status promo. Solusi klasik memaksa kita memilih: SSG cepat tetapi statis, atau SSR fleksibel tetapi lambat di pasar Indonesia yang jaringannya bervariasi.

Partial Prerendering memutus dilema ini. Shell halaman dirakit saat build, ditayangkan dari edge, dan slot dinamis dialirkan setelah shell tiba di browser. Pengguna melihat hero, headline, dan gambar utama dalam ratusan milidetik. Personalisasi menyusul tanpa menghambat waktu tampil pertama.

Cara Kerja PPR Secara Singkat

PPR membagi satu halaman menjadi dua lapis. Lapis pertama adalah static shell yang berisi semua bagian yang tidak bergantung pada user atau request, misalnya navigasi, hero, copy produk, dan footer. Lapis kedua adalah dynamic holes yang dibungkus dalam komponen Suspense, misalnya harga real-time, stok cabang, atau rekomendasi personal.

Next.js merender shell di build time. Saat request masuk, edge runtime menambahkan slot dinamis lewat streaming. Pengguna menerima HTML lengkap dengan placeholder Suspense, lalu data dinamis menyusul. Cara ini mendekatkan halaman ke standar Core Web Vitals, terutama LCP dan INP, karena konten utama tidak menunggu data dinamis selesai.

Studi Kasus dan Skenario Implementasi

Saat membantu klien Atmo (LMS) memikirkan ulang halaman dashboard tutor, kombinasi shell statis untuk kerangka dan slot dinamis untuk progress siswa menghasilkan waktu tampil yang konsisten meski koneksi tutor bervariasi. Pola ini juga relevan untuk Nalesha (e-commerce parfum) ketika halaman katalog harus tampil cepat sambil tetap menampilkan stok cabang.

Skenario yang sering cocok untuk PPR:

Per April 2026, PPR di Next.js 15 sudah cukup stabil untuk dipakai di produksi pada kasus yang sesuai. Untuk pemasaran, dampaknya terlihat dari penurunan bounce rate di halaman entry-level dan peningkatan engagement di area dinamis.

Pertanyaan Umum

Apakah PPR sama dengan ISR?

Tidak. ISR membangun ulang seluruh halaman secara berkala. PPR menjaga shell statis tetap konstan dan hanya mengganti slot dinamis tiap request. Keduanya bisa dikombinasikan untuk kasus tertentu.

Apakah PPR mengganggu SEO?

Tidak. Mesin pencari menerima shell statis lengkap dengan markup utama. Slot dinamis yang dihidrasi setelahnya umumnya berisi data personal atau sesi, bukan konten kanonik.

Bisnis kecil di Indonesia perlu PPR atau tidak?

Tergantung kebutuhan. Jika website hanya brosur sederhana, SSG murni sudah cukup. PPR berguna saat ada kombinasi konten kanonik dan elemen personal yang harus tetap segar.

Penutup Aplikatif

Pisahkan halaman yang paling sering jadi entry SEO, identifikasi bagian statis dan dinamisnya, lalu pasang PPR pada satu halaman pilot. Ukur perubahan TTFB, LCP, dan bounce rate selama dua minggu. Rujukan teknis resmi tersedia di dokumentasi Next.js Partial Prerendering dan rekomendasi web vitals di web.dev Vitals.