Rendering mengacu pada proses pembuatan kode yang diperlukan untuk membuat halaman yang dapat berinteraksi dengan pengguna akhir melalui browser mereka. Hal ini termasuk menyiapkan konten, menerapkan logika dan pemrosesan, serta menyertakan elemen UI dan komponen lain yang diperlukan untuk menampilkan halaman akhir. Aplikasi berbasis konten berfokus pada kecepatan pemuatan yang cepat, latensi rendah, dan waktu rendering yang cepat.
Rendering sisi server (SSR)
Rendering sisi server (SSR) melibatkan rendering halaman web di server, kemudian mengirim HTML yang dirender sepenuhnya ke browser klien, bukan merendernya di sisi klien dengan JavaScript. Saat pengguna mengakses aplikasi, browser mereka akan mengirimkan permintaan ke server. Aplikasi memproses permintaan di server, yang mencakup pengumpulan data dari database atau API eksternal, lalu merender HTML untuk halaman yang diminta. Selanjutnya, server mengirim kembali HTML halaman yang dirender sepenuhnya ke browser pengguna. Saat browser pengguna menerima HTML, browser tersebut akan memuat file JavaScript yang diperlukan.
Manfaat menggunakan SSR mencakup kecepatan pemuatan awal yang cepat, performa pengoptimalan mesin telusur (SEO) yang baik, keandalan, dan pengalaman pengguna yang baik secara keseluruhan. Namun, SSR mungkin lebih rumit untuk diterapkan daripada rendering sisi klien (CSR) karena overhead performa dan keterampilan pengembangan yang diperlukan untuk membangun dan memelihara aplikasi yang mendukung SSR. SSR sangat bermanfaat untuk aplikasi web berbasis konten, platform e-commerce, dan aplikasi apa pun yang memerlukan performa SEO yang baik dan kecepatan respons awal yang cepat.
Pembuatan Situs Statis (SSG)
Pembuatan situs statis (SSG) menghasilkan file HTML statis pada waktu build dan mengirimkannya kepada pengguna tanpa rendering sisi server atau sisi klien. Konten web ditulis, biasanya dalam format terstruktur seperti Markdown, JSON, atau YAML, dan mencakup teks, gambar, dan aset lainnya. Alat generator situs statis, seperti Hugo, atau Jekyll, memproses konten dan menghasilkan file HTML, CSS, dan JavaScript. Output statisnya adalah seluruh situs, dan file statis ini di-deploy ke server web, CDN, atau layanan hosting.
Pelajari CSS dan HTML lebih lanjut di web.dev.
Karena file bersifat statis, file tersebut dapat di-cache sehingga dimuat dengan sangat cepat. SSG adalah opsi yang bagus untuk aplikasi web yang tidak sering berubah atau yang diupdate melalui build situs berkala. Ini bukan pilihan yang cocok untuk aplikasi web dengan interaktivitas dinamis.
Rendering Sisi Klien (CSR)
Rendering sisi klien (CSR) terjadi di browser klien, bukan di server. Aplikasi web sering kali dimuat dengan template HTML minimal, kemudian konten dimanipulasi secara dinamis menggunakan JavaScript dan data dari server atau API. Setelah ada permintaan aplikasi, server mengirimkan dokumen HTML minimal dengan struktur dasar dan kode JavaScript yang diperlukan untuk merender halaman. Kode JavaScript dieksekusi di browser pengguna. Kode tersebut kemudian memproses data yang diambil dan menghasilkan konten, termasuk CSS, HTML, dan semua elemen interaktif. Kode JavaScript kemudian merespons interaksi pengguna, seperti pengiriman formulir.
Manfaat CSR mencakup transisi laman yang cepat dan antarmuka responsif. Aplikasi web berbasis CSR sering kali memiliki waktu pemuatan awal yang lambat dibandingkan dengan SSR, dan dapat menimbulkan tantangan SEO. Seiring berkembangnya aplikasi CSR, aplikasi tersebut bisa menjadi sangat kompleks untuk dikembangkan dan dipelihara.