Sunucu Rotaları ve Görüntüleme Modları
Her rota için önceden görüntüleme, SSR ve CSR'yi yapılandırın
Sunucu Rotaları ve Görüntüleme Modları, 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.
Tek Bir Yöntem Her Duruma Uymaz
Her yol aynı şekilde görüntülenmemelidir. Angular SSR, her yol için bir görüntüleme kipi belirlemenize olanak tanır: sunucuda görüntüleme, istemcide görüntüleme veya derleme zamanında önceden görüntüleme.
Üç Kip
RenderMode.Server her istekte görüntüler, RenderMode.Client yalnızca tarayıcıda görüntüler (CSR) ve RenderMode.Prerender derleme zamanında statik HTML üretir (SSG).
Sunucu Yolları Yapılandırması
Yolları görüntüleme kiplerine eşleyen bir ServerRoute[] tanımlayın ve ardından bunu sunucu yapılandırmasında provideServerRouting ile sağlayın.
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'dashboard', renderMode: RenderMode.Client },
{ path: '**', renderMode: RenderMode.Server }
];Bağlantıları Kurma
SSR altyapısının her yolu nasıl işleyeceğini bilmesi için yolları sunucu uygulaması yapılandırmasına kaydedin.
// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';
providers: [
provideServerRendering(),
provideServerRouting(serverRoutes)
]Ne Zaman Önceden Görüntülenmeli
Sabit ve herkese açık sayfalar için Prerender seçin: ana sayfa, hakkında ve belgeler. Bu sayfalar bir kez HTML'ye dönüştürülür, CDN'den anında sunulur ve istek başına sunucu maliyeti oluşturmaz.
Sunucu Ne Zaman Kullanılmalı
İçeriği istek veya kullanıcı başına değişen, ancak SEO ya da hızlı ilk görüntüleme gerektiren sayfalar için Server seçin; canlı stok bilgisi içeren ürün sayfası buna örnektir.
İstemci Ne Zaman Kullanılmalı
SEO'nun ve ilk görüntülemenin çok önemli olmadığı, son derece etkileşimli ve özel sayfalar için Client seçin; kimlik doğrulamalı bir pano buna örnektir. Sunucu bir kabuk gönderir ve görüntülemeyi tarayıcı yapar.
Dinamik Parametreleri Önceden Görüntüleme
Parametreli yollar için, getPrerenderParams ile bir liste döndürerek önceden görüntüleyicinin hangi parametreleri oluşturacağını belirtmeniz gerekir.
{
path: 'product/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const ids = await fetchProductIds();
return ids.map(id => ({ id }));
}
}Önceden Görüntüleme İçin Geri Dönüş
Önceden görüntülenmeyen parametreler çalışma zamanında sunucu veya istemci görüntülemeye geri dönebilir. Böylece popüler öğeleri önceden görüntüler, uzun kuyruğu isteğe bağlı olarak oluşturursunuz.
Yol Başına Üst Bilgiler ve Durum
Sunucu yolları yanıt üst bilgilerini ve durum kodlarını ayarlayabilir; bu, önbelleğe alma politikası uygulamak veya bulunamayan bir yol işleyicisinden 404 döndürmek için kullanışlıdır.
{
path: 'old-page',
renderMode: RenderMode.Server,
headers: { 'Cache-Control': 'no-store' }
}Kipleri Stratejik Olarak Birleştirme
Gerçek bir uygulama kipleri birleştirir: pazarlama sayfalarını önceden görüntüler, SEO açısından kritik dinamik sayfaları sunucuda görüntüler ve oturum açma arkasındaki uygulamayı istemcide görüntüler. Böylece maliyet ve performans birlikte optimize edilir.
Hızlı Kontrol
Görüntüleme kipleri bilginizi kontrol edin.
Özet
ServerRoute[] ve provideServerRouting ile yol başına görüntülemeyi yapılandırdınız: sabit ve herkese açık sayfalar için Prerender, dinamik SEO sayfaları için Server ve özel, etkileşimli sayfalar için Client; buna dinamik yollar için önceden görüntüleme parametreleri de dahildir.
Sıkça Sorulan Sorular
“Sunucu Rotaları ve Görüntüleme Modları” dersi ücretsiz mi?
Evet — “Sunucu Rotaları ve Görüntüleme Modları” 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.
“Sunucu Rotaları ve Görüntüleme Modları” dersinde ne öğreneceğim?
Her rota için önceden görüntüleme, SSR ve CSR'yi yapılandırı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 3. dersidir.
“Sunucu Rotaları ve Görüntüleme Modları” 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