Memahami SSR, SSG, dan ISR di Next.js: Panduan Super Lengkap

Kekuatan Utama Ekosistem Next.js

Alasan utama para *React Developer* bermigrasi ke Next.js adalah kebebasannya dalam memilih strategi Rendering (cara HTML dibentuk). Di Next.js, kamu bisa memilih teknik yang berbeda untuk setiap halaman web yang berbeda. Mari kita bedah tiga teknik terpopulernya.

1. SSG (Static Site Generation) - Kecepatan Cahaya

Pada SSG, halaman HTML dirakit hanya satu kali, yaitu saat kamu melakukan proses Build (sebelum web di-upload ke server). Hasil akhirnya berupa HTML mati (Statis).

• Cara Kerja: Saat user A, B, dan C membuka web, server tidak perlu berpikir lagi. Ia langsung memberikan file HTML yang sudah jadi tersebut.
• Keuntungan: Kecepatan maksimal, paling aman dari hacker, dan sangat murah biaya server (bisa di-cache ke CDN).
• Kekurangan: Jika kamu mengedit artikel di database, website-mu tidak akan berubah sampai kamu melakukan Re-build (merakit ulang) aplikasinya secara manual.
• Cocok untuk: Halaman About Us, Landing Page, atau Blog Pribadi.

2. SSR (Server-Side Rendering) - Selalu Up-to-Date

Pada SSR, halaman HTML dirakit secara dadakan (On-Demand) setiap kali ada *request* masuk dari pengunjung.

• Cara Kerja: User A membuka web → Server menarik data terbaru dari Database → Server merakit HTML → Server mengirimkannya ke User A.
• Keuntungan: Data selalu 100% baru dan *real-time*. SEO juga tetap sempurna.
• Kekurangan: Jauh lebih lambat dari SSG karena server harus bekerja merakit halaman terus-menerus. Jika pengunjung membludak, server bisa kelebihan beban (Overload).
• Cocok untuk: Halaman Feed Twitter, Beranda Toko Online, atau Harga Saham/Kripto.

3. ISR (Incremental Static Regeneration) - Solusi Jalan Tengah

ISR adalah teknologi magis buatan Next.js yang menggabungkan kecepatan SSG dengan kebaruan data SSR.

• Cara Kerja: Halaman dirakit sebagai file Statis (seperti SSG), TAPI kamu bisa mengatur waktu Expired (Misal: 60 detik). Saat detik ke-61 ada pengunjung masuk, Next.js akan memicu proses rakit ulang di latar belakang, lalu secara diam-diam mengganti file HTML lamamu dengan HTML baru.
• Keuntungan: Super cepat layaknya web statis, namun data di dalamnya akan terus memperbarui dirinya sendiri sesuai jeda waktu yang kamu tentukan tanpa perlu kamu me-rebuild seluruh project.
• Cocok untuk: Portal Berita, Artikel Blog skala besar, dan Katalog E-Commerce.