Digital Transformation
Hydration (Hidrasi pada Framework JavaScript)
Hydration adalah proses ketika browser menempelkan kode JavaScript ke HTML statis yang dikirim server, sehingga halaman jadi interaktif. Tanpa hydration, tombol dan form di SSR/SSG tidak merespons klik.
TL;DR: Hydration adalah proses browser menjalankan JavaScript di atas HTML statis hasil SSR atau SSG, sehingga tombol, form, dan event listener menjadi aktif. Hydration yang lambat membuat halaman terlihat siap padahal belum bisa diklik, dan ini sering memperburuk INP serta TBT.
Apa itu Hydration?
Hydration adalah jembatan antara HTML yang dirender server dan kode interaktif di browser. Pada framework seperti Next.js, server mengirim HTML lengkap supaya halaman cepat tampil. Setelah HTML diterima, browser memuat bundle JavaScript, lalu memasangkan event handler ke elemen yang sudah ada. Proses pasang ulang itulah yang disebut hydration.
Analogi sederhana, HTML statis ibarat poster di dinding. Hydration adalah saat tukang listrik datang dan menyambungkan kabel ke setiap saklar di poster, sehingga lampu di dalamnya menyala saat ditekan. Selama proses pemasangan, poster sudah bisa dibaca, tapi saklarnya belum berfungsi. Konsep ini berkaitan erat dengan SSR dan SSG sebagai sumber HTML awalnya.
Cara Kerja Hydration di Next.js dan React
| Tahap | Yang Terjadi | Dampak Pengguna |
|---|---|---|
| 1. HTML diterima | Halaman tampil, teks dan gambar terbaca | Konten cepat dilihat (FCP cepat) |
| 2. JS bundle diunduh | Browser memuat skrip framework | Layar tampak siap, tapi belum interaktif |
| 3. JS dieksekusi | React menyusun ulang virtual DOM | CPU sibuk, klik bisa tertunda |
| 4. Event handler dipasang | Tombol dan form jadi responsif | Halaman benar-benar dapat dipakai |
Selama tahap 2 dan 3, klik pengguna sering tidak direspons. Dari pengalaman menangani Core Web Vitals di proyek client, jeda ini bisa mencapai 1 sampai 3 detik di perangkat menengah, dan paling jelas terasa di halaman dengan banyak komponen interaktif.
Hydration Mismatch
Hydration mismatch terjadi ketika HTML server berbeda dengan hasil render React di browser. Penyebab umum: pemakaian Date.now(), Math.random(), atau pembacaan window saat render. React akan memberi peringatan, dan pada beberapa kasus konten tertukar atau hilang. Selalu pindahkan logic yang bergantung pada browser ke dalam useEffect.
Kenapa Penting?
Untuk marketer dan pemilik bisnis di Indonesia yang banyak diakses lewat ponsel mid-range, hydration yang berat berarti halaman terlihat siap tapi tombol "Beli" atau "WhatsApp" tidak merespons saat pertama kali diklik. Akibatnya pengunjung mengulang klik, frustrasi, lalu menutup tab. Mengoptimalkan hydration, misalnya dengan partial hydration atau React Server Components, langsung berdampak pada konversi.
Pertanyaan Umum
Apakah halaman SSG butuh hydration?
Ya. Selama halaman memakai komponen interaktif React, hydration tetap dijalankan. Hanya halaman yang murni HTML tanpa React sama sekali yang bebas hydration.
Apa beda hydration dengan rendering biasa?
Rendering membuat tampilan dari nol. Hydration menempel pada HTML yang sudah ada dan menambahkan kemampuan interaksi tanpa membongkar tampilan.
Istilah Terkait