Digital Transformation
Progressive Hydration
TL;DR: Progressive Hydration adalah teknik di mana komponen tidak di-hydrate sekaligus saat halaman load, tapi bertahap sesuai prioritas: above-the-fold dulu, lalu komponen yang masuk viewport, lalu yang butuh interaksi. Tujuannya memangkas Total Blocking Time dan menjaga skor INP tetap rendah pada halaman dengan banyak komponen interaktif.
Apa itu Progressive Hydration?
Hydration standar di Next.js menjalankan semua JavaScript komponen klien sekaligus setelah HTML SSR diterima browser. Pada halaman dengan banyak widget seperti chat, carousel, dan komentar, hydration menyeluruh ini menyebabkan main thread sibuk 600-1500 ms. Akibatnya pengguna yang sudah melihat konten harus menunggu sebelum bisa interaksi.
Progressive Hydration memecah masalah ini dengan menunda hydration komponen non-kritikal. Strategi populer: hydrate on visible (saat masuk viewport via IntersectionObserver), hydrate on interaction (saat di-hover atau klik), atau hydrate on idle (saat browser idle via Scheduler API).
Strategi Hydration
| Strategi | Kapan Hydrate | Use Case |
|---|---|---|
| Eager (default) | Saat page load | Komponen above-the-fold kritikal |
| On visible | Saat masuk viewport | Carousel, testimoni, FAQ |
| On interaction | Saat hover/klik | Modal, dropdown menu, video player |
| On idle | Saat browser idle | Analytics, chat widget, newsletter form |
Library populer di ekosistem React: react-lazy-hydration, @react-loosely-lazy, atau pattern manual via dynamic({ssr: false, suspense: true}) di Next.js.
Kenapa Penting?
Pada salah satu proyek e-commerce Nalesha, halaman katalog parfum awalnya hydrate 28 komponen sekaligus, menghasilkan TBT 920 ms di mobile mid-tier. Setelah saya terapkan progressive hydration dengan on-visible untuk produk grid bawah dan on-interaction untuk filter sidebar, TBT turun ke 240 ms dan INP membaik dari 380 ms ke 165 ms tanpa mengubah satu pun komponen visual.
Untuk bisnis Indonesia dengan basis pengguna mid-range Android, optimasi ini berdampak langsung ke konversi karena halaman terasa "lebih cepat dipakai" walau LCP sama.
Pertanyaan Umum
Apakah Next.js App Router mendukung progressive hydration?
Sebagian. React Server Components memang menggeser sebagian beban hydration ke server, tapi komponen klien tetap hydrate eager kecuali Anda pakai pattern dynamic import dengan trigger visibility atau interaction.
Apakah progressive hydration merusak SEO?
Tidak. HTML SSR tetap dikirim utuh, jadi crawler tetap melihat seluruh konten. Yang ditunda hanya JavaScript untuk interaktivitas.
Istilah Terkait