Client-side-rendering (CSR) vs Server-side-rendering (SSR)

Restu Arif Priyono
suarsocial
Published in
3 min readDec 10, 2018

--

Photo by Hal Gatewood on Unsplash

Diskusi terbaru kami di Suarsocial adalah mengenai CSR, atau client-side-rendering, dengan SSR, atau server-side-rendering. Berikut ini adalah bagaimana kami mempertimbangkan hal-hal yang kami rasa penting untuk menjadi sebuah keputusan.

Apa itu CSR?

Development website modern saat ini banyak sekali bergantung pada penggunaan teknologi Javascript. Teknologi ini memungkinkan developer untuk melakukan rendering, atau menghasilkan tampilan website, bahkan sebelum data sampai ke browser komputer atau ponsel kita.

Rendering yang dilakukan sebelum datanya sampai ke browser ini menjadi sesuatu yang penting. Karena, menjadikan pengalaman membuka sebuah website terasa lebih cepat — ketika semua script sudah di-download — dan dinamis. Zaman sekarang, pengalaman ini memang diperhitungkan dengan seksama. Karena, menurut data terbaru yang dikumpulkan google, 53% dari orang Indonesia cabut dari sebuah website kalau tidak terbuka dalam jangka waktu 3 detik.

Javascript memungkinkan sebuah website untuk memenuhi demand orang Indonesia ini. Namun, karena teknologi ini termasuk dalam kategori baru, jadi masih banyak kekurangannya. Hal yang ingin dibahas dalam tulisan ini dan juga oleh kami adalah bahwa meskipun Javascript memberikan kemampuan rendering yang cepat pada tampilan website, ternyata konten website yang dihasilkan sulit terindeks oleh mesin pencari, misalnya oleh Google.

Hal ini disebabkan kode default website yang menggunakan teknologi ini, misalnya react js, menghasilkan halaman kosong. Berikut ini adalah contoh tampilan yang diindeks oleh google saat mengunjungi website kita:

<!DOCTYPE html><html lang=”en”> <head> <meta charset=”utf-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1"> <link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico”> <title>React App</title> </head> <body> <div id=”root”></div> </body></html>

Google juga menyadari terkait issue ini dan berusaha untuk memberikan yang terbaik, karena Google pun sebenarnya mendukung penggunaan website seperti ini. Saat ini, Google membutuhkan dua kali indexing atau kunjungan untuk website semacam ini. Kunjungan pertama, Google tidak akan melihat konten yang kita harapkan. Kemudian, Google menyimpannya secara khusus untuk kemudian dikunjungi kembali dalam hitungan minggu untuk mendapatkan hasilnya. Hal ini tidak mengherankan melihat skala website yang harus diindeks google setiap harinya.

Dari sudut pandang bisnis, tentunya hal ini cukup merugikan, karena di zaman sekarang ini konten menjadi sebuah tools dan instrumen yang tepat bagi sebuah brand untuk masuk ke pasar dan mendapat tempat di kehidupan para konsumennya. Konten terlambat terdeliver, artinya uang terlambat terdeliver.

Apa itu SSR?

Berbeda dengan CSR, SSR memiliki mekanisme rendering yang dilakukan di server. Contoh teknologi yang menggunakan mekanisme ini adalah PHP, Java, dan sebagainya. Secara umum, website yang menggunakan teknologi ini cenderung lebih lambat. Namun, konten yang dihasilkan dapat terlihat secara langsung, sehingga lebih mudah diindeks mesin pencari.

Alternatif

Dengan mengetahui informasi ini, tidak terindeks oleh Google merupakan sesuatu yang kami hindari. Sehingga, kami dihadapkan pada tiga alternatif:

  1. Menggunakan wordpress yang sudah jelas mudah terindeks oleh Google, namun performanya lambat.
  2. Menggunakan ReactDomRenderer, yang artinya sebuah API react JS yang memungkinkan rendering dari sisi server. Namun, alternatif ini kami rasa cukup mahal untuk diimplementasikan, mengingat waktu dan tenaga kerja yang sangat terbatas.
  3. Menggunakan alternatif teknologi selain React JS.

Keputusan yang Diambil

Kami memutuskan untuk mengambil alternatif ketiga, yaitu dengan menggunakan alternatif teknologi selain React JS, namun tetap pada teknologi JavaScript, yaitu Ghost. Teknologi ini kami rasa tepat, karena tujuan pembuatan Ghost yang memang untuk menangani website yang berisikan konten, sehingga memikirkan sisi SEO-nya.

Pendiri Ghost sendiri sebenarnya adalah pendiri WordPress yang merasa tidak sesuai lagi dengan arah WordPress yang semakin tidak tentu, sehingga akhirnya dia menginisiasi platform baru yang lebih modern dan ramah SEO.

Terima kasih! Kamu sudah membaca sampai sini. Saya Restu Arif Priyono, saat ini sebagai CEO dari PT Techlab Solusi Indonesia yang sedang mengembangkan Techlab Institute, institusi pendidikan programmer, dan Suarsocial, platform stories dan crowdfunding bagi komunitas berbasis blockchain. Jika kamu ingin lebih mengetahui tentang produk kami lebih jauh, bisa hubungi saya di restu.arif@techlab.institute atau DM saya di Twitter Restu Arif Priyono.

--

--

Restu Arif Priyono
suarsocial

A tech enthusiast with background in Software Engineering and Business. Currently as a CEO of Techlab.