Memahami Perbedaan SSR, SSG, dan ISR di Next.js untuk Performa

Kamu mungkin sering bingung saat harus menentukan metode rendering di Next.js. Pilihan antara SSR, SSG, atau ISR bukan sekadar masalah teknis, tapi berdampak langsung pada pengalaman pengguna. Jika salah pilih, website kamu bisa terasa lambat atau justru menyajikan data yang sudah basi.

Bayangkan kamu sedang mengelola sebuah restoran untuk memahami konsep ini dengan mudah. SSG itu seperti menyiapkan menu yang sudah dimasak sejak pagi agar pelanggan tidak perlu menunggu lama. SSR mirip dengan memasak pesanan tepat saat pelanggan datang ke meja. Sementara itu, ISR adalah menu siap saji yang kamu perbarui secara berkala tanpa harus menutup dapur.

Static Site Generation (SSG) sangat cocok untuk konten yang jarang berubah. Kamu bisa menggunakannya untuk halaman profil, dokumentasi, atau artikel blog statis. Karena halaman sudah dibuat saat proses build, performanya sangat cepat dan sangat disukai oleh mesin pencari untuk kebutuhan SEO.

Server Side Rendering (SSR) adalah pilihan tepat jika kamu butuh data yang selalu segar setiap kali halaman dibuka. Contohnya adalah dashboard publik yang menampilkan angka real-time atau data yang dipersonalisasi untuk user tertentu. Namun, ingat bahwa SSR membuat server bekerja lebih keras karena harus merender halaman pada setiap request yang masuk.

Incremental Static Regeneration (ISR) seringkali menjadi solusi paling cerdas untuk website modern. Kamu mendapatkan kecepatan seperti halaman statis, namun tetap bisa memperbarui data secara otomatis dalam interval waktu tertentu. Strategi ini sangat menghemat resource karena kamu tidak perlu melakukan build ulang seluruh website hanya untuk satu perubahan kecil.

Berikut adalah contoh sederhana bagaimana kamu mengimplementasikan ISR di Next.js:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Memperbarui data setiap 60 detik
  };
}

Langkah di atas sangat penting karena properti revalidate memungkinkan kamu menjaga keseimbangan antara performa dan aktualitas data. Dengan menentukan durasi dalam detik, kamu memberi tahu Next.js kapan harus mengecek pembaruan data di latar belakang. Hal ini memastikan user tetap mendapatkan akses cepat tanpa membebani server secara terus-menerus.