Hidrasyon (Hydration) Nedir?

Hidrasyon, sunucuda veya build sırasında üretilmiş HTML’in tarayıcıda etkileşimli hale getirilmesidir. Kullanıcı ilk anda hazır HTML görür; ardından JavaScript yüklenir ve butonlar, formlar, menüler gibi davranışlar bağlanır.

SSR veya statik üretim ile gelen sayfalarda bu adım sık görülür. HTML hızlı görünür, fakat hydration tamamlanmadan bazı bileşenler tıklamaya yanıt vermeyebilir.

Sorunları Nelerdir?

Hidrasyon maliyetli olabilir. Büyük JavaScript bundle’ları indirildiğinde, parse edildiğinde ve çalıştırıldığında mobil cihazlarda gecikme oluşur. Ayrıca sunucuda üretilen HTML ile tarayıcıdaki ilk render uyuşmazsa hydration hataları görülebilir.

React gibi framework’lerde bu nedenle istemci ve sunucu sınırları dikkatli kurulmalıdır. Tarih, rastgele sayı, kullanıcıya özel veri ve tarayıcı API’leri yanlış yerde kullanıldığında tutarsızlık oluşabilir.

İş Kullanımı

Performans odaklı sitelerde gereksiz hydration azaltılır. Ada mimarisi, yalnızca etkileşimli parçaları hydrate ederek bu maliyeti düşürür. Yönetim panelleri gibi yoğun etkileşimli uygulamalarda ise hydration kaçınılmaz olabilir, fakat kod bölme ve geç yükleme ile etkisi yönetilir.