Hydration

Okunuşu: haydreyşın

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Hydration, tarayıcıdaki JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu bağlayarak sayfayı etkileşimli hale getirdiği adımdır.

Hydration nedir?

Bir sayfa SSR ya da SSG ile render edildiğinde tarayıcı hemen gösterebileceği eksiksiz bir HTML alır, ancak bu HTML cansızdır: düğmelerin ve formların henüz bir JavaScript davranışı yoktur. Hydration, framework'ün JavaScript'inin yüklendiği, bileşenlerin bellekteki resmini yeniden kurduğu, bunu mevcut HTML ile eşleştirdiği ve olay dinleyicilerini ile durumu bağladığı adımdır.

Hydration, istemci tarafı render ile aynı şey değildir. CSR sayfayı boş bir kabuktan tarayıcıda oluştururken, hydration zaten var olan HTML'i yeniden kullanır ve yalnızca etkileşim ekler. Örneğin React'te, sunucunun HTML'i atılıp yeniden oluşturulmak yerine korunsun diye createRoot() yerine hydrateRoot() kullanılır.

Seyirci gelmeden önce tümüyle kurulmuş bir sahne düşünün; hydration, oyuncuların sahneye çıktığı ve dekor parçalarının çalışmaya başladığı andır. Hydration bitene kadar sayfa hazır görünüp tıklamaları yok sayabilir; büyük JavaScript paketleri de, özellikle yavaş telefonlarda bu aralığı uzatır. Bu gecikme çoğunlukla Interaction to Next Paint (INP) gibi yanıt verme metriklerinde kendini gösterir.

Yaygın bir sorun hydration uyuşmazlığıdır (hydration mismatch). Tarayıcıdaki ilk render, sunucunun gönderdiğinden farklı bir işaretleme ürettiğinde, örneğin kod render sırasında geçerli zamanı, rastgele değerleri ya da yalnızca tarayıcıya özgü API'leri kullandığında ortaya çıkar. Kısmi hydration (partial hydration), adalar mimarisi (islands architecture) ve React Server Components gibi teknikler, yalnızca sayfanın etkileşimli olması gereken kısımlarını hydrate ederek maliyeti azaltır.

Önemli noktalar

Hydration, sunucuda üretilmiş veya statik HTML'i etkileşimli hale getirir.
Framework, olay yöneticilerini ve durumu mevcut HTML'e bağlar.
Hydration bitene kadar sayfa hazır görünüp yanıt vermeyebilir.
Hydration uyuşmazlığı, tarayıcı ve sunucu çıktısı farklı olduğunda oluşur.
Kısmi hydration ve adalar, tarayıcıya daha az JavaScript gönderir.

Örnek

React'te sunucuda üretilmiş HTML'i hydrate etmekjsx

// client.jsx: runs in the browser after the server's HTML has loaded
import { hydrateRoot } from "react-dom/client";
import App from "./App";

// Reuse the existing HTML inside #root and attach event handlers,
// instead of rendering the whole page again from scratch
hydrateRoot(document.getElementById("root"), <App />);

Sık sorulan sorular

Hydration hatası nedir?

Hydration hatası ya da uyuşmazlığı, tarayıcıdaki ilk render'ın sunucunun gönderdiğinden farklı bir işaretleme üretmesiyle ortaya çıkar. Yaygın nedenler tarihler, rastgele sayılar ve render sırasında yapılan typeof window gibi kontrollerdir; bu tür kodu hydration'dan sonra çalışan effect'lere ya da olay yöneticilerine taşıyın.

Hydration ile istemci tarafı render arasındaki fark nedir?

İstemci tarafı render, sayfanın HTML'ini neredeyse boş bir belgeden tarayıcıda oluşturur. Hydration ise sunucunun zaten render ettiği HTML'den yola çıkar ve yalnızca JavaScript davranışını bağlar.

Kısmi hydration nedir?

Çoğunlukla adalar mimarisi olarak uygulanan kısmi hydration, bir sayfanın yalnızca arama kutusu ya da görsel karuseli gibi etkileşimli kısımlarını hydrate eder, geri kalanını statik HTML olarak bırakır. Bu, tarayıcının indirip çalıştırması gereken JavaScript miktarını azaltır.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin