Angular Academy · Ders

@defer ile Artımlı Hidrasyon

Sayfanın bölümlerini talep üzerine hidrate edin

@defer ile Artımlı Hidrasyon, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Tam Hydration'ın Maliyeti

Tam hydration her bileşeni baştan başlatır. Bunun yerine artımlı hydration, sayfanın bölümlerini ihtiyaç duyulduğunda hydrate eder ve bölümlere ait JavaScript'i gerekene kadar erteler.

defer Üzerine Kurulu

Artımlı hydration, özel hydrate tetikleyicileriyle birlikte @defer bloğunu kullanır. Sunucu içeriği oluşturmaya devam eder; ancak istemci bu içeriği yalnızca bir tetikleyici çalıştığında hydrate eder.

@defer (hydrate on viewport) {
  <app-comments />
}

Etkinleştirme

Hydration sağlayıcısında withIncrementalHydration() kullanarak bu özelliği etkinleştirin. Böylece şablonlardaki hydrate tetikleyicileri kullanılabilir.

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

providers: [provideClientHydration(withIncrementalHydration())]

görünüm alanında hydrate

En yaygın tetikleyici, bir bloğu ekranda görünür hâle geldiğinde hydrate eder. Ekranın altındaki içerik, kullanıcı ona ulaşana kadar etkinleşmeden kalır; böylece JavaScript çalışması azalır.

@defer (hydrate on viewport) {
  <app-related-products />
}

etkileşimde hydrate

Kullanıcı blokla etkileşime geçtiğinde (tıklama, keydown) hydrate edin. Genişletilebilir panel gibi görünür durumda olan ancak nadiren kullanılan araçlar için idealdir.

@defer (hydrate on interaction) {
  <app-share-menu />
}

boşta ve zamanlayıcıyla hydrate

Tarayıcı boşta olduğunda hydrate etmek için hydrate on idle veya bir gecikmeden sonra hydrate etmek için hydrate on timer(2s) kullanın. Kritik olmayan bölgeler için uygundur.

@defer (hydrate on idle) {
  <app-newsletter />
}

asla hydrate etme

hydrate never, sunucuda oluşturulan HTML'yi statik tutar: görüntülenir, ancak bu blok için hiçbir JS gönderilmez. Tamamen görsel, etkileşimsiz içerikler için idealdir.

@defer (hydrate never) {
  <app-footer-links />
}

Sade defer'dan Farkı

CSR bağlamında normal bir @defer, içerik yüklenene kadar bir yer tutucu gösterir. Artımlı hydration ile içerik zaten sunucuda oluşturulmuş ve görünür durumdadır; tetikleyici yalnızca etkileşimin (hydration'ın) ne zaman başlayacağını belirler.

Tetikleyicileri Birleştirme

Bir bloğun önce gerçekleşen olaya göre hydrate edilmesi için tetikleyicileri birleştirebilirsiniz. Böylece hazır olma durumu ile kaynak tasarrufu arasında denge kurulur.

@defer (hydrate on viewport; hydrate on interaction) {
  <app-map />
}

Daha Az Başlangıç JS'si

Ağır veya ekranın altındaki bileşenlerin hydration'ını ertelemek, etkileşim için gereken başlangıç JavaScript'ini azaltır; kritik yoldaki etkileşime kadar geçen süreyi ve INP'yi iyileştirir.

Tetikleyicileri Dikkatle Seçme

Ekranın üst kısmındaki etkileşimli öğeleri hemen veya boşta hydrate edin; ekranın altındaki ve nadiren kullanılan araçları görünüm alanına veya etkileşime kadar erteleyin. Kazanımları doğrulamak için ölçüm yapın.

Hızlı Kontrol

Artımlı hydration konusundaki bilginizi kontrol edin.

Özet

@defer (hydrate ...) ve withIncrementalHydration() kullanarak görünüm alanında, etkileşimde, boşta, zamanlayıcıyla veya hiçbir zaman hydrate etmediniz. Bu yaklaşım, ekranın altındaki ve nadiren kullanılan blokların hydration'ını erteleyerek başlangıç JS'sini azaltır ve etkileşimi iyileştirir.

Sıkça Sorulan Sorular

“@defer ile Artımlı Hidrasyon” dersi ücretsiz mi?

Evet — “@defer ile Artımlı Hidrasyon” 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.

“@defer ile Artımlı Hidrasyon” dersinde ne öğreneceğim?

Sayfanın bölümlerini talep üzerine hidrate edin 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 3. dersidir.

“@defer ile Artımlı Hidrasyon” 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