Static Site Generation (SSG)

TL;DR: Static Site Generation (SSG) adalah pendekatan rendering yang membangun setiap halaman menjadi file HTML statis pada tahap build. Hasilnya bisa disajikan langsung dari CDN tanpa proses server, sehingga performa sangat cepat dan biaya hosting rendah. SSG cocok untuk website yang kontennya jarang berubah seperti landing page, blog, dan portfolio.

Apa itu Static Site Generation?

SSG adalah salah satu strategi rendering halaman web di mana semua HTML, CSS, dan asset dihasilkan satu kali saat proses build, lalu disajikan apa adanya saat diakses pengguna. Framework modern seperti Next.js, Astro, dan Hugo mendukung SSG sebagai mode default. Dalam konteks website bisnis, SSG sering dikombinasikan dengan ISR untuk mendapatkan kecepatan halaman statis dengan kemampuan refresh konten berkala.

Cara Kerja SSG

Saat developer menjalankan perintah build, framework membaca data (dari Markdown, CMS, atau database), merender setiap halaman menjadi HTML, dan menyimpannya sebagai file. File-file ini lalu di-deploy ke CDN yang mendistribusikan halaman ke server terdekat dari pengguna. Karena tidak ada query database atau pemrosesan server saat halaman diakses, waktu Time to First Byte sangat singkat, dan skor Core Web Vitals cenderung lebih mudah dijaga di zona hijau.

Kenapa Penting?

Untuk pelaku UMKM dan personal brand di Indonesia, SSG menawarkan tiga keuntungan utama. Pertama, biaya hosting lebih murah karena bisa dilayani dari static hosting gratis atau berbiaya rendah seperti Vercel, Netlify, dan Cloudflare Pages. Kedua, performa lebih konsisten, terutama bagi pengunjung di area dengan koneksi internet tidak merata. Ketiga, dari sisi SEO, halaman yang cepat dan stabil mendapat sinyal positif dari Google. Dokumentasi resmi Next.js Static Generation menjelaskan lebih dalam soal trade-off SSG dibanding mode rendering lain.

Pertanyaan Umum

Apakah website e-commerce cocok pakai SSG?

Sebagian. Halaman produk dan kategori yang stabil bisa di-SSG, tapi cart dan checkout butuh data real-time. Kombinasi SSG plus client-side fetching adalah pola umum.

Apa bedanya SSG dan SSR?

SSG membangun HTML saat build dan menyajikan file statis. SSR (Server-Side Rendering) membangun HTML setiap kali ada request, sehingga konten lebih dinamis tetapi server lebih dibebani.