Konsep hydration dalam meta-framework

Selasa, 26 Ogos 2025, 11:05 pm

Minggu lalu ada free training untuk Vue.js certification, belajar satu terminologi #webdev baru: hydration.

Meta-framework adalah library yang dibina berasaskan library lain untuk melengkapkan peranan sebagai application framework. Contohnya, #Nuxt dibina di atas #Vue, Next.js pula berasaskan React.

Antara fungsi meta-framework ialah SSR: server-side rendering. Tapi sebelum² ni pakai PHP pun buat server-side rendering, apa bezanya?

UI library seperti React & Vue membina user interface pada client-side (pada web browser), secara component-based. Untuk interface yang ringkas, tak ada masalah sangat, tapi bila mula nak buat interface yang kompleks & advance, kadang² rendering kat client-side ni ambil masa agak lama. User akan kata app tu berat, lembap & lambat loading.

Sebab tu sesetengah UI element ni di-render kat server-side, supaya kurangkan beban kat browser.

Untuk UI yang di-render kat browser, state data & event listeners semua dah setup sekali semasa proses rendering. Kalau UI yang datang dari server, adakah state data & event listeners dah datang sekali untuk buatkan web app tu interactive? Sudah tentu tidak.

UI yang datang dari server hanya HTML code yang kosong, hanya untuk display, tak ada interactivity.

Kat sini lah konsep hydration tu muncul. Proses untuk menyambungkan state data & event listeners pada HTML code kosong dari server itu lah disebut ‘hydrating the element’.

Kiranya server-side UI dalam bentuk HTML code tu tadi masih ‘kering’, tak ada data & event listeners untuk buatkan web app tu interactive.

Bila apply data & event listeners pada code UI tu, sekarang ia dah jadi kembali segar, ‘hydrated’.

Dan beza SSR meta-framework ini dengan PHP ialah codebase yang sama digunakan untuk hasilkan UI pada client-side & server-side. PHP hanya generate kat server-side, kat client-side kena guna JS library lain, selalunya jQuery.