Client-Side Rendering
CSR mengirimkan HTML minimal ke browser, lalu JavaScript mengambil data dan merender konten di sisi klien. Populer dengan React, Vue, dan Angular SPA.
Server-Side Rendering
SSR menghasilkan HTML penuh di server sebelum dikirim ke browser. Framework seperti Next.js, Nuxt.js, dan SvelteKit mendukung SSR dengan mudah.
Perbandingan
- Time to First Byte: SSR lebih cepat
- Time to Interactive: CSR bisa lebih cepat setelah aset ter-cache
- SEO: SSR unggul karena konten tersedia saat crawl
- Server cost: SSR membutuhkan lebih banyak komputasi server
Hybrid Approach
Framework modern seperti Next.js menawarkan ISR (Incremental Static Regeneration) yang menggabungkan keunggulan SSR dan static generation, menghasilkan performa optimal.
Kesimpulan
Pilih SSR untuk konten yang butuh SEO dan load time cepat, CSR untuk aplikasi dashboard yang interaktif dan kompleks.