Digital Transformation
Lazy Hydration
TL;DR: Lazy hydration adalah teknik menunda hydration (pengaktifan JavaScript) sebuah komponen sampai komponen itu terlihat atau diinteraksikan pengguna. Tujuannya menurunkan beban kerja awal di browser, sehingga halaman lebih cepat responsif. Pada praktiknya, lazy hydration bisa memangkas waktu blocking JavaScript secara signifikan pada halaman yang berat komponen.
Apa itu Lazy Hydration?
Hydration adalah proses ketika browser mengambil HTML statis yang sudah dirender server, lalu memasang ulang event listener dan state JavaScript supaya halaman menjadi interaktif. Masalahnya, hydration default sering berjalan untuk semua komponen sekaligus saat halaman dimuat, padahal banyak komponen belum terlihat pengguna. Lazy hydration menunda pekerjaan itu sampai komponen masuk viewport atau disentuh, mirip cara lazy loading menunda pemuatan gambar di bawah lipatan.
Analogi sederhananya: alih-alih menyalakan semua lampu di gedung begitu pintu dibuka, lampu hanya menyala di ruangan yang benar-benar Anda masuki.
Kapan Dipakai
| Skenario | Cocok lazy hydration? |
|---|---|
| Komponen di bawah lipatan (footer, komentar) | Ya, tunda sampai discroll |
| Widget interaktif berat (chart, map) | Ya, tunda sampai terlihat atau diklik |
| Tombol navigasi utama di atas lipatan | Tidak, butuh interaktif segera |
| Konten statis tanpa interaksi | Tidak perlu hydration sama sekali |
Strategi ini berkaitan erat dengan Total Blocking Time karena hydration yang menumpuk adalah salah satu penyumbang utama thread utama yang sibuk.
Kenapa Penting?
Untuk website bisnis Indonesia yang sering diakses lewat ponsel kelas menengah, thread utama yang sibuk membuat halaman terasa lambat meski konten sudah terlihat. Menunda hydration komponen non-kritis membantu halaman lulus Core Web Vitals, khususnya metrik INP. Pendekatan ini juga melengkapi pola islands architecture yang memang dirancang agar tiap pulau komponen di-hydrate terpisah. Untuk acuan teknis, dokumentasi web.dev tentang rendering menjelaskan trade-off antar strategi hydration.
Pertanyaan Umum
Apa beda lazy hydration dengan lazy loading?
Lazy loading menunda pemuatan aset seperti gambar atau script, sementara lazy hydration menunda pengaktifan interaktivitas komponen yang HTML-nya sudah ada. Keduanya menunda pekerjaan, tapi pada lapisan berbeda.
Apakah lazy hydration mengganggu SEO?
Tidak, selama HTML utama tetap dirender server. Crawler membaca konten statis yang sudah ada, dan interaktivitas yang ditunda tidak memengaruhi indeksasi.
Istilah Terkait