Hydration Nedir?

Neden gerekir?

SSR ile gelen HTML tarayıcıda hemen görünür, ama bir bakıma yalnızca bir resimdir: butonların tıklama işleyicileri, form doğrulaması, açılır menülerin durumu henüz yoktur. Hydration bu boşluğu doldurur. Framework, sunucuda çalıştırdığı bileşenleri tarayıcıda yeniden çalıştırır ve oluşan bileşen ağacını mevcut DOM düğümleriyle eşleştirir. Eşleşme tutuyorsa düğümleri yeniden oluşturmaz; yalnızca olay dinleyicilerini ve bileşen durumunu bağlar. React'te bu işi hydrateRoot yapar; Next.js gibi framework'ler onu kendiliğinden çağırır:

import { hydrateRoot } from "react-dom/client";
import App from "./App";

hydrateRoot(document.getElementById("root"), <App />);

Bedeli: görünür ama henüz etkileşimli değil

Hydration için tarayıcı, sayfadaki etkileşimli bileşenlerin kodunu indirmek, ayrıştırmak ve çalıştırmak zorundadır. Sayfa büyükse veya cihaz yavaşsa kullanıcı içeriği görür ama tıkladığında bir şey olmaz. Ana iş parçacığı (main thread) bu işle meşgulken gelen etkileşimler gecikir ve bu durum kötü bir INP değerine dönüşebilir. Kısacası SSR içeriği erken gösterir, ama gönderilen JavaScript miktarını tek başına azaltmaz.

Hydration uyumsuzluğu (mismatch)

Hydration'ın temel varsayımı, istemcideki ilk render'ın sunucunun ürettiği çıktıyla aynı olmasıdır. Fark olduğunda React geliştirme modunda uyarı verir ve bazı hatalardan, ilgili bölümü istemcide yeniden oluşturarak toparlanır. Yine de React dokümantasyonu bunların diğer hatalar gibi düzeltilmesi gerektiğini vurgular: en iyi ihtimalle sayfa yavaşlar, en kötü ihtimalle olay işleyicileri yanlış öğelere bağlanabilir. Yaygın nedenler şunlardır:

• Render sırasında Date.now() veya Math.random() gibi her çalıştırmada farklı değer üreten kod
• typeof window !== "undefined" kontrolüyle sunucuda ve istemcide farklı içerik üretmek
• Saat dilimine veya tarayıcı diline göre değişen tarih ve sayı biçimlendirmesi
• Geçersiz HTML iç içeliği, örneğin p içinde div: tarayıcı bunu ayrıştırırken düzeltir ve DOM, sunucunun ürettiği yapıdan farklılaşır
• Sayfayı hydration'dan önce değiştiren tarayıcı eklentileri veya üçüncü taraf betikler

Genel çözüm, tarayıcıya özgü değerleri ilk render'dan çıkarıp bileşen yüklendikten sonra (React'te useEffect içinde) uygulamaktır. Zaman damgası gibi kaçınılmaz farklar için React suppressHydrationWarning özelliğini sunar; ancak bu yalnızca tek seviyede çalışan bir kaçış yoludur, kalıcı bir çözüm değildir.

Daha az hydration için yaklaşımlar

• Kısmi hydration (partial hydration, “islands”): sayfanın büyük bölümü statik HTML olarak kalır; yalnızca etkileşim gereken adalar (bir form, bir galeri) hydrate edilir. Astro bu modeli varsayılan olarak kullanır.
• Aşamalı hydration (progressive hydration): bileşenler tek seferde değil, öncelik sırasına göre veya görünür oldukça hydrate edilir. React 18 ile gelen selective hydration, Suspense sınırlarıyla ayrılmış bölümleri bağımsız olarak hydrate eder ve kullanıcının etkileşime girdiği bölüme öncelik verir.
• React Server Components: bazı bileşenler yalnızca sunucuda çalışır; kodları tarayıcıya gönderilmez ve hydrate edilmezler. Hydration'a yalnızca "use client" ile işaretlenen istemci bileşenleri girer. Bu, gönderilen JavaScript'i azaltabilir; ama istemci bileşenleri yine hydrate edildiği için hydration'ı ortadan kaldırmaz, kapsamını daraltır.

Qwik gibi bazı framework'ler ise hydration yerine “resumability” adını verdikleri bir model kullanır: uygulama durumu HTML'e yazılır ve kod ancak etkileşim anında yüklenip kaldığı yerden devam eder. Hangi yaklaşımın daha uygun olduğu sayfanın ne kadar etkileşimli olduğuna bağlıdır; her proje için geçerli tek bir doğru yoktur.

SEO ile ilişkisi

İçerik HTML'de zaten bulunduğu için hydration, arama motorlarının sayfayı okumasını genellikle etkilemez; Google da hydration'ı SSR ve statik render ile birlikte önerilen yaklaşımlar arasında sayar. Asıl risk, hydration sırasında başlık, canonical etiketi veya ana içerik gibi önemli sinyallerin değiştirilmesidir: bu durumda ham HTML ile oluşturulmuş sayfa farklı şeyler söyler. JavaScript SEO kontrolleri tam olarak bu tür farkları yakalamaya yöneliktir. Ayrıntılı başvuru için React'in hydrateRoot dokümantasyonu faydalıdır.