Web Programlama Eğitimi: SSR Hydration Hatalarını Ölçmek ve Önlemek

Web programlama eğitimi ile hydration hatasının kaynağını sınıflandırmak

Hydration, istemcide yeni bir DOM üretmek yerine sunucudan gelen düğümlere event listener ve framework durumu bağlar. Bu nedenle istemcinin ilk render çıktısı, sunucunun HTML çıktısıyla karakter karakter aynı olmalıdır. İlk teşhiste Chrome DevTools Console'da hydration warning'lerini koruyun ve tarayıcıya sunulan HTML'i JavaScript çalışmadan inceleyin: DevTools Command Menu'den 'Disable JavaScript' seçin, sayfayı yenileyin ve Elements panelindeki çıktıyı istemci render'ı ile karşılaştırın. En sık üç kaynak şunlardır: zaman (new Date), rastgelelik (Math.random) ve ortam verisi (window.innerWidth, localStorage, kullanıcının saat dilimi).

Sorunu ölçülebilir hale getirmek için hydration başlangıcı ve bitişi etrafına User Timing işaretleri koyun. Chrome Performance panelindeki bu işaretler, uyumsuzluk sonrası framework'ün DOM'u yeniden oluşturup oluşturmadığını Long Task'larla birlikte gösterir. Aşağıdaki kodda onRecoverableError sayacı, bir RUM endpoint'ine gönderilerek hatanın hangi rota ve build ile ilişkili olduğunu izlenebilir yapar.

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

performance.mark('hydrate:start');

hydrateRoot(document.getElementById('root'), <App />, {
  onRecoverableError(error, info) {
    navigator.sendBeacon('/rum/hydration-error', JSON.stringify({
      message: error.message,
      componentStack: info.componentStack,
      path: location.pathname,
      build: document.documentElement.dataset.build
    }));
  }
});

requestAnimationFrame(() => {
  performance.mark('hydrate:end');
  performance.measure('hydrate', 'hydrate:start', 'hydrate:end');
});

Buradaki kritik incelik, yalnızca console mesajını saymamaktır. Bir metin düğümü uyumsuz olduğunda framework sürümüne ve düğüm tipine bağlı olarak küçük bir alt ağacı istemcide tekrar üretebilir. Performance kaydında 'hydrate:start' ile ilk kullanıcı etkileşimi arasındaki sürede 120 ms'lik bir yeniden oluşturma varsa, aynı rota için düzeltme sonrası bu süreyi örneğin 35 ms ile karşılaştırın. Ölçümü cache etkisinden ayırmak için DevTools Network panelinde cache'i kapatın, en az 20 örnek alın ve p75 değeriyle karar verin.

Reactjs eğitimi: React SSR'da deterministik ilk render kurmak

Bir reactjs eğitimi içinde sık görülen hata, render gövdesinde tarayıcıya ait API çağırmaktır. Aşağıdaki ilk sürümde sunucu 'Geniş ekran' üretemez, istemci ise 1024 pikselde bunu üretir; sonuç, hydration sırasında metin uyumsuzluğudur. Çözüm, ilk render'ı sunucu tarafından bilinen bir değere sabitlemek ve tarayıcı bilgisini effect sonrasında uygulamaktır. useEffect hydration sonrasında çalıştığından, ilk HTML ile ilk istemci render'ı aynı kalır.

function ViewportLabel() {
  const [wide, setWide] = useState(false);

  useEffect(() => {
    const query = window.matchMedia('(min-width: 768px)');
    const update = () => setWide(query.matches);
    update();
    query.addEventListener('change', update);
    return () => query.removeEventListener('change', update);
  }, []);

  return <span>{wide ? 'Geniş ekran' : 'Dar ekran'}</span>;
}

Saat dilimi sorununda sadece new Date çağrısını useEffect'e taşımak, kullanıcıya boş veya yanlış tarih gösterebilir. Daha güvenli desen, sunucuda hesaplanan ISO zamanı ve açık locale bilgisini HTML'e seri hale getirmektir. Sunucu, <script id='page-data' type='application/json'> içine {"createdAt":"2026-09-03T10:00:00.000Z","locale":"tr-TR","timeZone":"Europe/Istanbul"} yazabilir; istemci ilk render'da bu veriyi parse eder. JSON'u script etiketine koyarken kullanıcı girdisindeki < karakterini \u003c olarak escape etmek gerekir, aksi halde kapanış script etiketi enjekte edilebilir.

