ISR di Next.js: Konten Dinamis Tetap Secepat Halaman Statis

TL;DR: Incremental Static Regeneration (ISR) adalah fitur Next.js yang menyajikan halaman sebagai file statis cepat, lalu memperbaruinya di latar belakang setiap interval tertentu. Hasilnya, konten tetap segar tanpa membangun ulang seluruh situs dan tanpa membebani server di setiap kunjungan. Cocok untuk website bisnis dengan ratusan halaman yang isinya berubah berkala.

Saat membangun website yang punya banyak halaman konten, ada dilema klasik. Halaman statis sangat cepat tapi isinya beku sampai build berikutnya. Halaman dinamis selalu segar tapi membebani server dan melambat saat trafik naik. Dalam beberapa proyek terakhir, dilema ini sering memaksa tim memilih antara cepat atau segar.

ISR menghapus dilema itu. Anda mendapat kecepatan halaman statis sekaligus kesegaran konten dinamis, dalam satu mekanisme.

Masalah yang Diselesaikan ISR

Tanpa ISR, situs dengan ribuan halaman menghadapi pilihan sulit. Build penuh untuk setiap perubahan kecil memakan waktu lama dan boros. Render setiap permintaan membebani time to first byte dan mengganggu Core Web Vitals.

ISR menyajikan versi statis yang sudah jadi, lalu meregenerasi halaman itu di latar belakang setelah interval yang Anda tentukan. Pengunjung pertama setelah interval tetap mendapat halaman cepat, sementara versi baru disiapkan untuk pengunjung berikutnya. Proses ini berjalan tanpa hydration ulang yang mahal di sisi pengguna.

Cara Kerja dan Kapan Memakainya

Di Next.js App Router, ISR diatur lewat opsi revalidasi pada level fetch atau route. Untuk konten yang berubah tiap jam, interval revalidasi pendek sudah memadai. Untuk integrasi yang lebih ringan di tepi jaringan, ISR bisa dikombinasikan dengan edge function. Detail teknis lengkapnya tersedia di dokumentasi resmi Next.js soal data revalidation.

Penerapan Nyata di Website Konten

Website vitoatmo.com sendiri memakai prinsip ini. Artikel dan glosarium yang terus bertambah disajikan sebagai halaman statis cepat, sementara data seperti skema terstruktur diperbarui lewat revalidasi berinterval pendek. Pendekatan ini menjaga skor performa tetap tinggi meski jumlah halaman bertambah ke ribuan, sesuatu yang sulit dicapai jika setiap halaman dirender ulang per permintaan.

Untuk website bisnis dengan katalog produk atau direktori layanan, pola yang sama berlaku. Anda bisa mengejar laju konversi yang lebih baik karena halaman cepat mengurangi pengunjung yang pergi sebelum konten tampil.

Pertanyaan Umum

Apakah ISR membuat konten selalu real-time?

Tidak. ISR memperbarui sesuai interval yang Anda tentukan, bukan instan. Untuk data yang harus persis detik ini, seperti saldo akun, gunakan rendering dinamis. ISR ideal untuk konten yang boleh tertinggal beberapa menit.

Apakah ISR butuh server khusus?

Tidak. ISR berjalan di platform yang mendukungnya seperti Vercel, tanpa Anda mengelola server sendiri. Regenerasi ditangani platform di latar belakang.

Apakah ISR cocok untuk situs kecil?

Bisa, tapi manfaat terbesarnya terasa di situs dengan banyak halaman yang berubah berkala. Untuk situs lima halaman yang jarang berubah, SSG biasa sudah cukup.

Pilih Mekanisme Sesuai Sifat Konten

Kecepatan dan kesegaran bukan lagi pilihan yang saling meniadakan. ISR memberi keduanya untuk mayoritas konten website bisnis. Petakan halaman Anda berdasarkan seberapa sering isinya berubah, lalu pilih ISR untuk yang segar berkala dan statis murni untuk yang nyaris tetap.