SSR vs CSR: Alasan Mengapa React Saja Tidak Cukup

Mesin Penggambar Website: Di Mana Posisinya?

Dalam dunia *Frontend* modern, sebuah website tidak lagi dikirim dalam bentuk file HTML utuh. Website sering kali harus "dirakit" (di-render) menggunakan JavaScript. Pertanyaannya: Siapa yang bertugas merakitnya? Browser pengunjung, atau Komputer Server? Itulah yang membedakan CSR dan SSR.

CSR (Client-Side Rendering): Era React Biasa

Jika kamu membuat website menggunakan React Murni (Vite/Create React App), kamu menggunakan teknologi CSR. Servermu hanya mengirim file HTML yang kosong melompong (hanya berisi

) dan satu file JavaScript yang sangat berat.

• Cara Kerja: HP pengunjung harus mendownload file JS raksasa itu, lalu memprosesnya, dan merakit sendiri HTML-nya di dalam HP mereka.
• Kelebihan: Setelah selesai dimuat (loading pertama kali), website akan terasa sangat cepat berpindah halaman seperti aplikasi Native, tanpa *loading* putih berkedip.
• Kelemahan Fatal: Karena yang dikirim dari server adalah layar kosong, SEO (Google) akan buta! Robot Google sangat susah membaca website kosong. Selain itu, pengunjung dengan HP murahan atau sinyal jelek akan menatap layar putih kosong selama berdetik-detik sebelum file JS-nya selesai di-download.

SSR (Server-Side Rendering): Sang Penyelamat SEO

Untuk menyelesaikan masalah tersebut, diciptakanlah Framework tingkat lanjut seperti Next.js (untuk React) atau Nuxt.js (untuk Vue) yang menggunakan teknologi SSR.

• Cara Kerja: Ketika pengunjung meminta sebuah halaman, Komputer Server yang merakit HTML-nya hingga jadi sempurna (mengambil data dari database, mencetak warna, dll). Setelah HTML-nya jadi, barulah dikirim utuh ke HP pengunjung.
• Kelebihan Utama: SEO 100% sempurna! Saat robot Google datang, mereka langsung disuguhi teks yang sudah matang. Pengunjung juga langsung melihat konten sejak detik pertama tanpa layar putih (TTV / Time to View sangat cepat).
• Kelemahan: Servermu harus bekerja lebih keras untuk merakit halaman bagi setiap pengunjung yang datang, sehingga butuh biaya hosting yang lebih mahal.

Kesimpulan

Gunakan CSR (React murni) untuk aplikasi yang tersembunyi di balik layar Login (seperti Dasbor Admin atau Sistem Kasir) karena SEO tidak dibutuhkan di sana. Tapi, jika kamu membuat E-Commerce, Portal Berita, atau Blog yang wajib masuk halaman satu Google, kamu WAJIB menggunakan SSR (Next.js).