Hidrasi Progresif dengan Hidrasi Selektif

Hidrasi selektif adalah fitur React 18 yang memungkinkan React mulai melakukan hidrasi pada komponen segera setelah kode JavaScript-nya tiba, tanpa menunggu seluruh JavaScript halaman selesai diunduh. Setiap bagian yang dipisahkan berdasarkan kode melakukan hidrasi saat bundelnya dimuat, bukan semuanya sekaligus.

Sebelum React 18, hidrasi bersifat "semua atau tidak sama sekali" — React harus mengunduh seluruh JavaScript dan melakukan hidrasi pada seluruh pohon sebelum bagian mana pun dari halaman menjadi interaktif. React 18 menghapus batasan ini: bagian-bagian pohon melakukan hidrasi secara independen saat kode dan datanya tersedia.

Jika pengguna mengeklik atau berinteraksi dengan batas Suspense yang belum dihidrasi, React segera memprioritaskan hidrasi pada bagian pohon tersebut sebelum pekerjaan hidrasi tertunda lainnya. Artinya, hal yang sedang coba digunakan pengguna menjadi interaktif terlebih dahulu, meskipun letaknya bukan yang pertama dalam urutan dokumen.

Menggabungkan React.lazy dengan impor dinamis dan batas Suspense memungkinkan hidrasi selektif untuk komponen yang dipisahkan berdasarkan kode. Peramban mengunduh bundel JS utama terlebih dahulu dan segera melakukan hidrasi pada kerangka. Setiap komponen yang dimuat secara lambat melakukan hidrasi saat potongannya selesai diunduh — secara bertahap, seiring peramban mengambilnya.

Hasilnya, konten di atas area tampilan menjadi interaktif sebelum JavaScript untuk bagian di bawah area tampilan selesai diunduh. Pengguna dapat berinteraksi dengan navigasi dan CTA hero sementara umpan komentar dan widget rekomendasi masih memuat potongan JavaScript-nya.

Hidrasi selektif mengurangi Total Waktu Pemblokiran (TBT) — metrik utama untuk kinerja hidrasi. Di tab Performa Chrome DevTools, tugas panjang (tugas yang berlangsung lebih dari 50 md) ditandai dengan warna merah. Sebelum hidrasi selektif, Anda mungkin melihat satu tugas panjang berdurasi 300 md untuk hidrasi penuh; setelahnya, Anda akan melihat beberapa tugas kecil yang tersebar dari waktu ke waktu.

Pola antipraktik yang melemahkan hidrasi selektif adalah mengimpor semua komponen di bagian atas aplikasi: import Footer from './Footer'. Hal ini memaksa peramban mengunduh, mengurai, dan menjalankan kode Footer sebelum hidrasi apa pun dimulai. Ganti impor tingkat atas untuk komponen di bawah area tampilan dengan React.lazy + impor dinamis.

Gunakan const Footer = React.lazy(() => import('./Footer')) untuk komponen yang muncul di bawah area tampilan awal. Bungkus komponen tersebut dalam Suspense dengan cadangan sederhana. Peramban menurunkan prioritas pengambilan bundel Footer hingga hidrasi bagian atas area tampilan selesai, sehingga TBT meningkat secara alami.

Streaming dan hidrasi selektif saling melengkapi: streaming mengirim potongan HTML untuk meningkatkan FCP dan LCP, sedangkan hidrasi selektif memproses potongan JavaScript untuk meningkatkan TTI dan TBT. Bersama-sama, keduanya menangani dua aspek kinerja: "menampilkan konten dengan cepat" dan "membuatnya interaktif dengan cepat".

Komponen Server React mengembangkan hidrasi selektif lebih jauh: komponen server sama sekali tidak menghasilkan JavaScript untuk klien. Hanya komponen klien (yang ditandai dengan "use client") yang perlu dihidrasi. Hal ini mengurangi jumlah total JavaScript yang perlu dihidrasi, sehingga hidrasi selektif menjadi lebih efektif.

Pola praktisnya: gunakan renderToPipeableStream untuk streaming HTML, bungkus halaman dalam panggilan hydrateRoot pada root (bukan createRoot) untuk mengaktifkan mode hidrasi, gunakan React.lazy untuk semua bagian di bawah area tampilan, dan bungkus setiap bagian dalam batas Suspense. React akan menangani sisanya secara otomatis.

Bagaimana interaksi pengguna memengaruhi prioritas hidrasi selektif dalam React 18?

Hidrasi selektif memungkinkan React melakukan hidrasi pada bagian-bagian pohon komponen secara bertahap saat JavaScript-nya tiba, alih-alih menunggu bundel lengkap. Interaksi pengguna memprioritaskan hidrasi pada bagian pohon yang dituju. React.lazy + impor dinamis untuk konten di bawah area tampilan, jika digabungkan dengan batas Suspense, memungkinkan pola bertahap ini. Hidrasi selektif dan SSR streaming adalah teknik yang saling melengkapi dan bersama-sama menangani pengiriman konten serta kinerja interaktivitas.