React'te suppressHydrationWarning yalnızca tek metin düğümündeki, bilinçli ve kaçınılmaz farklar için son çaredir. Bu öznitelik farkı düzeltmez ve alt düğümlere yayılmaz. Örneğin kişiye özel saat için önce sunucunun UTC metnini üretip, sonra istemcide locale biçimine geçmek yerine, sunucuya kullanıcının IANA saat dilimini güvenilir profil verisinden verin. Cookie'den gelen değer doğrudan güvenilir değildir; izin verilen saat dilimleri listesine göre doğrulanmalıdır.

Angular eğitimi ve Vuejs eğitimi için istemci devralma ayrıntıları

Angular eğitimi projelerinde hydration, bootstrap yapılandırmasında açıkça etkinleştirilmelidir. Sunucuda render edilen uygulamada istemcinin aynı provider ağacını kullanmaması, sadece metin farkı değil event handler'ların yeniden bağlanmasına da neden olabilir. Standalone yapılandırmada istemci tarafına aşağıdaki provider'ı ekleyin; sonra DevTools Console'da hydration istatistiklerini ve atlanan bileşenleri kontrol edin.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Angular template'inde Math.random() veya tarih formatlayan impure pipe kullanmak her change detection turunda farklı çıktı üretebilir. Bunun yerine isteğe bağlı veriyi sunucuda üretip TransferState ile taşıyın. Vuejs eğitimi tarafında da aynı kural geçerlidir: setup() içinde Date.now() ile üretilen değer SSR ve istemcide farklıdır. Nuxt veya Vue SSR uygulamasında payload'a koyulan değeri kullanın ya da istemciye özel kodu onMounted() içine alın. onMounted() öncesinde koşullu olarak farklı kök element üretmekten kaçının; <div v-if='mounted'> ile sunucuda hiç düğüm üretmemek, bileşen sınırında gereksiz devralma maliyeti yaratabilir.

Angularjs eğitimi ile sürdürülen eski uygulamalarda gerçek SSR hydration beklentisi kurmayın: AngularJS'in klasik bootstrap akışı sunucu DOM'unu modern framework'lerdeki gibi devralmaz. Aşamalı geçişte AngularJS alanını ayrı bir istemci kökü olarak başlatın ve SSR ağacının içine AngularJS'in DOM'u yeniden yazacağı düğümler yerleştirmeyin. Örneğin <legacy-cart data-bootstrap='... '></legacy-cart> gibi sabit bir host ayırın; AngularJS yalnızca bu host'un çocuklarını yönetmelidir.

Frontend development eğitimi: Playwright ile hydration regresyon testi

Frontend development eğitimi süreçlerinde hydration uyarısını manuel Console kontrolüne bırakmayın. Playwright, sayfa açılırken gelen console mesajlarını yakalayabilir ve CI'ı hata üzerinde durdurabilir. Testi hem Chromium hem WebKit projelerinde koşturun; tarih, Intl ve form kontrolü davranışlarındaki motor farkları bazı uyumsuzlukları yalnızca tek tarayıcıda görünür kılar.

import { test, expect } from '@playwright/test';

test('SSR route has no hydration warning', async ({ page }) => {
  const hydrationErrors = [];

  page.on('console', msg => {
    if (msg.type() === 'warning' && /hydration|hydrated/i.test(msg.text())) {
      hydrationErrors.push(msg.text());
    }
  });

  await page.goto('/products/42', { waitUntil: 'networkidle' });
  await expect(page.locator('[data-testid=product-title]')).toHaveText('Klavye');
  expect(hydrationErrors).toEqual([]);
});

