Next.js ISR: Bukan SSG dan Bukan SSR, Ini Cara Bikin Konten Kamu Tetap Update Tanpa Build Ulang

Next.js ISR: Bukan SSG dan Bukan SSR, Ini Cara Bikin Konten Kamu Tetap Update Tanpa Build Ulang
Photo by Bernd 📷 Dittrich/Unsplash

Buat kamu yang berkecimpung di dunia web development modern, terutama yang menggunakan framework sekelas Next.js, pasti sudah akrab dengan dilema klasik: memilih antara speed yang luar biasa cepat atau freshness data yang selalu real-time.

Dulu, pilihannya cuma dua: Static Site Generation (SSG) yang super kencang karena sudah di-build duluan, atau Server-Side Rendering (SSR) yang datanya selalu terbaru tapi butuh resource server yang lebih besar setiap ada permintaan.

Tapi, bagaimana kalau ada cara untuk mendapatkan kecepatan SSG sekaligus menjaga konten tetap update seperti SSR, tanpa harus repot melakukan build ulang (rebuild) seluruh website setiap ada perubahan kecil?

Inilah saatnya kita bicara tentang Incremental Static Regeneration (ISR) di Next.js. Di Javapixa Creative Studio, kami melihat ISR bukan sekadar fitur, tapi adalah standar baru dalam membangun aplikasi web yang performanya killer sekaligus fleksibel.

*

Mengenal Tiga Pilar Next.js: Kenapa ISR Jadi Solusi Tengah yang Paling Worth It

Sebelum masuk lebih dalam ke ISR, mari kita sedikit flashback mengapa Next.js begitu revolusioner. Next.js menawarkan tiga cara utama rendering yang bisa kita campur aduk sesuai kebutuhan halaman:

1. Static Site Generation (SSG)

SSG menggunakan fungsi getStaticProps. Semua halaman di-generate menjadi file HTML statis saat proses build (ketika kamu menjalankan npm run build).

Keunggulan: Kecepatan yang tak tertandingi karena server tidak perlu memproses apa-apa saat request. Aman dari traffic* tinggi. Kekurangan: Jika ada perubahan data di CMS (misalnya, kamu edit satu paragraf di blog), kamu harus menjalankan proses build ulang* seluruh aplikasi. Ini memakan waktu dan tidak efisien untuk situs dengan ribuan konten.

2. Server-Side Rendering (SSR)

SSR menggunakan fungsi getServerSideProps. Halaman di-generate setiap kali pengguna meminta (me-request) halaman tersebut.

Keunggulan: Data selalu real-time dan fresh. Cocok untuk halaman yang sangat dinamis, seperti dashboard* atau harga saham. Kekurangan: Performa bisa melambat karena setiap permintaan memerlukan server untuk mengambil data, me-render halaman, dan mengirimkannya. Biaya hosting bisa lebih mahal karena konsumsi serverless function* yang tinggi.

3. Incremental Static Regeneration (ISR): Jembatan Emas

ISR adalah cara Next.js mengatasi kelemahan SSG. Dengan ISR, kamu bisa mendapatkan kecepatan loading SSG, tetapi kontennya bisa diperbarui di latar belakang tanpa perlu rebuild. Ini seperti kamu punya kue yang sudah matang (statik), tapi kamu punya koki rahasia yang mengganti isinya saat kamu sedang tidak melihat.

Fungsi Kunci: Parameter revalidate

ISR bekerja menggunakan fungsi getStaticProps, tapi dengan tambahan parameter sakti: revalidate.

