Digital Transformation
CSR (Client-Side Rendering)
CSR adalah strategi rendering web di mana browser pengguna yang menyusun halaman dari kerangka HTML kosong dan bundle JavaScript. CSR cocok untuk dashboard, kurang ideal untuk SEO publik.
TL;DR: CSR atau Client-Side Rendering adalah cara browser menyusun seluruh halaman dengan menjalankan JavaScript, bukan menerima HTML jadi dari server. CSR ringan untuk server tapi membuat halaman pertama lambat tampil dan sulit diindeks mesin pencari, sehingga jarang dipakai untuk halaman SEO publik.
Apa itu Client-Side Rendering?
CSR adalah pendekatan rendering di mana server hanya mengirim HTML kosong berisi pengait JavaScript, lalu browser yang mengunduh data dan membangun tampilan. Framework klasik berbasis CSR antara lain Create React App, Vue CLI, dan Single Page Application Angular versi lama. Halaman terlihat kosong sampai JavaScript selesai diunduh dan dieksekusi.
Bandingkan dengan SSR yang mengirim HTML matang dari server, atau SSG yang menyiapkan HTML saat build. CSR memindahkan beban render ke perangkat pengguna, sehingga server lebih hemat namun ponsel kelas menengah harus bekerja lebih keras.
Kapan CSR Tepat dan Kapan Tidak
| Kondisi | CSR Layak? | Alasan |
|---|---|---|
| Dashboard internal di balik login | Ya | SEO tidak relevan, performa awal bisa ditolerir |
| Aplikasi tabel data interaktif | Ya | Render ulang sering, data dinamis |
| Landing page produk | Tidak | Butuh FCP cepat dan dapat diindeks Google |
| Artikel blog atau glosarium | Tidak | SEO dan AI Search butuh HTML siap baca |
| Halaman checkout | Sebagian | Kombinasi SSR untuk shell, CSR untuk interaksi |
Dari pengalaman membangun Atmo sebagai LMS, area kursus internal kami serahkan ke CSR karena sudah di balik login dan butuh banyak interaksi tabel. Tapi halaman pemasaran kursus tetap memakai SSG agar Core Web Vitals tidak rontok.
Kekurangan Utama CSR
Pertama, FCP lambat karena pengguna melihat layar putih sampai JavaScript selesai. Kedua, mesin pencari dan AI Search lebih sulit memproses konten yang dibangun setelah load. Ketiga, perangkat lemah dengan CPU terbatas akan terasa berat. Keempat, ketergantungan pada bundle JS yang besar membuat update sering memicu cache miss.
Kenapa Penting?
Buat marketer dan pemilik bisnis di Indonesia, memilih strategi rendering yang tepat menentukan apakah halaman bisa muncul di pencarian Google atau hanya hidup di balik login. Salah pilih CSR untuk landing page bisa membuat trafik organik nol, walau aplikasinya canggih.
Pertanyaan Umum
Apakah CSR sudah ditinggalkan?
Tidak. CSR tetap ideal untuk aplikasi internal dan dashboard. Yang berkurang adalah pemakaian CSR untuk halaman publik yang butuh SEO.
Apa beda CSR dan SPA?
SPA (Single Page Application) adalah arsitektur aplikasi satu halaman, biasanya memakai CSR. Tapi SPA modern juga bisa pakai SSR seperti Next.js, jadi kedua istilah tidak identik.
Istilah Terkait