Client-Side Rendering (CSR)
Client-Side Rendering (CSR) adalah teknik rendering website di mana server hanya mengirimkan template HTML kosong yang sangat sederhana dan file JavaScript besar ke browser. Browser pengunjung-lah yang bertugas memproses JavaScript tersebut untuk menyusun tampilan antarmuka web secara dinamis.
1. Analogi Membeli Mie Instan Mentah
Bagaimana browser memuat halaman web dengan metode CSR?
Bandingkan dengan **Server-Side Rendering (SSR)** yang diibaratkan seperti makan mi di warung: koki memasakkan mi tersebut dan menyajikannya matang langsung di mangkok siap makan (Server mengirim file HTML yang sudah jadi).
Sedangkan **Client-Side Rendering (CSR)** diibaratkan seperti membeli mi instan mentah di toko kelontong (Server hanya memberi file HTML kosong + file JS). Anda harus membawanya pulang, menyalakan kompor, memasak air, dan merebus mi tersebut di dapur Anda sendiri (browser korban memproses JS untuk membentuk UI halaman web).
Sedangkan **Client-Side Rendering (CSR)** diibaratkan seperti membeli mi instan mentah di toko kelontong (Server hanya memberi file HTML kosong + file JS). Anda harus membawanya pulang, menyalakan kompor, memasak air, dan merebus mi tersebut di dapur Anda sendiri (browser korban memproses JS untuk membentuk UI halaman web).
2. Kelebihan dan Kekurangan CSR
- Kelebihan (Interaksi Mulus): Setelah website selesai dimuat pertama kali, berpindah halaman terasa instan tanpa ada kedipan layar loading putih karena tidak ada request HTML baru ke server.
- Kekurangan (Loading Awal & SEO): Pengguna harus menunggu file JS terdownload penuh sebelum melihat visual web (blank screen sementara). Mesin pencari (seperti Google Search Bot) juga kesulitan membaca halaman karena tidak menemukan teks di file HTML mentah yang dikirim server.
?
Uji Pemahaman Mandiri
Apakah kelemahan terbesar dari metode Client-Side Rendering (CSR) dibandingkan Server-Side Rendering (SSR)?
A. Tidak bisa menggunakan CSS untuk styling layout
B. Loading halaman pertama kali cenderung lebih lambat dan memiliki tantangan di sisi SEO
C. Aplikasi web tidak akan bisa dibuka melalui smartphone