javascript
export async function getStaticProps(context) {
  const res = await fetch('https://api-data-kamu.com/posts');
  const posts = await res.json();

Angka 60 di atas adalah waktu dalam detik. Ini berarti:

  1. Pengunjung pertama kali mengakses halaman, mereka mendapatkan versi statis yang sudah di-cache (super cepat).
  2. Selama 60 detik berikutnya, semua pengunjung akan mendapatkan versi yang sama, meskipun datanya mungkin sudah berubah di database.
  3. Setelah 60 detik berlalu, ketika ada pengunjung baru yang datang, pengunjung tersebut tetap disajikan konten yang lama (stale data) sambil Next.js secara diam-diam (di latar belakang) memproses permintaan fetch data yang baru dan me-render ulang halaman tersebut.
  4. Setelah proses rendering ulang selesai, versi cache yang lama akan digantikan dengan versi baru. Pengunjung berikutnya akan mendapatkan konten yang fresh.

Ini benar-benar "Incremental" karena kamu hanya me-regenerate halaman yang diminta saja, bukan seluruh website.

*

Tips Implementasi ISR ala Javapixa Creative Studio

Di Javapixa, kami menganggap ISR sangat penting, terutama untuk situs berskala besar seperti e-commerce, portal berita, atau landing page yang sering diperbarui. Berikut adalah tips aplikatif yang harus kamu perhatikan saat mengimplementasikan ISR.

1. Tentukan Waktu revalidate yang Ideal

Ini adalah keputusan bisnis, bukan hanya teknis.

  • Situs E-commerce (Harga dan Stok): Jangan terlalu lama. Jika stok sering berubah, 10 hingga 30 detik mungkin ideal. Data yang terlalu lama bisa menyebabkan pengalaman pengguna yang buruk (misalnya, barang terlihat ada, padahal sudah habis).

Blog/Artikel: Data tidak berubah sesering stok produk. Menggunakan 600 detik (10 menit) hingga 3600 detik (1 jam) sudah cukup untuk menjaga freshness* tanpa membebani sistem regenerasi. Halaman Landing Page* Statis: Jika jarang berubah, setting 86400 detik (24 jam) mungkin paling efisien.

Penting: Selalu ingat, revalidate tidak menjamin data akan fresh dalam 60 detik. Ia menjamin data berpotensi di-update setelah 60 detik jika ada pengunjung yang datang.

2. Jangan Lupakan fallback: true untuk Skala Besar

Ketika kamu menggunakan ISR pada halaman dengan path dinamis (misalnya, /artikel/[slug]), kamu harus menentukan bagaimana Next.js menangani halaman yang belum pernah di-generate sebelumnya.

Dengan fallback: true (didefinisikan di getStaticPaths):

  1. Halaman yang sudah di-build (yang sudah ada di daftar paths kamu) akan langsung disajikan statis (cepat).
  2. Halaman baru (yang tidak ada di daftar build awal) akan menunjukkan loading state (fallback) sementara Next.js me-generate halaman tersebut untuk pertama kalinya. Setelah generate selesai, cache akan dibuat, dan pengunjung berikutnya akan mendapatkan versi statis yang cepat.

Tips UX: Pastikan loading state (fallback) kamu elegan dan cepat. Jangan sampai pengunjung bingung melihat halaman kosong. Ini adalah kunci untuk menjaga performa yang stabil saat situs kamu mulai memiliki ribuan halaman.

3. Terapkan On-Demand ISR: Real-time Tanpa Rebuild (Fitur Wajib!)

Meskipun revalidate otomatis adalah fitur hebat, ia punya kelemahan: kamu harus menunggu timeout berlalu dan menunggu pengunjung datang. Bagaimana jika kamu butuh data segera setelah kamu klik "Publish" di CMS?

Next.js kini mendukung On-Demand ISR. Ini adalah cara paling efisien yang kami gunakan di Javapixa untuk menjaga data selalu fresh. Caranya adalah dengan membuat API route di Next.js yang bisa kamu panggil (biasanya melalui webhook) dari CMS kamu.

Mekanisme Sederhana:

  1. Di CMS (misalnya, Contentful, Strapi, Sanity), kamu setting webhook yang akan terpicu setiap kali konten dipublikasikan.
  2. Webhook ini akan memanggil API route yang kamu buat di Next.js (misalnya, /api/revalidate?secret=KAMU).
  3. Di dalam API route tersebut, kamu gunakan fungsi res.unstable_revalidate(path) atau yang terbaru res.revalidate(path).

javascript
// Contoh API Route di Next.js (/pages/api/revalidate.js)
import type { NextApiRequest, NextApiResponse } from 'next';export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Cek secret key
  if (req.query.secret !== process.env.MYSECRETTOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

Dengan metode ini, kamu bisa men-trigger regenerasi halaman spesifik secara instan. Hasilnya? Pengunjung berikutnya akan langsung mendapatkan konten terbaru, menghilangkan latensi yang disebabkan oleh parameter revalidate berbasis waktu. Ini adalah best practice yang memberikan developer experience dan user experience terbaik.

4. Manfaatkan Edge Caching Secara Maksimal

Next.js, terutama saat di-deploy di Vercel (yang merupakan platform unggulan untuk Next.js), bekerja sangat erat dengan Edge Network. ISR secara default memanfaatkan CDN (Content Delivery Network) untuk menyimpan konten statis kamu sedekat mungkin dengan pengguna.

Pastikan header cache yang kamu gunakan tidak saling bertentangan dengan mekanisme ISR. Namun, biasanya konfigurasi default Next.js sudah sangat optimal. Fokuslah pada bagaimana kamu mendistribusikan cache tersebut. Semakin sering halaman kamu diakses dan di-regenerate (jika perlu), semakin cepat ISR bekerja.

5. Gunakan ISR untuk Semua Halaman yang Memungkinkan

Jangan hanya menggunakan ISR pada halaman blog. Halaman landing page, halaman produk yang datanya diambil dari third-party API, bahkan footer atau header yang diambil dari CMS, sangat cocok menggunakan ISR.

Tujuan utama Javapixa adalah meminimalkan penggunaan SSR karena mahal dan lambat, dan meminimalkan ketergantungan pada build ulang (rebuild). ISR adalah jawaban untuk keduanya.

*

Kenapa Javapixa Creative Studio Selalu Mengutamakan ISR?

Sebagai creative studio yang berfokus pada performa dan skalabilitas, kami percaya bahwa kecepatan loading bukan lagi fitur tambahan, melainkan keharusan mutlak.

Next.js ISR memungkinkan kami menawarkan solusi yang:

  1. Anti Down: Karena halaman disajikan secara statis, traffic tinggi sekalipun tidak akan menjatuhkan server kamu. Regenerasi hanya terjadi di latar belakang.
  2. Hemat Biaya: Kami mengurangi secara drastis jumlah panggilan ke serverless functions atau backend kamu dibandingkan menggunakan SSR murni. Ini menghemat biaya operasional bulanan klien.
  3. Pengalaman Pengguna (UX) Superior: Pengguna selalu mendapatkan kecepatan SSG, dan data yang mereka lihat tidak pernah terlalu lama ketinggalan zaman.

Kami di Javapixa Creative Studio memastikan setiap proyek yang memiliki kebutuhan data dinamis namun tetap membutuhkan performa tinggi akan diimplementasikan dengan strategi caching ISR yang cerdas. Kami merancang arsitektur yang memanfaatkan webhook (On-Demand ISR) sehingga perubahan data di CMS langsung terpublikasi tanpa proses deployment yang memakan waktu.

*

Kesimpulan: Masa Depan Web Adalah Fleksibel dan Cepat

ISR bukanlah sekadar workaround, ini adalah evolusi dari SSG. Next.js telah memberikan kita alat yang kuat untuk membangun website yang secepat kilat (statis) namun tetap memiliki denyut nadi yang hidup (dinamis).

Jika kamu masih menggunakan SSG murni dan menghabiskan waktu berjam-jam menunggu deployment selesai hanya karena kamu mengedit satu typo, atau jika kamu masih terlalu bergantung pada SSR murni yang membebani server, saatnya kamu beralih ke ISR.

Teknologi ini memungkinkan tim marketing kamu meng-update konten tanpa perlu memanggil tim developer untuk melakukan deployment. Developer senang, marketing senang, dan yang paling penting, pengguna kamu senang karena situsnya selalu ngebut dan informasinya selalu terbaru. Mari tingkatkan performa website kamu bersama Javapixa Creative Studio dengan memanfaatkan kekuatan penuh dari Next.js ISR.