Hydration (React)

TL;DR: Hydration adalah proses ketika React mengambil alih HTML yang sudah dikirim server, lalu memasang event handler dan state agar halaman menjadi interaktif. Hydration yang berat bisa menunda interaktivitas dan memperburuk metrik seperti INP, sehingga perlu diminimalkan.

Apa itu Hydration (React)?

Hydration adalah jembatan antara HTML statis dan aplikasi interaktif. Saat server mengirim markup hasil SSR atau SSG, halaman tampil cepat tetapi belum bisa diklik. React kemudian menjalankan JavaScript di browser untuk menghidupkan markup itu, memasang listener tombol, form, dan state. Analoginya seperti rumah contoh yang sudah berdiri: hydration adalah memasang aliran listrik dan air agar rumah benar-benar bisa dihuni.

Proses ini menjelaskan kenapa sebuah halaman bisa terlihat siap tetapi tombolnya belum merespons selama sepersekian detik pertama.

Cara Kerja dan Jenisnya

• Full hydration: seluruh pohon komponen dihidupkan sekaligus. Sederhana, tapi berat untuk halaman besar.
• Streaming hydration: dipadukan dengan streaming SSR agar bagian penting interaktif lebih dulu.
• Selective hydration: hanya komponen interaktif yang dihidupkan, konten statis dibiarkan. Pendekatan ini yang didorong arsitektur modern seperti React Server Components.

Kenapa Penting?

Hydration yang berlebihan adalah penyebab umum interaktivitas lambat. Bundel JavaScript besar membuat browser sibuk mengeksekusi skrip sebelum pengguna bisa berinteraksi, sehingga merusak Core Web Vitals, khususnya INP. Dari pengalaman membangun antarmuka berbasis Next.js, mengurangi komponen klien dan memindahkan logika ke server menurunkan beban hydration secara nyata. Penjelasan resmi ada di dokumentasi React tentang hydrateRoot.

Pertanyaan Umum

Apa beda rendering dan hydration?

Rendering menghasilkan HTML yang tampil di layar. Hydration adalah langkah berikutnya yang membuat HTML itu interaktif dengan memasang event handler dan state.

Bagaimana mengurangi beban hydration?

Kurangi jumlah komponen klien, manfaatkan Server Components, dan pecah bundel JavaScript agar hanya bagian interaktif yang memuat skrip.