Kapan Pakai ISR vs SSG di Next.js untuk Website Bisnis

TL;DR: SSG (Static Site Generation) membangun semua halaman saat build, cocok untuk konten yang jarang berubah. ISR (Incremental Static Regeneration) membangun ulang halaman tertentu di interval tertentu tanpa rebuild penuh, cocok untuk konten yang perlu segar tetapi tidak real-time. Pilih SSG untuk landing page dan glossary, pilih ISR untuk blog yang sering update, list produk e-commerce, dan dashboard publik.

Pertanyaan ini sering muncul saat saya konsultasi dengan klien yang baru migrasi ke Next.js. Mereka tahu Next.js mendukung beberapa mode rendering, tapi tidak tahu mana yang dipakai kapan. Jawaban "tergantung" memang benar, tetapi tidak membantu mengambil keputusan.

Dalam beberapa proyek terakhir, termasuk vitoatmo.com sendiri yang punya artikel dan glosarium yang bertambah hampir setiap hari, saya menemukan kerangka keputusan yang lebih konkret. Pilihan antara SSG dan ISR seharusnya didorong oleh satu pertanyaan, seberapa sering konten halaman ini berubah.

Perbedaan Inti

SSG menjalankan proses build satu kali. Setiap halaman dihasilkan menjadi HTML statis, lalu disajikan langsung dari CDN. Untuk mengubah konten, perlu rebuild dan deploy ulang. ISR berjalan mirip SSG, tetapi setiap halaman punya properti revalidate. Ketika revalidate lewat, request berikutnya akan memicu Next.js untuk merender ulang halaman itu di background, lalu menggantinya tanpa rebuild seluruh situs.

Studi Kasus Vitoatmo.com

Di vitoatmo.com, saya memakai keduanya. Halaman /tentang, /layanan, /harga, dan semua halaman prose seperti /privasi pakai SSG murni. Kontennya jarang berubah, dan kalaupun berubah, saya rebuild manual lewat git push. Hasilnya, halaman-halaman ini punya skor Core Web Vitals yang konsisten hijau.

Sebaliknya, app/layout.tsx dipakai bersama dengan revalidate 60 detik untuk membaca data schema dari tabel schema_entities di Supabase. Setiap 60 detik, halaman akan refresh JSON-LD-nya tanpa rebuild. Pola yang sama saya pakai untuk halaman /artikel dan /glosarium yang menarik data terbaru dari database. Tanpa ISR, setiap kali ada artikel baru, saya harus rebuild seluruh situs.

Kapan Pilih SSG

Pilih SSG jika halaman memenuhi salah satu kriteria berikut. Konten ditulis manual dan jarang berubah, misalnya halaman About, Pricing, atau Service. Konten tergantung pada git commit, sehingga rebuild memang yang diinginkan setiap deploy. Skala kecil, kurang dari beberapa ratus halaman, sehingga rebuild penuh tetap cepat. Halaman butuh latensi terendah dan tidak boleh ada delay re-render sama sekali.

Untuk kasus seperti landing page kampanye satu kali atau microsite event, SSG hampir selalu pilihan terbaik. Build sekali, deploy ke CDN, lupakan.

Kapan Pilih ISR

Pilih ISR jika konten berubah berkala tetapi tidak real-time, misalnya blog yang update mingguan, list produk yang berubah harian, atau halaman portfolio yang ditambahkan setiap minggu. ISR juga cocok ketika jumlah halaman terlalu banyak untuk rebuild penuh, misalnya 10.000 halaman produk e-commerce. Dalam kasus ini, ISR plus on-demand revalidation lewat webhook adalah pola standar.

Untuk panduan resmi tentang ISR, dokumentasi Next.js memuat pola implementasi lengkap dengan trade-off-nya.

Hybrid Adalah Norma

Di proyek nyata, jarang sekali satu mode dipakai untuk semua halaman. Yang umum adalah hybrid. Halaman marketing pakai SSG. Halaman konten dinamis pakai ISR. Halaman yang butuh data per-user (akun, dashboard) pakai SSR atau client-side fetching. Next.js mendukung campuran ini di satu codebase, dan inilah kekuatan utama framework-nya dibanding tooling SSG murni.

Pertanyaan Umum

Apakah ISR menambah biaya hosting di Vercel?

Sedikit. ISR memicu function invocation saat revalidate. Untuk situs dengan traffic medium ke kecil, biaya tambahannya minim. Untuk traffic besar, perhatikan limit function invocation di paket Vercel Anda.

Bisakah ISR dipakai dengan revalidate 0 (selalu fresh)?

Bisa, tapi pada saat itu efeknya mirip SSR. Untuk konten yang benar-benar real-time, SSR atau Server Components dengan dynamic rendering lebih tepat.

Apa hubungan ISR dengan CDN?

ISR menyimpan hasil render di edge cache CDN. Saat revalidate, hanya origin yang melakukan rebuild halaman, lalu hasilnya dipropagasi ke CDN. Pengguna tetap mendapat respons cepat dari edge.

Keputusan yang Mendukung Pertumbuhan

SSG dan ISR bukan kompetitor. Keduanya alat dengan profil yang berbeda. Kerangka sederhananya, jika konten butuh redaktur atau database, pertimbangkan ISR. Jika konten tetap di repo dan rebuild jadi bagian workflow, SSG sudah cukup. Mulai dari SSG karena lebih sederhana, naikkan ke ISR ketika frekuensi update mulai jadi beban.