Apa itu React Server Side Rendering?

Hallo Teman Koding… Kali ini saya akan coba menulis artikel yang berbeda dari sebelum-sebelumnya. Yups… Kali ini saya akan membahas seputar React. Bagi Teman Koding yang ingin belajar ataupun ingin mengasah lagi kemampuannya, disini ada beberapa artikel react yang mungkin bisa dijadikan referensi buat teman-teman sekalian.

Pada artikel ini saya akan mencoba membahas tentang Server Side Rendering pada ReactJs.

Server Side Rendering atau biasa di sebut SSR adalah teknik untuk merender Single Page Application atau biasa disebut SPA yang akan dirender di sisi server lalu semua hasil render tersebut dikirimkan ke sisi klien. Jika di ilustrasikan cara kerja server side rendering akan seperti gambar berikut

1. Browser menerima response dari server sekaligus element hasil render dari server.
2. Browser kemudian mendownload file-file yang diload(css, js, dll). Pada saat ini element sudah terender.
3. Selanjutnya Browser akan mengeksekusi react. Pada saat ini element sudah terender juga.
4. Terakhir, semua element tersebut sudah bisa berinteraksi dengan user.

Kekurangan dan Kelebihan React Server Side Rendering

Semua hal di dunia ini pasti ada kekurangan dan kelebihannya, tidak terkecuali dengan react server side rendering. ada beberapa kekurangan dan kelebihan yang bisa jadi pertimbangan buat teman koding untuk menerapkannya pada aplikasi react teman-teman.

Kelebihan

Search Engine Optimization
React Server Side Rendering membantu search engine melakukan crawling konten website kita. tetapi khusus untuk google kita bisa membuat google melakukan crawling konten tanpa menggunakan react server side rendering. Crawling dari search engine pada dasarnya tidak mendukung javascript. Aplikasi yang kita build dengan react akan di crawl oleh search engine sebagai halaman kosong.

Meningkatkan Performance
Setelah browser mendownload html dan css, konten akan langsung ditampilkan tanpa harus menunggu browser mendownload javascript atau react melakukan render pada konten. Sehingga jika ukuran javascript kita sangat besar itu tidak akan memakan waktu untuk menampilkannya.

Kekurangan

Menurunkan Waktu Response Server
Pada saat menggunakan server side rendering, server harus melakukan proses extrak markup yang kita buat di react, sehingga untuk memberikan response membutuhkan waktu sedikit lebih lama. Jika server dalam kondisi banyak trafik maka akan terasa semakin lama.

Complexity
Dalam hal ini, yang dimaksud adalah dengan menggunakan server side rendering akan banyak improvement yang diperlukan untuk pengembanga sistem, sehingga akan membutuhkan waktu yang lebih banyak. Misalkan pengecekan jika data diambil dari Database dan Static data.

Salah satu Framework yang digunakan untuk membuat react server side rendering adalah Next.Js

Next.Js sendiri merupakan salah satu framework Node.Js yang cukup populer untuk membuat server side rendering dengan mudah (tergantung pengetahuan teman koding tentang React.Js). Pada artikel berikutnya kita akan membahas tentang Next.js dan mencobanya.

Seperti itulah sedikit gambaran tentang React Server Side Redering. Ada beberapa pertimbangan dalam mengimplementasikan React Server Side Rendering ke dalam Project teman-teman. Jika yang dibutuhkan adalah performace terbaik dan SEO di Search Engine selain google, maka React Server Side sangat disarankan untuk di implementasikan pada project teman-teman. Hanya saja kita harus mempunyai extra resouce pada server teman-teman.

Namun, jika ingin mengimplementasikan React Server Side Rendering hanya karena terlihat keren dan resource server teman-teman terbatas, saya sarankan tidak menggunakan server side rendering, alih-alih berniat untuk memperbaiki performance, yang ada sebaliknya yang akan di dapat.

Sekian Pembahasan saya tentang React server side rendering, semoga bermanfaat bagi Teman Koding semuanya. mohon maaf apabila ada kesalahan penulisan atau pun kesalahan definisi. Bisa kita diskusikan di Kolom komentar. Terima Kasih…