Masalah Hydration Penuh

Hidrasi adalah proses ketika React mengambil HTML yang dirender server dan memasangkan pendengar peristiwa JavaScript padanya. Server mengirimkan HTML awal (cepat), kemudian peramban mengunduh bundel JavaScript dan React "menghidrasi" HTML statis tersebut agar menjadi interaktif. Sampai hidrasi selesai, halaman terlihat interaktif tetapi sebenarnya belum dapat digunakan untuk berinteraksi.

Aplikasi satu halaman tradisional mengirimkan seluruh bundel JavaScript ke peramban. React harus mengunduh, mengurai, menjalankan, lalu memasangkan pendengar peristiwa ke setiap komponen dalam pohon. Untuk aplikasi besar, proses ini dapat memerlukan beberapa detik pada perangkat seluler kelas menengah.

Waktu hingga Interaktif mengukur waktu yang diperlukan sebelum pengguna dapat berinteraksi dengan halaman. Hidrasi secara langsung menghambat TTI: halaman mungkin terlihat siap (HTML yang dirender server sudah terlihat), tetapi tombol dan formulir tidak merespons sampai React selesai memasangkan pendengar peristiwa. Nilai TTI yang tinggi menghasilkan pengalaman pengguna yang buruk.

Pertimbangkan halaman pemasaran: 80% kontennya berupa teks statis, gambar, dan tajuk yang tidak pernah berubah. Hanya 20% yang melibatkan widget interaktif seperti formulir buletin atau pemutar video. Hidrasi SPA tradisional tetap berjalan untuk 100% halaman, sehingga komponen statis diproses tanpa perlu.

Pembuatan profil performa di Chrome DevTools memperlihatkan biaya hidrasi. Dalam diagram alur utas utama, Anda dapat mengenali tugas "hidrasi React" sebagai blok eksekusi JavaScript yang panjang setelah pengecatan awal. Semakin panjang blok ini, semakin lama utas utama sibuk dan semakin kurang responsif halaman tersebut.

Semakin besar pohon komponen React, semakin banyak pekerjaan yang diperlukan untuk hidrasi. React harus mengunjungi setiap komponen, membandingkan HTML yang dirender server dengan hasil yang akan dirender komponen tersebut, lalu memasangkan pendengar peristiwa. Halaman kompleks dengan ratusan komponen dapat memiliki beban tambahan hidrasi yang terukur, bahkan pada perangkat yang cepat.

React 18 memperkenalkan hidrasi konkuren, yang memungkinkan React membagi hidrasi menjadi potongan-potongan lebih kecil dan memberikan giliran kepada peramban di antaranya. Hal ini mencegah peramban terlihat sepenuhnya membeku selama hidrasi pohon yang besar. Namun, hidrasi konkuren hanya mengurangi dampaknya — bukan menghilangkan biaya dasarnya.

Hidrasi selektif (melalui Suspense) memungkinkan React menghidrasi komponen berdasarkan urutan prioritas — interaksi pengguna memicu hidrasi segera pada komponen yang relevan. Hal ini meningkatkan responsivitas, tetapi tetap berjalan dalam satu pohon React: semua komponen di dalam pohon tersebut pada akhirnya tetap dihidrasi.

Wawasan mendasar yang mendorong Arsitektur Pulau adalah bahwa sebagian besar halaman biasa sebenarnya sama sekali tidak memerlukan JavaScript. Bilah navigasi, bagian utama, tautan kaki halaman, teks kiriman blog, dan deskripsi produk murni bersifat presentasional. Memaksakan hidrasi pada bagian-bagian tersebut jelas merupakan pemborosan.

Studi dari tim performa web menunjukkan bahwa waktu penguraian dan eksekusi JavaScript merupakan biaya terbesar pada perangkat seluler. Bundel JavaScript berukuran 300kb memerlukan waktu 2–3 detik untuk diurai pada ponsel Android median. Mengurangi JavaScript yang dikirim ke peramban memberikan manfaat performa yang jauh lebih besar dibandingkan optimisasi internal React apa pun.

Setiap kilobita JavaScript yang ditambahkan ke aplikasi React menambah pekerjaan hidrasi. Meskipun suatu komponen hanya bersifat dekoratif, jika komponen tersebut berada di dalam pohon React, komponen itu tetap berpartisipasi dalam hidrasi. "Pajak hidrasi" ini meningkat seiring ukuran aplikasi dan membuat pemeliharaan nilai TTI yang baik semakin sulit ketika aplikasi berkembang.

Apa hubungan antara hidrasi React dan Waktu hingga Interaktif (TTI)?

Hidrasi React tradisional memproses seluruh pohon komponen, termasuk konten statis yang tidak memerlukan JavaScript. Hal ini menghambat Waktu hingga Interaktif dan tidak berkembang dengan baik seiring ukuran aplikasi. Peningkatan hidrasi konkuren dan selektif di React 18 mengurangi dampaknya, tetapi tidak menghilangkan biaya mendasarnya. Wawasan utamanya: sebagian besar konten halaman sebenarnya tidak memerlukan JavaScript, sehingga hidrasi penuh merupakan pemborosan.