CSR, SSR, SSG, ISR: Cara Memilih Paradigma Rendering yang Tepat

Kerangka kerja web modern menawarkan banyak opsi tentang cara mengirimkan situs atau aplikasi dari server ke klien. Anda dapat membuat HTML di kedua sisi, atau melakukan pra-render untuk distribusi berkecepatan tinggi melalui jaringan pengiriman konten.

Memutuskan cara menyusun situs atau aplikasi bergantung pada beberapa faktor berbeda. Anda perlu mengetahui bagaimana pengunjung akan mengakses situs atau aplikasi Anda. Anda harus memahami apakah kecepatan memuat lebih penting pada pemuatan awal atau navigasi selanjutnya. Pertimbangkan juga seberapa sering Anda akan memperbarui situs.

Ingatlah semua faktor ini untuk menimbang pro dan kontra dari setiap paradigma rendering.

Merender Situs Web dengan Lebih dari Satu Cara

Rendering situs web mengacu pada proses dimana situs web ditampilkan di browser web. Ada banyak cara berbeda untuk mendekati proses mengonversi data mentah menjadi HTML terformat di layar pengguna.

Setiap metode memiliki pro dan kontra, dan mengetahui kelebihan dan kekurangan masing-masing dapat membantu Anda memilih yang tepat untuk situs Anda.

CSR: Peramban Mengambil alih

CSR adalah singkatan dari Client Side Rendering. Saat Anda merender sisi klien aplikasi atau situs, server hanya meneruskan sedikit atau tanpa HTML kecuali sepotong kecil kode boilerplate. Halaman kemudian meminta data apa pun yang diperlukan dari server, setelah peristiwa pemuatan halaman, melalui permintaan AJAX.

Saat aplikasi atau halaman merender sisi klien, server meneruskan skrip ke klien yang akan menghasilkan HTML di browser klien. Ini memungkinkan aplikasi satu halaman yang tidak menyegarkan browser saat Anda berinteraksi dengannya.

Aplikasi CSR sering kali dimuat dengan cepat di navigasi, tetapi awalnya mungkin lambat dimuat. Kecepatannya akan sangat bergantung pada kerangka kerja yang Anda pilih untuk melakukan rendering dan berapa banyak pustaka tambahan dan add-on yang Anda gunakan. Paling framework JavaScript modern yang populer termasuk pilihan untuk CSR.

Halaman dan aplikasi yang sepenuhnya dirender sisi klien mengalami ketidakmampuan untuk menavigasi langsung ke halaman tertentu menggunakan URL. Saat aplikasi yang dirender sisi klien pertama kali dimulai, terlepas dari URL yang dimasukkan, itu akan mengarah ke titik awal yang sama.

SSR: Merender di Server Pusat

SSR adalah singkatan dari Server Side Rendering. Ini adalah bentuk rendering halaman web yang jauh lebih tradisional di mana situs menghasilkan HTML berdasarkan template dan mengirim campuran HTML, stylesheet, dan skrip ke klien. Sebagian besar dari kerangka web backend paling populer termasuk dalam kategori ini.

Aplikasi dan situs yang Dirender Sisi Server cenderung memiliki pemuatan awal yang lebih cepat, tetapi setiap navigasi berikutnya akan memerlukan penyegaran penuh. Ini berarti bahwa tidak hanya membutuhkan waktu lebih lama, tetapi pengembang yang bekerja dengan SSR perlu mempertimbangkan manajemen sesi.

Sisi positif terbesar dari situs dan aplikasi yang dihasilkan SSR adalah konsistensi navigasi jalur. Pengguna yang memasuki jalur tertentu akan dibawa langsung ke halaman yang diminta. Beberapa kerangka kerja mengelola pengalihan pengguna dari halaman ke halaman dalam aplikasi, namun pengguna mungkin tidak dapat mengakses halaman yang mereka inginkan pada awalnya.

Banyak kerangka kerja modern menawarkan solusi campuran yang dimulai dengan menyajikan halaman yang dirender server ke klien. Setelah halaman dimuat, peristiwa yang dikenal sebagai hidrasi terjadi di mana peristiwa skrip sisi klien dilampirkan ke kontrol halaman. Mulai sekarang, klien menangani navigasi apa pun.

