Perbedaan Antara SSR dan CSR

Di artikel ini, kita akan membahas perbedaan antara server-side-rendering (SSR) dan client-site-rendering (CSR). Mengetahui perbedaan kedua hal tersebut sangatlah penting, terutama ketika kita men-develop di web. Pertama-tama, yang akan kita bahas adalah definisi dari SSR dan CSR, lalu kita akan membahas perbedaan antara keduanya, dan terakhir, keadaan seperti apa yang cocok untuk masing-masing.

Apa itu SSR?

SSR adalah singkatan dari server-side-rendering. Kemampuan aplikasi web untuk me-render halaman web di server alih-alih me-render-nya di browser. Ketika halaman web sampai di client, sudah sepenuhnya ter-render. Itu karena server-side telah me-render secara penuh sebelum halaman web dikirim oleh server ke client. Ketika request diterima oleh server-side, semuanya akan di compile, jika konten dari halaman web membutuhkan data dari database, server akan melakukanya, lalu me-render datanya ke halaman yang sudah dirender sepenuhnya dan mengrimnya ke client sebagai response. Sekarang, bagaimana jika client menavigasi ke route yang berbeda? Setiap client navigasi ke route yang berbeda, server akan melakukan pekerjaan itu lagi.

Apa itu CSR?

CSR adalah singkatan dari client-side-rendering. Overall, CSR adalah kebalikan dari SSR. Jika SSR me-render halaman web di server-side, CSR me-render halaman web di client-side. Ketika request diterima oleh server, server tidak akan me-render halaman web, sebaliknya, server akan mengirim satu halaman yang akan menjadi kerangka halaman ke client. Server mengirim halaman web dengan file javascript. Lalu, javascript akan mengubah halaman web menjadi halaman yang di-render sepenuhnya. Jadi dimana konten nya? Bagaimana jika halaman web membutuhkan data dari database? Kemudian, API masuk. Client akan membuat sebuah request ke API untuk mengambil data dan me-render-nya ke halaman web. Terakhir, bagaimana jika client navigasi ke route yang berbeda? Apakah server akan mengirim halaman web lagi? Server tidak akan mengirim halaman web lagi, sebagai gantinya, client akan me-render ulang halaman web sesuai route yang diminta client. Jadi halaman web yang digunakan, selalu halaman yang sama dengan request pertama.

Perbedaan

Perbedaan utama antara SSR dan CSR adalah dimana halaman web di-render. SSR me-render halaman web di server-side dan CSR me-render halaman web di client-side. Client-side mengatur route secara dinamis tanpa perlu me-refresh halaman setiap client request route yang beda.

Menggunakan SSR

Jika SEO prioritas kita, biasanya ketika kita membuat sebuah situs blog dan kita ingin setiap orang yang mencari di google membuka website kita, maka SSR adalah pilihan kita.
Jika website mu membutuhkan initial loading yang cepat.
Jika konten dari website kita tidak membutuhkan banyak interaksi pengguna.