Dalam artikel ini, saya akan mencoba mengupas lebih rinci persoalan SSR dan CSR yang pernah saya bahas sebelumnya . Saya akan menjelaskan metode rendering dalam sebuah artikel.

Dalam artikel ini, saya akan mengulas artikel Rendering on Web karya Jason Miller dan Addy Osmani dan mencoba menjelaskan subjek ini.

Artikel ini berdasarkan pada artikel saya Di Mana Rendering HTML Harus Dilakukan? yang saya tulis beberapa waktu lalu. Dimulai dengan pertanyaan di postingan blog.

Saat mengembangkan situs web, ada kemungkinan melakukan logika dan merender di tempat berbeda. Bagaimana pengembang memutuskan pendekatan mana yang lebih disukai ketika ada berbagai metode pengembangan halaman web?

Untuk membuat keputusan ini, pengembang perlu memiliki pemahaman baik tentang Metode Rendering dan pertimbangan kinerja yang dihasilkan.

A.Rendering

Jika Anda bertanya-tanya apa topik renderingnya. Anda dapat membaca detailnya di postingan blog tempat saya menjelaskan topik ini
.

B. Web Statis vs Web Dinamis

Hal lain yang perlu dipahami adalah perbedaan antara Web Statis dan Web Dinamis . Halaman web statis adalah halaman yang tidak kembali ke server dan membuat permintaan dengan AJAX setelah mengambil halaman dari server (HTML, CSS, JS), kontennya tidak berubah sesuai dengan pengguna atau tidak berisi data dinamis (nilai tukar, cuaca, dan lain-lain) karena perubahan data di dalamnya. Misalnya saja blog, berita, dan lain sebagainya. Sedangkan halaman dinamis merupakan halaman web yang memerlukan AJAX, API, Database, dan lain sebagainya, yang mana isi halaman akan berubah-ubah sesuai dengan interval waktu dan parameter yang telah ditetapkan.

C. Ketentuan Kinerja

• TTFB (Time to First Byte) Waktu antara mengeklik tautan dan menerima bit konten pertama.
• FP (First Paint) Waktu yang dibutuhkan untuk menampilkan piksel pertama kepada pengguna.
• FCP (First Contentful Paint) Waktu untuk menampilkan konten logis pertama dalam permintaan.
• Waktu TTI untuk Interaktif Waktu ketika halaman siap untuk berinteraksi dengan pengguna (koneksi semua peristiwa)

• SSR (Server Side Rendering): Ini adalah metode di mana proses rendering dilakukan di sisi server dan halaman dinamis diproduksi dengan mengambilnya dari database menggunakan metode seperti ASP.Net, JSP, PHP. Di sini, karena JS akan memiliki peran yang jauh lebih kecil dalam membuat layar, FP dan FCP akan sangat cepat, sementara waktu yang dibutuhkan data untuk sampai dari server akan lebih lama di TTFB .
• CSR (Client Side Rendering): Ini adalah metode di mana rendering dilakukan di sisi browser dengan metode seperti Angular, React, Vue, Svelte, halaman dinamis ditarik dengan AJAX dan layar dibuat di layar dengan menggabungkan Template + Data dengan metode Template Rendering. Dalam metode ini, bahkan jika kita melakukan TTFB dan FP lebih cepat, kita tidak dapat mempercepat TTI, yaitu waktu yang dibutuhkan pengguna untuk berinteraksi dengan halaman web terkait.
• Rendering Statis: Dalam metode ini digunakan untuk halaman statis, karena halaman sangat sedikit berubah dan tidak diperlukan basis data, halaman dikembalikan ke kondisi akhir dengan metode pra-rendering sebelum dikirim ke server dan dikirim ke CDN, atau lingkungan edge-caching, dan disajikan dengan sangat cepat dari sana. Akhir-akhir ini, menjadi jauh lebih mudah untuk menghasilkan jenis halaman ini dengan alat Gatsby dan Jekyll. Di halaman ini, waktu TTFB dan TTI cukup singkat. Kebutuhan eksekusi atau interaksi JS pada halaman tersebut sangat rendah dan terbatas.
• Rendering Hibrida: Meskipun masuk akal untuk membuat SSR untuk beberapa halaman sesuai dengan muatan kontennya, masuk akal untuk membuat beberapa halaman dengan muatan tinggi dengan CSR yang lambat. Kerangka kerja seperti Next, Nuxt, Nest, Sapper telah muncul yang mendukung situasi seperti itu. Kerangka kerja ini memiliki kemampuan serupa saat mengadopsi metode pengembangan komponen Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte dalam pengembangan kode.

Referensi

• Rendering di Web
• Perbedaan Antara Halaman Web Statis Dan Dinamis
• Di Mana Rendering HTML Seharusnya Dilakukan?

Anda dapat mengklik tautan ini untuk mengakses kelanjutan artikel ini atau artikel lain dalam grup artikel .