Digital Transformation
Selective Hydration (Hidrasi Selektif)
TL;DR: Selective Hydration adalah teknik di React 18 yang menghidrasi halaman secara bertahap dan mendahulukan bagian yang sedang disentuh pengguna. Artinya pengguna bisa mengklik tombol sebelum seluruh halaman selesai dihidrasi. Hasilnya interaktivitas terasa lebih cepat, terutama pada halaman besar.
Pada model lama, sebuah halaman baru bisa diklik setelah seluruh JavaScript-nya selesai dihidrasi. Kalau ada satu komponen berat yang lambat, seluruh halaman ikut tertahan. Selective Hydration memecah masalah ini dengan menghidrasi per bagian dan memberi prioritas pada yang relevan dengan pengguna.
Apa itu Selective Hydration?
Selective Hydration adalah kemampuan React untuk menghidrasi komponen secara independen dan tidak berurutan. Teknik ini melengkapi proses hydration biasa: alih-alih satu blok besar, React membungkus bagian halaman dalam Suspense lalu menghidrasinya saat siap, sambil memantau interaksi pengguna.
Jika pengguna mengklik bagian yang belum dihidrasi, React mendahulukan hidrasi bagian itu. Analoginya seperti petugas yang membuka loket yang antreannya paling panjang lebih dulu, bukan membuka semua loket secara berurutan dari kiri.
Cara Kerja Singkat
| Tahap | Yang terjadi |
|---|---|
| Streaming HTML | Server mengalirkan HTML lewat streaming SSR |
| Suspense boundary | Bagian lambat dibungkus dan tidak memblokir sisanya |
| Hidrasi bertahap | Tiap boundary dihidrasi begitu kodenya siap |
| Prioritas interaksi | Klik pengguna mendahulukan hidrasi area terkait |
Teknik ini bekerja paling baik di atas server-side rendering dengan streaming, dan sering dikombinasikan dengan code splitting agar tiap bagian punya bundle terpisah.
Kenapa Penting untuk Bisnis?
Halaman yang cepat diinteraksi memperbaiki INP, salah satu metrik Core Web Vitals yang dipakai Google sebagai sinyal peringkat. Dari pengalaman menangani halaman produk yang panjang, bottleneck interaktivitas biasanya bukan di seluruh halaman, melainkan satu dua komponen berat. Selective Hydration memastikan komponen ringan tidak ikut menunggu komponen berat.
Penjelasan resmi mekanisme ini ada pada pengumuman React 18 oleh tim React. Catatan: manfaatnya paling terasa pada halaman besar; pada halaman kecil dengan sedikit JavaScript, dampaknya minim.
Pertanyaan Umum
Apakah saya perlu mengatur Selective Hydration manual?
Tidak sepenuhnya. Dengan membungkus bagian halaman dalam Suspense dan memakai streaming SSR, React menangani prioritas hidrasi secara otomatis.
Apa bedanya dengan partial hydration?
Partial hydration memilih komponen mana yang dihidrasi sama sekali. Selective Hydration menghidrasi semuanya, tapi mengatur urutan dan prioritasnya.
Istilah Terkait