Digital Transformation
PPR (Partial Pre-Rendering)
PPR adalah strategi rendering hybrid Next.js yang menggabungkan halaman statis cepat dengan bagian dinamis per-pengguna dalam satu request, tanpa kompromi performa.
TL;DR: PPR (Partial Pre-Rendering) adalah teknik rendering Next.js yang menyajikan kerangka halaman dari cache static sambil men-stream bagian dinamis (cart, login state, harga personal) di dalam Suspense boundary. Hasilnya: TTFB cepat seperti SSG, tapi konten tetap personal seperti SSR. PPR stabil di Next.js 15 dan jadi default untuk app router yang butuh sebagian dinamis tanpa kehilangan kecepatan static.
Apa itu PPR?
PPR adalah singkatan dari Partial Pre-Rendering, teknik di Next.js App Router yang membagi satu halaman menjadi dua bagian: shell statis yang dipre-render saat build (atau revalidate), dan komponen dinamis di dalam Suspense yang dieksekusi per-request. Browser menerima HTML statis duluan (cepat), lalu server men-stream bagian dinamis. Pengguna melihat layout muncul hampir instan, sementara nama akun atau isi keranjang masuk beberapa puluh milidetik kemudian.
Analogi sederhana: bayangkan koran yang sudah dicetak tadi malam (shell statis), lalu petugas menempel stiker harga lokal di kiosk pagi ini (bagian dinamis). Pembaca tidak menunggu seluruh koran dicetak ulang, hanya menunggu stiker harga.
Kapan Memakai PPR?
PPR cocok untuk halaman yang sebagian besar identik antar pengguna tapi punya elemen personal. Pola umum:
| Kasus | Bagian Statis | Bagian Dinamis |
|---|---|---|
| Halaman produk e-commerce | gambar, deskripsi, review | stok lokal, harga member, status keranjang |
| Artikel blog dengan paywall | body artikel, navigasi | banner langganan, status baca |
| Dashboard publik | layout, menu, pillar page | data user spesifik |
Halaman 100% publik (landing page tanpa state) tetap pakai SSG biasa. Halaman 100% per-user (admin panel, akun pribadi) lebih cocok SSR atau client-side fetching.
Kenapa Penting?
Sebelum PPR, developer dipaksa memilih antara cepat (SSG) atau personal (SSR). Untuk pasar Indonesia yang koneksi 4G-nya masih dominan dan Core Web Vitals jadi sinyal peringkat, kompromi ini mahal: SSR seluruh halaman bikin LCP melar di koneksi pelosok, sementara SSG murni tidak bisa menampilkan harga member atau stok lokal. PPR memutus dilema ini, satu halaman bisa cepat dan tetap personal.
Berdasarkan praktik di proyek e-commerce client Vito Atmo, migrasi halaman PDP dari full-SSR ke PPR menurunkan TTFB rata-rata dari 800-1200 ms ke 80-200 ms di koneksi 4G Jabodetabek, sementara konten dinamis tetap di bawah 300 ms streaming.
Pertanyaan Umum
Apakah PPR sama dengan ISR?
Tidak. ISR (Incremental Static Regeneration) men-cache seluruh halaman lalu regen di interval. PPR membagi satu halaman jadi statis dan dinamis dalam satu render, jadi bagian dinamis selalu segar tanpa perlu menunggu revalidasi.
Apakah PPR butuh Vercel?
Tidak wajib. PPR adalah fitur Next.js, bisa jalan di runtime mana pun yang mendukung streaming HTTP response. Vercel hanya menyediakan optimasi tambahan di Edge Network mereka.
Istilah Terkait