Server Side Rendering vs Client Side Rendering

Pada artikel kali ini saya akan membahas Server Side Rendering (SSR) vs Client Side Rendering (CSR). Sangat penting untuk memahami perbedaan antara keduanya agar kita bisa memutuskan apakah menggunakan SSR atau CSR pada project-project yang akan kita buat.

Server Side Rendering

Cara kerja SSR adalah ketika user melakukan request ke server, maka server akan generate HTML yang dilengkapi dengan kontennya. Contohnya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Server Side Rendering</title>
</head>
<body>
  <p>Konten 1</p>
  <p>Konten 2</p>
  <p>Konten 3</p>
  <p>Konten 4</p>
  <p>Konten 5</p>
</body>
</html>

Kelebihan

1. Search Engine Optimization (SEO) Friendly

Server mengembalikan HTML dengan kontennya sehingga crawler bisa bekerja dengan baik.

2. First Contentful Paint (FCP) Lebih Optimal

Bisa menentukan meta tag untuk Open Graph (OG). Contohnya:

og:image.
og:description.
Dan lainnya.

Kekurangan

1. Meningkatkan Time to First Byte (TTFB)

TTFB akan meningkat karena server membutuhkan waktu untuk generate konten HTML.

2. Beban Server Lebih Berat

Kalau traffic nya tinggi akan memberatkan server. Butuh effort tambahan untuk mengatasinya.

3. Biaya Lebih Mahal

Client Side Rendering

Cara kerja CSR adalah ketika user melakukan request ke server, maka server akan mengembalikan HTML yang berisi script tag untuk memuat konten website. Contohnya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Client Side Rendering</title>

  <script type="module" crossorigin src="/assets/index.0e1af9a0.js"></script>
  <link rel="stylesheet" href="/assets/index.3fcfd616.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>

Kelebihan

1. Beban Server Lebih Ringan

Server hanya mengembalikan static HTML sehingga tidak ada waktu yang dibutuhkan untuk generate HTML. Proses routing akan dilakukan secara CSR, maka user tidak akan melakukan request ke server pada saat melakukan pindah halaman.

2. TTFB Lebih Optimal

3. Biaya Lebih Murah

Kekurangan

1. Tidak SEO Friendly

Dikarenakan proses memuat kontennya melalui JavaScript, sehingga susah bagi crawler untuk bekerja.

2. Meningkatkan First Contentful Paint (FCP)

Dikarenakan client membutuhkan waktu untuk memuat file JavaScript, maka FCP akan meningkat.

Kapan Pakai SSR atau CSR?

Pakai SSR kalau:

Butuh SEO.
Butuh load awal lebih cepat.
Contohnya: e-Commerce atau Blog.

Pakai CSR kalau:

Tidak membutuhkan SEO.
Contohnya: Admin atau Website Internal.

Teknologi Baru

Pada saat sekarang ini sudah ada beberapa framework yang bisa menggabungkan SSR dan CSR seperti Next.js (React) dan Nuxt.js (Vue) sehingga bisa melakukan Hybrid Rendering dengan mudah.

Lebih lanjutnya kalian bisa baca di Next.js Pages.

Penutup

Terimakasih sudah membaca artikel Server Side Rendering (SSR) vs Client Side Rendering (CSR). Semoga artikel ini bisa bermanfaat bagi teman-teman.