Dinamika campuran menawarkan kemampuan bagi pengguna untuk langsung membuka halaman mana pun dalam aplikasi, sambil tetap menerima kecepatan dan kelancaran aplikasi satu halaman. Next.js menawarkan beberapa paradigma rendering, seperti halnya Nuxt.js dan Sveltekit.

SSG: Rendering yang Diminimalkan

SSG, atau Pembuatan Situs Statis, melewati kebutuhan untuk membuat HTML di sisi klien atau server. Sebagai gantinya, situs dan aplikasi bergaya SSG melakukan pra-kompilasi setiap halaman yang mereka perlukan, dan mengirimkan hasilnya ke CDN untuk pengiriman cepat.

Ini adalah metode yang sangat efektif untuk menyajikan halaman web dengan sangat cepat. Hasilnya biasanya dikompilasi dalam bundel sederhana yang berisi semua HTML dan stylesheet yang diperlukan untuk setiap halaman. Bundel ini disimpan sekompak mungkin untuk memastikan bahwa pengguna akan menerimanya secepat mungkin.

Situs SSG cenderung menawarkan kecepatan pemuatan yang luar biasa cepat, meskipun membutuhkan penyegaran untuk setiap navigasi. Kelemahan utama situs statis, bagaimanapun, adalah kurangnya fleksibilitas. Sistem yang sangat dinamis seperti aplikasi media sosial atau platform e-niaga yang kompleks akan membutuhkan lebih banyak perubahan daripada yang dapat ditangani dengan mudah oleh SSG.

Banyak situs statis juga memerlukan jumlah overhead yang lebih besar untuk diubah karena setiap perubahan baru perlu dikompilasi secara independen. Hal ini membuat perenderan gaya SSG menjadi pilihan yang buruk untuk situs yang berubah dengan cepat, seperti etalase digital dengan inventaris yang berubah dengan cepat atau aplikasi media sosial.

ISR: Sedikit dari Segalanya

Mudah jenis rendering yang paling kompleks, tetapi juga yang paling bermanfaat, ISR adalah singkatan dari Regenerasi Statis Inkremental. ISR memadukan kecepatan dan skalabilitas situs yang dibuat secara statis dengan reaktivitas aplikasi bergaya SSR dan CSR.

Ketika ada halaman yang diminta di halaman atau aplikasi bergaya ISR, server pertama-tama akan memeriksa untuk melihat apakah ada versi cache halaman yang belum kedaluwarsa. Jika ada, server akan segera menyajikan halaman yang di-cache.

Jika versi halaman yang di-cache tidak ada, atau waktu yang cukup telah berlalu sejak pembuatannya, server akan membuat versi baru. Versi baru ini akan diteruskan ke klien dan di-cache untuk penggunaan di masa mendatang.

Jenis perenderan ini lebih rumit untuk disiapkan, tetapi mengotomatiskan sebagian besar masalah yang biasanya dialami situs SSG. Hal ini memungkinkan aplikasi menawarkan kecepatan dan keandalan aplikasi yang dibuat secara statis sambil mengotomatiskan overhead tambahan.

Beberapa framework modern sudah menawarkan opsi rendering gaya ISR. Banyak lagi yang memiliki dukungan untuk generasi inkremental dalam pembangunan. Sebagian besar kerangka kerja utama akan segera mendukung rendering ISR jika belum.

Jenis Rendering Mana yang Terbaik?

Ada beberapa cara untuk merender situs web atau aplikasi. Masing-masing dari keempat jenis rendering ini memiliki banyak variasi. Tidak ada satu jenis perenderan yang ideal untuk semua proyek, dan jenis yang Anda pilih akan bergantung pada apa yang paling penting di situs atau aplikasi Anda.

Saat memilih paradigma rendering untuk proyek Anda, penting untuk mempertimbangkan kecepatan, bagaimana audiens Anda akan menggunakan proyek Anda, dan seberapa sering situs akan berubah. Ini akan menjadi prinsip utama yang akan membantu Anda memutuskan cara terbaik untuk menyusun situs atau aplikasi Anda.