07 Jan 2025

Apa Itu Client Side Rendering?

Client Side Rendering (CSR) adalah teknik merender website langsung di browser menggunakan JavaScript, memungkinkan pembuatan Single Page Application (SPA) yang dinamis dan interaktif. CSR memiliki kelebihan seperti kecepatan, fleksibilitas, dan bisa di-host di layanan gratis, tetapi kurang optimal untuk SEO dan SMO serta memerlukan file JavaScript besar yang memengaruhi performa awal.

thumbnail

Hai coder, pada artikel ini saya ingin menjelasakan tentang Client Side Rendering (CSR) yang saat ini banyak sekali digunakan pada framework frontend untuk membuat website modern, seperti react, vuejs, angular, svelte, dll.

lalu apa itu itu Client Side Rendering dan apa kelebihan dan kekurangannya?

#Apa Itu Client Side Rendering?

Client Side Rendering adalah teknik untuk merender sebuah website yang dilakukan secara langsung didalam browsernya menggunakan bantuan bahasa pemrogramman javascript.

Dengan menggunakan Client Side Rendering (CSR) memungkinkan untuk membuat website yang hanya membutuhkan 1 page yang dinamis dan interaktif atau istilah kerennya adalah Single Page Application (SPA), teknik SPA inilah yang digunakan oleh framework seperti react, vuejs, angular, svelte, dll.

Namun walaupun begitu Client Side Rendering (CSR) juga memiliki Kelebihan dan Kekurangan antara lain:

#Kelebihan

  • Website menjadi cepat karena hanya membutuhkan 1 halaman html dan selanjutnya hanya memanipulasi DOM mengunakan javascript
  • Website lebih interaktif, flexible, dan mudah dioptimasi
  • Karena tidak membutuhkan server, oleh karena itu website bisa di hosting di layanan gratis sperti netlify, vercel, github pages, dll.

#Kekurangan

  • Tidak Bagus untuk Search Engine Optimization (SEO), karena untuk SEO, Search Engine memerlukan halaman awal website yang sudah siap ditampilkan, sedangkan CSR membutuhkan javascript untuk menampikan website.
  • Tidak Bagus untuk Social Media Optimization (SMO), saat men-share website pada media social, hasil share tidak dapat menampilkan preview halaman website. memerlukan langkah ekstra seperti menambahkan meta tag pada laman website.
  • Ukuran file javacript terbilang cukup besar, yang dapat mempengaruhi performa website (hanya saat website terbuka untuk pertama kali)

#Penutup

semoga bermanfaat 👍