Angular Academy · Ders

Tam Hidrasyonu Etkinleştirme

Yeniden görüntülemeyi önlemek için hidrasyonu etkinleştirin

Tam Hidrasyonu Etkinleştirme, CoddyKit'te ücretsiz bir Angular 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, 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.

Hydration'ı Etkinleştirme

Tam hydration, uygulama sağlayıcılarınıza provideClientHydration() eklenerek etkinleştirilir. ng add @angular/ssr şeması bunu sizin için ekler.

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Nereye Eklenir

İstemciyi başlatmak için kullanılan yapılandırmayla aynı olan tarayıcı appConfig sağlayıcılarına eklenmelidir. Sunucu yapılandırması, provideServerRendering() ile bunun üzerine birleştirilir.

Tam Ne Anlama Gelir

Tam (hemen gerçekleşen) hydration, JavaScript yüklendiğinde ve Angular başlatıldığında bileşen ağacının tamamını hydrate eder. Her bileşen aynı anda etkileşimli hâle gelir.

Olayları Yeniden Oynatma

Hydration tamamlanmadan önce gerçekleşen kullanıcı etkileşimlerinin yakalanıp sonrasında yeniden oynatılması için withEventReplay() özelliğini etkinleştirin. Böylece yavaş cihazlarda tıklamaların kaybolması önlenir.

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

providers: [provideClientHydration(withEventReplay())]

HTTP Aktarım Önbelleği

Hydration etkin olduğunda, sunucudan gelen HttpClient GET yanıtları varsayılan olarak TransferState içine önbelleğe alınır; böylece istemci başlatıldıktan sonra aynı verileri yeniden istemez.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Hydration'ı Doğrulama

Geliştirme modunda konsolu açın. Angular, hydration istatistiklerini (hydrate edilen bileşenler ve yeniden kullanılan düğümler) günlüğe kaydeder. Uyuşmazlık uyarısı yoksa hydration sorunsuz şekilde tamamlanmıştır.

// Angular hydrated 24 component(s) and 187 node(s)

Uyuşmazlıkları Giderme

NG0500 uyuşmazlık hataları görürseniz belirlenimci olmayan şablonları veya elle yapılan DOM değişikliklerini bulun. Sunucu ve istemci çıktılarının aynı olması için işaretlemeyi belirlenimci hâle getirin.

Tarayıcı API'lerini Koruma

İlk oluşturma sırasında window veya localStorage ile etkileşime giren kod, sunucu ve istemci arasındaki işaretlemeyi değiştirebilir. isPlatformBrowser ile kontrol edin veya kodu görünüm başlatıldıktan sonra çalıştırın.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Tam Hydration'ın Bedeli

Tam hydration basittir; ancak tüm bileşen JavaScript'ini baştan indirip çalıştırır. Büyük uygulamalarda bu durum etkileşimi geciktirebilir; artımlı hydration bu sorunu ele alır.

i18n ve Hydration

Hydration, Angular i18n ile çalışır; ancak çevrilen içeriğin belirlenimci olduğundan emin olun. Sunucu ve istemcideki yerel ayarların farklı olması hydration hatalarına neden olur.

Üretim Kontrolü

Yayınlamadan önce üretim için derleme yapın, SSR çıktısını sunun ve ağ sekmesinde ve konsolda hydration'ın uyuşmazlık olmadan çalıştığını, aktarım önbelleğinin de verilerin iki kez alınmasını önlediğini doğrulayın.

Hızlı Kontrol

Tam hydration konusundaki bilginizi kontrol edin.

Özet

provideClientHydration() ile tam hydration'ı etkinleştirdiniz, hydration öncesindeki tıklamalar için withEventReplay() eklediniz, HTTP aktarım önbelleğine güvendiniz, tarayıcı API'lerini korudunuz ve hydration'ın sorunsuz gerçekleştiğini doğruladınız. Tam hydration basittir; ancak tüm JS'yi baştan yükler.

Sıkça Sorulan Sorular

“Tam Hidrasyonu Etkinleştirme” dersi ücretsiz mi?

Evet — “Tam Hidrasyonu Etkinleştirme” 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.

“Tam Hidrasyonu Etkinleştirme” dersinde ne öğreneceğim?

Yeniden görüntülemeyi önlemek için hidrasyonu etkinleştirin 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 2. dersidir.

“Tam Hidrasyonu Etkinleştirme” 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.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön