Hidrasyon Nedir
Hidrasyonun sunucu HTML'sini nasıl yeniden kullandığını anlayın
Hidrasyon Nedir, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Hidratasyonu Tanımlama
Hidratasyon, istemci tarafındaki Angular uygulamasının sunucu tarafından oluşturulan HTML'yi yeniden kullandığı; mevcut DOM'yi atıp yeniden görüntülemek yerine olay dinleyicilerini ve durumu mevcut DOM'ye bağladığı süreçtir.
Hidratasyon Olmadan Yaşam
Eski SSR, yıkıcı hidratasyon kullanıyordu: istemci sunucu DOM'sini silip sıfırdan yeniden görüntülüyordu. Bu durum gözle görülür bir titremeye neden oluyor ve sunucunun yaptığı işi boşa çıkarıyordu.
Yıkıcı Olmayan Hidratasyon
Modern Angular, yıkıcı olmayan hidratasyon gerçekleştirir: mevcut DOM'yi dolaşır, bileşen ağacıyla eşleştirir ve düğümleri yeniden kullanır. Titreme olmaz, daha az iş yapılır ve performans artar.
Ölçümleri Neden İyileştirir
Sunucu HTML'sini yeniden kullanmak, en büyük içeriğin görüntülenmeye devam etmesini sağlayarak LCP'ye yardımcı olur ve yeniden görüntülemeden kaynaklanan düzen kaymalarını önleyerek CLS'ye katkı sağlar. Uygulama yeniden çizim yapılmadan etkileşimli hâle gelir.
İki Aşamalı Görünüm
Birinci aşama: sunucu HTML'yi oluşturur ve gönderir. İkinci aşama: tarayıcı JS'yi indirir, Angular'ı başlatır ve mevcut işaretlemeyi hidratlayarak etkileşimli hâle getirir.
DOM Yapısını Eşleştirme
Hidratasyon, istemci bileşen ağacının sunucunun oluşturduğu yapının aynısını üretmesini gerektirir. Yapılar farklılaşırsa Angular bir hidratasyon uyuşmazlığı bildirir.
// NG0500: During hydration Angular expected <div> but found <span>Yaygın Uyuşmazlık Nedenleri
Doğrudan DOM değiştirme, işaretlemeyi değiştiren yalnızca tarayıcıya özgü dallanmalar, geçersiz HTML iç içe yerleşimi ve belirlenimci olmayan içerik (şablonlardaki Math.random() veya Date.now() gibi) uyuşmazlıklara neden olur.
DOM'yi El İle Düzenlemekten Kaçınma
SSR sırasında DOM'yi zorunlu olarak değiştirmeyin (örneğin Angular dışında innerHTML kullanarak). DOM'nin sahibi Angular olsun; böylece istemci ve sunucu aynı yapıda kalır.
ngSkipHydration Kaçış Noktası
DOM'yi değiştiren üçüncü taraf bir bileşen gibi gerçekten hidratlanamayan bir bileşen için ngSkipHydration ile hidratasyon dışında bırakmayı seçin; Angular yalnızca o alt ağacı yeniden görüntüler.
<app-legacy-widget ngSkipHydration></app-legacy-widget>Hydration için SSR gerekir
Hydration yalnızca yeniden kullanılabilecek, sunucuda oluşturulmuş HTML bulunduğunda uygulanır. Saf bir CSR uygulamasında hydrate edilecek hiçbir şey yoktur; hydration, SSR sürecinin istemci tarafıdır.
Sırada Ne Var
Hydration tam (uygulamanın tamamı yüklenirken hydrate edilir) veya artımlı (bölümler ihtiyaç duyulduğunda hydrate edilir) olabilir. Doğru stratejiyi seçmek performans açısından kritik bir konudur ve sonraki derslerde ele alınacaktır.
Hızlı Kontrol
Hydration konusundaki anlayışınızı kontrol edin.
Özet
Hydration, sunucunun oluşturduğu HTML'yi istemcide yıkıcı olmayan bir şekilde yeniden kullanarak LCP ve CLS değerlerini iyileştirir. Uyuşmazlıklar, elle yapılan DOM değişiklikleri veya belirlenimci olmayan işaretlemeler nedeniyle ortaya çıkar; kaçış yolu olarak ngSkipHydration kullanın. Hydration, SSR sürecinin istemci tarafıdır.
Sıkça Sorulan Sorular
“Hidrasyon Nedir” dersi ücretsiz mi?
Evet — “Hidrasyon Nedir” 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 Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Hidrasyon Nedir” dersinde ne öğreneceğim?
Hidrasyonun sunucu HTML'sini nasıl yeniden kullandığını anlayın Angular 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.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular 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 1. dersidir.
“Hidrasyon Nedir” 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 Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular 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.