Hydration Hataları: Nedenler ve Çözümler
Sunucu ve istemci HTML'i arasındaki uyumsuzlukları belirleyin ve bunları suppressHydrationWarning ile düzeltin.
Hydration Hataları: Nedenler ve Çözümler, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Hidrasyon Hatası Nedir?
React'in sunucuda oluşturduğu HTML, React'in istemcide beklediği sanal DOM ile eşleşmediğinde bir hidrasyon hatası oluşur. React bir uyarı kaydeder ve bileşeni baştan oluşturur; bu da kısa süreli görüntü titremesine neden olur.
Yaygın Neden 1: Rastgele Değerler
Oluşturma sırasında Math.random(), Date.now() veya crypto.randomUUID() kullanmak, sunucuda ve istemcide farklı değerler üretir.
// Bad — different on server vs client:
<div id={Math.random().toString()}>...</div>
// Fix — use useId() (stable across server/client):
import { useId } from 'react';
function Component() {
const id = useId();
return <div id={id}>...</div>;
}Yaygın Neden 2: Yalnızca Tarayıcıya Özgü API'ler
Oluşturma sırasında localStorage, window.innerWidth veya navigator okumak sunucunun çökmesine ya da farklı değerler üretmesine neden olur.
// Bad — localStorage doesn't exist on server:
<div>{localStorage.getItem('theme')}</div>
// Fix — read in useEffect (client-only):
const [theme, setTheme] = useState('light');
useEffect(() => {
setTheme(localStorage.getItem('theme') ?? 'light');
}, []);Yaygın Neden 3: Tarih/Saat Biçimlendirme
Yerel ayarları dikkate alan tarih biçimlendirme, sunucuda (UTC/sunucu yereli) ve istemcide (tarayıcı yereli) farklı dizeler döndürür.
// Risky — locale may differ:
<time>{new Date().toLocaleDateString()}</time>
// Fix — use a consistent locale:
<time>{new Date().toLocaleDateString('en-US', { timeZone: 'UTC' })}</time>Yaygın Neden 4: Geçersiz HTML İç İçe Yerleşimi
React, istemci HTML'sini sanal DOM'dan oluşturur; ancak geçersiz HTML iç içe yerleşimi (örneğin, <p> içinde <p> bulunması), tarayıcıların DOM'u farklı biçimde yeniden düzenlemesine ve uyuşmazlıklara neden olur.
// Bad — browser auto-closes the nested <p>:
<p>Outer <p>Inner</p> text</p>
// Fix — use <div> or correct semantic elements:
<div>Outer <p>Inner</p> text</div>Yaygın Neden 5: Duruma Dayalı Koşullu Oluşturma
Yalnızca istemcide bulunan duruma (kullanıcı kimlik doğrulaması veya ekran genişliği gibi) göre farklı oluşturan bileşenlerde uyuşmazlık oluşur; çünkü sunucu bu durum olmadan oluşturma yapar.
// Bad — server renders 'Guest', client re-renders 'Alice' immediately:
<h1>{user?.name ?? 'Guest'}</h1>
// Fix — use a mounted guard to defer client-only rendering:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return <h1>Guest</h1>; // match server outputsuppressHydrationWarning
Uyuşmazlıkların kasıtlı olduğu öğelerde (örneğin istemci tarafında biçimlendirilen zaman damgalarında) suppressHydrationWarning kullanın. Bu, uyarıyı yalnızca o öğe için bastırır.
<time suppressHydrationWarning dateTime={isoDate}>
{new Date(isoDate).toLocaleString()}
</time>ssr: false ile Dinamik İçe Aktarma
Next.js'te, bir bileşenin sunucuda hiç oluşturulmasını önlemek için dynamic(fn, { ssr: false }) kullanın; bu, yalnızca istemcide çalışan bileşenlerdeki hidrasyon uyuşmazlıklarını ortadan kaldırır.
import dynamic from 'next/dynamic';
const ClientOnlyChart = dynamic(() => import('./Chart'), { ssr: false });
export default function Dashboard() {
return <ClientOnlyChart />; // only renders in the browser
}Hidrasyon Hatalarında Hata Ayıklama
React 18, geliştirme sırasında tam DOM düğümü uyuşmazlığını gösteren ayrıntılı hidrasyon hata iletileri kaydeder. Sunucu HTML'sini React ağacına karşı incelemek için tarayıcı DevTools'unu kullanın.
Kararlı Kimlikler için useId
useId(), sunucu ve istemci oluşturma işlemleri arasında tutarlı olan kararlı ve benzersiz kimlikler üretir; bunu id/htmlFor çiftleri ve ARIA öznitelikleri için kullanın.
function FormInput({ label }: { label: string }) {
const id = useId();
return (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} />
</div>
);
}Hidrasyon Hatalarını Sınama
Next.js uygulamanızı geliştirme kipinde (npm run dev) çalıştırın ve tarayıcı konsolunu izleyin. Hidrasyon uyuşmazlıkları, bileşen yığını izleri içeren kırmızı uyarılar olarak görünür.
Kısa Sınama
localStorage'dan okuduğu için sunucuda ve istemcide farklı oluşturan bir bileşen için en iyi çözüm nedir?
Özet
Hidrasyon uyuşmazlıklarının nedenleri arasında rastgele değerler, yalnızca tarayıcıya özgü API'ler, yerel ayara duyarlı biçimlendirme, geçersiz HTML iç içe yerleşimi ve yalnızca istemcide yapılan koşullu oluşturma bulunur. Bunları useId(), yalnızca istemciye özgü durum için useEffect, kasıtlı farklılıklar için suppressHydrationWarning ve yalnızca istemcide çalışan bileşenler için dynamic({ ssr: false }) ile düzeltin.
Sıkça Sorulan Sorular
“Hydration Hataları: Nedenler ve Çözümler” dersi ücretsiz mi?
Evet — “Hydration Hataları: Nedenler ve Çözümler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Hydration Hataları: Nedenler ve Çözümler” dersinde ne öğreneceğim?
Sunucu ve istemci HTML'i arasındaki uyumsuzlukları belirleyin ve bunları suppressHydrationWarning ile düzeltin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Hydration Hataları: Nedenler ve Çözümler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React SSR'nin Perde Arkasında Çalışması
- Hydration Hataları: Nedenler ve Çözümler
- Seçici Hydration ve Akışla HTML
- Adalar Mimarisi Deseni