Perbedaan client side rendering dan server side rendering

Judul kali ini akan diangkat semudah mungkin dengan mengurangi istilah-istilah yang terlalu teknikal, Untuk bahasannya Saya pecah ke beberapa bagian:

Sejarah singkat
Apa itu Server Side Rendering (SSR)
Apa itu Client Side Rendering (CSR)
SSR vs CSR
Kapan tepatnya memilih CSR dan kapan SSR?
Penutup

Sejarah singkat

Istilah server rendering dan client side rendering baru Saya dengar ketika era Single Page Application (SPA) / aplikasi 1 halaman framework banyak diadopsi. Padahal ini sudah ada sejak era web server ada. Bahasa program seperti PHP, Ruby dan Java adalah bahasa utama yang digunakan untuk server render.

Server Side Rendering (SSR)

Apabila Kalian pernah menulis kode di PHP kalian bisa menulis kode HTML langsung di PHP. Sebenarnya Kalian sudah mempraktekkan server side rendering 😀. Katakanlah Kalian menulisnya di footer.php seperti ini:

<div class="site-info">
  <div class="site-name">
    &copy; 2016-<?php echo date( 'Y' ); ?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
  </div>
</div>

Dan ketika akses lewat browser dan di render maka proses render berada diawal di sisi server hingga menjadi 1 struktur HTML yang utuh, baru kemudian ditampilkan di browser.

Apabila kalian lihat di page source browser maka tampilannya seperti ini:

<div class="site-info">
  <div class="site-name">
    &copy; 2016-2021
    <a href="/">lanjutkoding.com</a>
  </div>
</div>

Singkatnya, aplikasi yang cukup memasukan input navigasi (URL) dan mengembalikan keseluruhan struktur HTML dalam 1 halaman. Browser (client) tidak mengetahui logika yang ada di server.

Client Side Rendering (CSR)

Kebalikannya, client side rendering memproses render setelah browser (client) menampilkan (render) halaman awal struktur HTML. Biasanya proses ini dilakukan oleh JavaScript dan membuat halaman webnya interaktif.

Kita buat hal yang sama seperti implementasi sebelumnya. Katakanlah kita membuat 2 file, index.html dan index.js.

index.html

<div class="site-info">
  <div class="site-name">
  </div>
</div>

index.js

let siteName = document.querySelector(".site-name");
let anchor = document.createElement("a");
anchor.href = "/";
anchor.textContent = "lanjutkoding.com";
siteName.append("2016-" + new Date().getFullYear() + " ", anchor);

Apabila Kalian lihat di page source browser maka tampilannya seperti ini

<div class="site-info">
  <div class="site-name">
</div>
</div>

Strukturnya sama dengan apa yang kita tulis di index.html. Kalian bisa langsung cek contohnya di sandbox.

Singkatnya, Aplikasi 1 halaman (SPA) yang meletakkan semua logika, rendering di sisi browser (client). Berinteraksi langsung dengan DOM (Document Object Model). Biasanya hanya terdiri dari HTML, CSS, dan JavaScript.

SSR vs CSR

Bicara teknologi pasti ada kelebihan dan kekurangan.

Kelebihan SSR

Search Engine Optimization (SEO), Search engine mudah untuk merambah web dan mengindeks halaman.
Social Media Optimization, Tampilan preview halaman web berdasarkan open graph saat di share.
Performa yang cepat saat halaman sudah sepenuhnya tampil (loaded) karena render sudah dilakukan di sisi server tanpa ada loading spinner.

Kekurangan SSR

Request 1 halaman penuh di setiap navigasinya.
Tidak fleksibel, Saat aplikasi menjadi besar butuh banyak optimasi disisi server.
Biaya server dan pemeliharaan lumayan besar.
Tidak interaktif.
Beban di sisi server

Kelebihan CSR

Request cukup 1 halaman diawal, Selanjutnya hanya manipulasi DOM.
Fleksible, mudah untuk dioptimasi.
Biaya server dan pemeliharaan murah.
Interaktif

Kekurangan CSR

Search Engine Optimization, Search engine susah untuk merambah web dan mengindeks halaman. Butuh langkah ekstra.
Social Media Optimization, tidak ada tampilan preview halaman web berdasarkan open graph saat di share. Butuh langkah ekstra.
Ukuran file JavaScript yang diunduh dan dieksekusi berpengaruh pada performa.

Kapan tepatnya memilih CSR dan kapan SSR?

Gunakan CSR saat:

Ketika SEO bukan prioritas
Jika web memiliki banyak interaksi. contoh chat.
Jika Kalian sedang membangun aplikasi web, contohnya: Admin dashboard.

Gunakan SSR saat:

SEO adalah prioritas. seperti web blog atau berita.
Tidak butuh banyak interaksi.
Jika kalian membutuhkan tampilan web secara keseluruhan diawal lebih cepat. tanpa ada loading spinner.

Penutup

Apakah keduanya bisa dikombinasikan? Bisa, contohnya WordPress, salah satu fungsi unggah gambar, agar interaktif WordPress munggunakan Ajax JavaScript dan ini terjadi di sisi client bukan di server.

Selain itu, teknologi baru banyak bermunculan penggabungan dari keduanya. Seperti Next.js, Razzle, Nuxt.js.

Saya cukupkan tulisan kali ini. Terima kasih sudah membaca tulisan ini sampai selesai, Tulisan ini saya dedikasikan untuk Indonesia lebih baik. Semoga bermanfaat dan yuk lanjut kodingnya!

Apabila ada pertanyaan atau ingin kolaborasi bisa kontak langsung di telegram.