Digital Transformation
Partial Hydration
TL;DR: Partial hydration adalah pola arsitektur yang hanya mengaktifkan JavaScript pada komponen interaktif tertentu di sebuah halaman, sementara sisa halaman tetap HTML statis. Tujuannya: memangkas waktu Time to Interactive dan menjaga skor Core Web Vitals tetap sehat tanpa mengorbankan interaktivitas yang memang dibutuhkan.
Apa itu Partial Hydration?
Hydration adalah proses ketika browser mengaktifkan JavaScript di atas HTML yang sudah dirender server, sehingga komponen menjadi interaktif. Pada framework klasik, seluruh halaman di-hydrate sekaligus, walaupun yang interaktif hanya 10-20% saja. Partial hydration membatasi proses ini pada komponen yang benar-benar butuh interaksi (tombol, form, dropdown), sementara bagian seperti hero, paragraf artikel, atau footer dibiarkan sebagai HTML murni.
Konsep ini dipopulerkan oleh framework modern seperti Astro dan konsep islands architecture, dan kini diadopsi sebagian oleh React via React Server Components. Pendekatan ini relevan ketika Anda membangun website bisnis di mana sebagian besar konten bersifat baca-saja.
Cara Kerja Partial Hydration
| Tahap | Yang Terjadi |
|---|---|
| Server render | Seluruh halaman dirender jadi HTML, dikirim ke browser. |
| Browser parse | HTML langsung tampil, pengguna bisa membaca. |
| Selective hydrate | Hanya komponen yang ditandai interaktif yang memuat JavaScript-nya. |
| Idle/visible hydrate | Komponen non-kritis baru di-hydrate saat terlihat di viewport atau browser idle. |
Kenapa Penting?
Pada website bisnis Indonesia yang banyak diakses lewat HP kelas menengah, JavaScript bundle yang besar adalah penyebab utama Largest Contentful Paint yang lambat. Partial hydration memangkas JavaScript yang dikirim ke browser, sehingga halaman terasa lebih responsif. Praktik di proyek client menunjukkan pengurangan bundle awal 30-60% pada halaman landing yang mayoritas konten statis. Selengkapnya bisa dibaca di artikel perbandingan prerendering vs SSR.
Pertanyaan Umum
Apakah partial hydration sama dengan islands architecture?
Tidak persis sama, tapi sangat dekat. Islands architecture adalah implementasi spesifik dari partial hydration, di mana setiap "pulau" interaktif berdiri sendiri tanpa berbagi state dengan pulau lain. Partial hydration sendiri adalah konsep yang lebih luas.
Apakah Next.js mendukung partial hydration?
Sebagian. Next.js App Router dengan React Server Components memungkinkan komponen server tetap HTML, sementara komponen yang ditandai client ('use client') yang di-hydrate. Ini bentuk partial hydration, walau implementasinya berbeda dari Astro.