Hydration nedir?

Bir ürün sayfası açılıyor. Başlık, fotoğraf ve renk seçenekleri hemen görünür; tarayıcı JavaScript’i yükledikten sonra seçimler tepki vermeye başlar. Sunucudan gelen HTML’e istemci tarafındaki bileşen davranışının bağlanması, hydration kavramının tipik kullanım alanıdır. İlk görüntü ile etkileşime hazır olma aynı an değildir. Bu aradaki süre uzarsa kullanıcı düğmeye bastığında bir şey olmadığını düşünebilir; sorun yalnız teknik konsolda yaşayan bir ayrıntı değildir.

React gibi sistemlerde başlangıçtaki sunucu çıktısı ile tarayıcının beklediği ilk çıktı uyumlu olmalıdır. Sunucuda günün saati, tarayıcıda başka bir saat dilimi kullanılırsa metin değişebilir. Rastgele değer, pencere genişliği veya yalnız tarayıcıda bulunan kayıt da aynı farkı yaratabilir. Sorunu susturan bir uyarı ayarı, iki farklı ekranın neden üretildiğini açıklamaz. Önce ilk çıktının hangi veriyle oluştuğu belirlenir.

Bir örnek üzerinden düşünelim: kullanıcı son seçtiği para birimini tarayıcıda saklıyor. Sunucu bu tercihi bilmiyorsa ilk sayfa varsayılan para birimiyle gelir. Tarayıcı ilk çizimde hemen başka değer üretirse uyumsuzluk oluşabilir. Tercihi sunucunun erişebileceği bir yöntemle taşımak veya istemciye özgü alanı kontrollü biçimde güncellemek farklı seçeneklerdir. Hangisinin uygun olduğu, kişiselleştirme ve ilk görünüm beklentisine bağlıdır.

Hydration maliyeti, gönderilen etkileşimli kodun kapsamıyla ilişkilidir. Her paragrafın istemci bileşenine dönmesi gerekmez. Sadece ürün seçici, menü veya araç davranış istiyorsa bu sınır küçük tutulabilir. Bir sayfayı sunucuda üretip ardından aynı büyük ağacı tarayıcıda tekrar çalıştırmak, özellikle daha yavaş cihazlarda açılış deneyimini zorlaştırabilir. Önceden görünen içerik ile sonradan gereken davranışı ayırmak tasarımı ve geliştirmeyi birlikte ilgilendirir.

Hidrasyon sorunları yalnız bir hata mesajından ibaret olmayabilir; kullanıcı ilk gördüğü içerikle etkileşimli hâl arasında fark yaşayabilir. Örneğin sunucu farklı bir saat, tarayıcı farklı bir yerel saat üretirse aynı alan değişebilir. İlk görüntüyü mümkün olduğunca tutarlı üretmek, tarayıcıya özgü bilgiyi uygun aşamada eklemek gerekir. Hata uyarısını susturmak gerçek farkın nedenini açıklamaz. Bir seslendirme düğmesi gibi yalnız tarayıcı özelliğine dayanan araçta başlangıçta güvenli bir durum sunulabilir, destek anlaşılınca etkileşim açılabilir. İçeriğin geri kalanı bu küçük aracı beklemek zorunda değildir. Böylece istemci yeteneği olmayan ziyaretçi de temel açıklamayı okuyabilir ve sayfanın anlamını kaybetmez.