Next.js SSR vs SSG vs ISR: kapan memakai tiap mode
Next.js SSR vs SSG vs ISR: kapan memakai tiap mode - panduan praktis MillionsCode dengan kriteria utama, checklist, alat terkait, dan FAQ.
Next.js SSR vs SSG vs ISR: kapan memakai tiap mode
Decision rule
SSR membuat HTML pada setiap request. Mode ini cocok untuk dashboard pengguna, status pesanan, izin akses, harga privat, dan halaman yang bergantung pada cookie.
SSG membuat HTML saat build. Ini cocok untuk dokumentasi, halaman bantuan, halaman kebijakan, landing page stabil, dan tutorial yang jarang berubah.
ISR memberi kecepatan statis tetapi bisa meregenerasi halaman setelah interval tertentu. Ini cocok untuk blog, detail produk, ranking publik, dan artikel perbandingan.
Tes utamanya adalah cacheability. Jika HTML yang sama aman untuk banyak pengunjung, pilih SSG atau ISR. Jika hasilnya berbeda per request, pilih SSR.
Useful internal references: Next.js metadata, PageSpeed checker, meta tag checker, reading time calculator, image format guide.
Practical selection table
| Situation | Prefer | Reason |
|---|---|---|
| Stable public page | SSG | fastest delivery and simple cache |
| Public content with occasional updates | ISR | static speed plus controlled refresh |
| User-specific page | SSR | request data and permissions matter |
| Real-time widget | SSR or client fetch | freshness matters more than build speed |
Operating checklist
Check whether the HTML can be cached, how often the source data changes, whether build time grows with content count, and whether SEO metadata is available in the first response. Also check images, fonts and third-party scripts because they can damage performance even when the rendering mode is correct.
FAQ
Apakah SSR selalu lebih baik untuk SEO?
Tidak. SSG dan ISR juga mengirim HTML lengkap dan sering lebih cepat untuk konten publik.
Apa pilihan untuk blog?
SSG untuk blog kecil yang stabil; ISR untuk banyak halaman atau update rutin.