Digital Transformation
ISR (Incremental Static Regeneration)
TL;DR: ISR (Incremental Static Regeneration) adalah pendekatan Next.js yang menggabungkan kecepatan halaman statis dengan kesegaran data dinamis. Halaman di-build sekali, lalu di-rebuild secara on-demand atau berkala saat ada request, tanpa perlu redeploy seluruh aplikasi.
Apa itu ISR (Incremental Static Regeneration)?
ISR adalah strategi rendering hybrid: halaman pertama kali di-generate sebagai HTML statis saat build, kemudian Next.js akan me-regenerate halaman tersebut di latar belakang setelah interval revalidate yang Anda set, atau saat di-trigger lewat API on-demand. Pengunjung tetap mendapat versi statis yang cepat, sambil versi baru disiapkan untuk request berikutnya.
Sederhananya, anggap ISR seperti koran cetak: edisi pagi tetap di tangan pembaca, tapi redaksi sudah menyiapkan edisi siang yang akan dibagikan setelah jam tertentu. Tidak perlu mencetak ulang dari nol setiap pembaca datang. Konsep ini berbeda dengan SSR yang menghitung ulang setiap request, dan berbeda pula dengan static export yang baru update saat redeploy.
Cara Kerja ISR di Next.js
| Tahap | Penjelasan |
|---|---|
| Build awal | Halaman di-pre-render sebagai HTML + JSON props saat next build |
| Request pertama | User mendapat HTML statis dari CDN, hampir instan |
| Setelah revalidate window | Request berikutnya tetap dapat versi lama, tapi Next.js men-trigger rebuild di latar belakang |
| Rebuild selesai | Versi baru menggantikan cache, request setelahnya dapat versi baru |
| On-demand | revalidatePath() atau revalidateTag() bisa memaksa rebuild kapan saja |
Di App Router (Next.js 13+), Anda mengaktifkan ISR via export const revalidate = 60 (detik) atau via fetch(url, { next: { revalidate: 60 } }). Detail teknis ada di dokumentasi Next.js tentang caching dan revalidating.
Kenapa Penting?
Untuk situs konten Indonesia yang isinya berubah harian (artikel, glosarium, harga produk e-commerce), ISR menyelesaikan dilema klasik: kalau full SSR, server kerja keras tiap request dan Web Vitals turun. Kalau full static, konten cepat usang dan butuh redeploy tiap edit. ISR memberi jalan tengah: kecepatan CDN level statis, plus kesegaran near-realtime. Praktik yang saya pakai di proyek vitoatmo.com: artikel pakai revalidate: 60, halaman admin penuh dinamis, halaman pricing on-demand revalidate setiap kali harga diubah lewat admin.
Pertanyaan Umum
Apakah ISR sama dengan SSR?
Tidak. SSR (Server-Side Rendering) menghitung ulang halaman setiap request, jadi load lebih berat dan latency lebih tinggi. ISR menyajikan versi statis yang sudah jadi, lalu refresh di latar belakang. Untuk konten yang berubah per menit atau jam, ISR jauh lebih efisien.
Berapa nilai revalidate yang ideal?
Tergantung volatilitas konten. Artikel blog: 60-300 detik. Halaman harga: 30-60 detik atau on-demand. Halaman portfolio: 3600 detik atau lebih, karena jarang berubah. Hindari nilai 0 (sama dengan force-dynamic).
Istilah Terkait