Durumu İstemciye Aktarma
Durum aktarımıyla yinelenen isteklerden kaçının
Durumu İstemciye Aktarma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. 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.
İki Kez Veri Alma Sorunu
SSR sırasında sunucu, HTML'yi oluşturmak için veri alır. Yardımcı bir mekanizma olmadan istemci, hidratasyondan sonra aynı veriyi yeniden alır; bu da bir isteği boşa harcar ve içerikte titreme riski oluşturur.
TransferState İmdada Yetişiyor
Angular'ın TransferState özelliği, sunucudaki verileri HTML içine serileştirir; ardından istemci bu verileri yeniden almak yerine okur. Veriler yanıtta bir betik etiketi içinde taşınır.
Nasıl Taşınır
Sunucuda depolanan durum, sayfanın içine JSON olarak gömülür. İstemci başlatıldığında bu verileri seri hâlinden çıkarır; böylece ilk görüntüleme, sunucunun kullandığı verilerin aynısını kullanır.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>makeStateKey Kullanımı
makeStateKey ile türü belirlenmiş bir anahtar oluşturun, ardından TransferState hizmeti üzerinden okuyun veya yazın.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Önce Oku, Sonra Al Deseni
Hem sunucuda hem istemcide: anahtar TransferState içinde varsa onu kullanın; yoksa veriyi alın. Sunucu veriyi alıp depolar; istemci depolanan değeri bulur ve çağrıyı atlar.
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClient Bunu Otomatik Yapar
provideClientHydration(withHttpTransferCacheOptions()) çağrısı (hidratasyonla varsayılan olarak etkindir), HttpClient'in sunucudan gelen GET yanıtlarını TransferState içinde önbelleğe almasını sağlar; böylece aynı istemci istekleri manuel anahtarlar olmadan önbellekten karşılanır.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Titremeyi Önleme
İstemci aktarılan verileri yeniden kullandığı için hidratasyondan sonraki görünüm sunucu HTML'siyle tamamen eşleşir ve içeriğin kaybolup yeniden yüklendiği kısa süreli görüntülemeyi önler.
Güvenlik Notu
Aktarılan durum herkese açık HTML içine gömülür. Gizli bilgileri, belirteçleri veya sayfa kaynağında açığa çıkarmak istemeyeceğiniz kullanıcıya özel verileri hiçbir zaman TransferState içine koymayın.
Özel ve Otomatik Kullanım
HTTP aktarım önbelleği, GET tabanlı veri alımlarının çoğunu otomatik olarak kapsar. Sunucudan istemciye taşımak istediğiniz HTTP dışı hesaplanmış durumlar için manuel makeStateKey kullanın.
Önbellek Kapsamı
HTTP aktarım önbelleği istek başınadır ve istemcide bir kez kullanılır. İlk eşleşen istemci isteği bunu okuduktan sonra sonraki çağrılar normal şekilde ağa gider.
Çalıştığını Doğrulama
SSR yanıtını inceleyin ve gömülü durum betiğini arayın. Tarayıcının ağ sekmesinde, hidratasyondan hemen sonra yinelenen veri alımının atlandığını görmelisiniz.
Hızlı Kontrol
Durum aktarımı bilginizi kontrol edin.
Özet
Verileri TransferState ve makeStateKey ile sunucudan istemciye taşımayı, otomatik HTTP aktarım önbelleğini kullanmayı, iki kez veri almayı ve titremeyi önlemeyi, özel verileri herkese açık şekilde gömülü durumun dışında tutmayı öğrendiniz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 38
- Dersler
- 144
Sıkça Sorulan Sorular
“Durumu İstemciye Aktarma” dersi ücretsiz mi?
Evet — “Durumu İstemciye Aktarma” 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.
“Durumu İstemciye Aktarma” dersinde ne öğreneceğim?
Durum aktarımıyla yinelenen isteklerden kaçını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 4. dersidir.
“Durumu İstemciye Aktarma” 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
- Sunucu Taraflı Görüntüleme Neden Kullanılır
- Angular SSR'yi Kurma
- Sunucu Rotaları ve Görüntüleme Modları
- Durumu İstemciye Aktarma