Testin yanlış biçimde yeşil kalmasının yaygın nedeni, geliştirme sunucusunu kullanmaktır. Production SSR çıktısını test edin: uygulamanızı production modda derleyin, gerçek Node sunucusunu başlatın ve Playwright'ın baseURL değerini bu sunucuya verin. Ayrıca testte sabit saat kullanın. Node sürecini TZ=UTC ile başlatmak ve sahte backend yanıtında sabit ISO tarih dönmek, yerel makinedeki saat diliminin CI ile farklı olmasından doğan flake'i keser.

Javascript eğitimi ve frontend framework karşılaştırması için maliyet ölçümü

Javascript eğitimi açısından hydration maliyeti, indirilen JavaScript boyutundan ayrı ölçülmelidir. Chrome Performance panelinde CPU throttling'i 4x yapın, kayıt sırasında sayfayı sert yenileyin ve 'hydrate' User Timing ölçümünüzün etrafındaki scripting süresini inceleyin. Önce sorunlu sürümde p75 hydration süresi, Long Task sayısı ve onRecoverableError sayısını kaydedin. Ardından Date, random ve viewport gibi istemciye bağımlı dalları effect veya sunucu payload'ına taşıyın; aynı cihaz profili, aynı rota ve aynı throttling ile ikinci kaydı alın. Karşılaştırmada yalnızca toplam yükleme süresini değil, hydration aralığındaki yeniden style hesaplama ve DOM mutation sayısını kullanın.

Bir frontend framework karşılaştırması yaparken React, Angular ve Vue'yu sadece render benchmark'ı ile sıralamak yanıltıcıdır. React'te recoverable mismatch telemetry'si, Angular'da hydration istatistikleri, Vue'da SSR warning'leri farklı görünür. Karşılaştırılabilir senaryo kurun: 500 satırlık bir ürün tablosu, sunucudan gelen aynı JSON payload, ilk render'da sabit locale ve sonraki effect'te filtre güncellemesi. Her framework için Performance trace, transfer edilen HTML baytı ve hydration sonrası event handler'ın ilk click gecikmesini kaydedin. react native eğitimi alan ekipler için bu ayrım özellikle önemlidir: React Native'in native view ağacında tarayıcı DOM hydration'ı yoktur; ortak React bileşenindeki Date veya random kaynaklı nondeterminism yine mantıksal hata yaratabilir, fakat Chrome DOM mismatch metriğiyle ölçülemez.

Sık Sorulan Sorular

Reactjs eğitimi projelerinde hydration warning nasıl production ortamında izlenir?

hydrateRoot içindeki onRecoverableError callback'inde hata mesajını, componentStack'i, rota adını ve build kimliğini navigator.sendBeacon ile RUM endpoint'ine gönderin. Hata oranını route ve deploy bazında hesaplayın; sadece Sentry console breadcrumb'ına güvenmeyin, çünkü bazı istemciler warning loglarını filtreler.

Angular eğitimi uygulamasında SSR sonrası click eventleri neden çalışmıyor?

İstemci bootstrap'ında provideClientHydration eksikse veya sunucu ve istemcinin provider ağacı farklıysa Angular sunucu DOM'unu devralmak yerine yeniden oluşturabilir. provideClientHydration(withEventReplay()) ekleyin, ardından üretim build'inde sayfayı açıp hydration istatistiklerinde atlanan bileşen olup olmadığını kontrol edin.

Vuejs eğitimi sırasında Date.now hydration mismatch hatası nasıl düzeltilir?

Date.now değerini setup() içinde üretmeyin. Değeri SSR isteğinde bir kez üretip Vue SSR context veya uygulama payload'ı üzerinden istemciye aktarın. Yalnızca görsel olarak sonradan hesaplanabilecek değerlerde onMounted() kullanın ve SSR ile ilk istemci render'ında aynı placeholder düğümünü koruyun.

Frontend framework karşılaştırması yaparken hydration performansı hangi araçla ölçülmeli?

Chrome DevTools Performance panelini 4x CPU throttling ile kullanın, User Timing ile hydration başlangıç-bitiş işaretleri ekleyin ve Playwright ile console warning regresyonunu test edin. Aynı rota, aynı JSON payload ve aynı tarayıcı koşulunda p75 hydration süresi, Long Task sayısı ve DOM mutation miktarını karşılaştırın.