Cara Pasang Incremental Static Regeneration di Next.js untuk Website Bisnis dengan Backend Supabase 2026: Konfigurasi 5 Langkah

TL;DR: Incremental Static Regeneration (ISR) adalah fitur Next.js yang merender halaman statis lalu memperbaruinya secara berkala di latar belakang. Untuk website bisnis dengan backend Supabase, ISR memungkinkan konten dari database tampil dengan latensi p95 di bawah 200 ms global tanpa harus rebuild seluruh situs setiap kali ada update. Lima langkah di bawah ini cukup untuk memasang ISR dasar di Next.js 15 App Router.

Saat saya rebuild vitoatmo.com pada awal 2026, salah satu trade-off besar adalah memilih strategi rendering. Konten artikel dan glosarium tersimpan di Supabase, sementara pengunjung butuh halaman cepat dan up-to-date. SSR penuh terlalu mahal di tagihan invocation, sementara SSG murni butuh deploy ulang setiap kali ada artikel baru. Pilihannya jatuh ke Incremental Static Regeneration.

Setelah dipasang, latensi p95 turun dari 480 ms ke sekitar 180 ms global, dan biaya invocation Vercel turun signifikan karena 90 persen permintaan dilayani dari cache CDN. Tulisan ini merangkum konfigurasi yang saya pakai.

Kenapa ISR Cocok untuk Website Bisnis

Website bisnis seperti blog, glosarium, halaman produk, atau profil layanan punya pola umum: konten berubah harian sampai mingguan, traffic-nya organik, dan pembaca tidak butuh data real-time per detik. Pola ini cocok untuk ISR. Halaman pertama yang menyentuh server di-render statis, hasilnya disimpan di cache CDN, lalu Next.js memperbaruinya di latar belakang setelah interval tertentu. Pembaca mendapat versi instan, mesin pencari mendapat HTML lengkap, server hanya bekerja saat data benar-benar perlu disegarkan.

Berbeda dengan SSR yang menjalankan fungsi serverless di setiap permintaan, ISR memotong biaya operasional sambil tetap memberi konten segar. Vercel mendokumentasikan strategi ini di panduan resmi Next.js Caching.

5 Langkah Konfigurasi ISR di Next.js 15 dengan Supabase

Untuk konten yang jarang berubah seperti glosarium, interval 3600 detik (1 jam) cukup. Untuk artikel yang sedang aktif diedit, 60 detik lebih aman. Untuk halaman pilar yang harus selalu segar, padukan dengan revalidate on-demand via webhook Supabase.

Studi Kasus Implementasi di vitoatmo.com

Saat memasang ISR di vitoatmo.com pada April 2026, saya memakai pola berikut. Halaman /artikel/[slug] di-revalidate setiap 60 detik. Halaman /glosarium/[slug] di-revalidate setiap 3600 detik karena definisi jarang berubah. Halaman daftar /artikel dan /glosarium di-revalidate setiap 300 detik karena daftar konten baru harus muncul cepat tapi tidak terlalu sering. Dengan pola ini, halaman pertama yang diakses bot Google sudah HTML lengkap, dan pengunjung berikutnya mendapat versi cache yang segar.

Pola ini saya kombinasikan dengan REST API Supabase untuk fetch data dari server component. Untuk konten yang butuh otorisasi user (misal halaman akun), saya pakai SSR penuh dengan Server Action, bukan ISR.

Kapan Tidak Memakai ISR

Hindari ISR untuk halaman yang isinya user-spesifik seperti dashboard, halaman akun, atau halaman checkout. Halaman seperti itu butuh data live per user dan tidak bisa di-cache di CDN. Hindari juga ISR untuk halaman dengan parameter query yang tak terbatas, karena setiap kombinasi akan men-generate cache entry baru dan menghabiskan storage.

Praktik standar yang saya pakai adalah memisahkan halaman publik (ISR) dari halaman privat (SSR), lalu memakai middleware untuk routing berbasis state autentikasi.

Pertanyaan Umum

Apakah ISR butuh Vercel atau bisa di hosting lain?

ISR adalah fitur Next.js, bukan Vercel. Self-hosted Node server dengan adapter standar, Netlify, atau Cloudflare juga mendukung dengan konfigurasi berbeda. Vercel hanya membuatnya plug-and-play.

Berapa interval revalidate yang aman untuk konten editorial?

Untuk artikel aktif, 60 detik cukup. Untuk glosarium, 3600 detik. Untuk halaman statis seperti "tentang kami", boleh 86400 detik (24 jam) atau bahkan tidak revalidate sama sekali.

Apakah ISR bisa di-trigger manual saat ada artikel baru?

Bisa, lewat revalidate on-demand via Route Handler atau webhook. Pola umum: Supabase mengirim webhook ke endpoint Next.js setiap kali ada insert ke tabel articles, lalu Next.js memanggil revalidatePath atau revalidateTag.

Apakah ISR meng-cache di sisi pengguna juga?

Tidak. ISR meng-cache di CDN dan di server. Browser pengguna tetap mengikuti header Cache-Control standar dari respons.

Memilih Interval, Bukan Memilih Strategi

Banyak yang menanyakan "SSG vs SSR vs ISR mana yang terbaik". Pertanyaan yang lebih tepat adalah "interval revalidate berapa yang cocok untuk konten ini". Begitu Anda menjawab pertanyaan itu, ISR hampir selalu cukup untuk konten bisnis non-transaksional. Mulai dari interval konservatif (60-300 detik), pantau cache hit ratio di dashboard Vercel selama dua minggu, lalu sesuaikan.