0Pricing
Angular Academy · Ders

Angular SSR'yi Kurma

Angular CLI ile SSR ekleyin

Angular SSR'yi Kurma, 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.

SSR Ekleme

SSR'yi etkinleştirmenin en hızlı yolu ng add @angular/ssr şemasıdır. Bu şema sunucu derlemesini, Express tabanlı bir sunucuyu ve hidratasyonu sizin için yapılandırır.

// terminal
// ng add @angular/ssr

Yeni Projeler

Yeni bir uygulama oluştururken doğrudan SSR'yi seçebilirsiniz; böylece proje SSR'ye hazır olarak başlar.

// ng new my-app --ssr

Şema Neler Ekler

Bir server.ts (Express sunucusu), bir main.server.ts başlatıcısı ve bir app.config.server.ts ekler; sunucu seçenekleriyle angular.json dosyasını günceller ve uygulama yapılandırmasında hidratasyonu etkinleştirir.

provideServerRendering

Sunucu uygulaması yapılandırması, tarayıcı yapılandırmanızla birleştirilen provideServerRendering() aracılığıyla SSR altyapısını sağlar.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

İstemcide Hidratasyon

Tarayıcı yapılandırması, istemcinin sunucu HTML'sini yeniden oluşturmak yerine yeniden kullanması için hidratasyonu etkinleştirir. Bu işlem şema tarafından otomatik olarak eklenir.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

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

Express Sunucusu

server.ts, statik varlıkları sunan ve diğer tüm yollar için HTML görüntülemeyi Angular SSR altyapısına devreden bir Express uygulaması oluşturur.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Geliştirme Sunucusu

Geliştirme sırasında ng serve, uygulama oluşturucusuyla SSR'yi otomatik olarak çalıştırır; böylece ek adımlar olmadan sunucu tarafından oluşturulan çıktıyı ve hidratasyonu görürsünüz.

// ng serve

Üretim İçin Derleme

Üretim derlemesi bir browser paketi ve bir server paketi üretir. Üretimde SSR sunmak için Node sunucusunun girişini çalıştırırsınız.

// ng build
// node dist/my-app/server/server.mjs

Yalnızca Tarayıcıda Bulunan API'ler

Kod sunucuda da çalışır; ancak burada window, document ve localStorage bulunmaz. Bu erişimleri korumaya alın; aksi takdirde SSR sırasında uygulama çöker.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

HTTP İçin Mutlak URL'ler

Sunucuda göreli API URL'lerinin kaynağı yoktur. Mutlak URL'ler kullanın veya bir temel yapılandırın; böylece sunucu tarafındaki HttpClient çağrıları doğru şekilde çözümlenir.

SSR'nin Çalıştığını Doğrulama

SSR'yi doğrulamak için bir sayfa isteyin ve ham yanıtı inceleyin (örneğin curl ile). HTML içinde yalnızca boş bir uygulama kökü değil, oluşturulmuş içeriği görmelisiniz.

// curl http://localhost:4000/ | grep "<h1>"

Hızlı Kontrol

SSR kurulumu bilginizi kontrol edin.

Özet

SSR'yi ng add @angular/ssr ile kurdunuz: bu işlem bir Express sunucusu, provideServerRendering() ve istemci hidratasyonu ekler. Yalnızca tarayıcıda bulunan API'leri korumaya almayı, sunucu tarafında mutlak URL'ler kullanmayı ve oluşturulmuş HTML'yi ham yanıtta doğrulamayı unutmayın.

Sıkça Sorulan Sorular

“Angular SSR'yi Kurma” dersi ücretsiz mi?

Evet — “Angular SSR'yi Kurma” 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.

“Angular SSR'yi Kurma” dersinde ne öğreneceğim?

Angular CLI ile SSR ekleyin 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.

“Angular SSR'yi Kurma” 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

  1. Sunucu Taraflı Görüntüleme Neden Kullanılır
  2. Angular SSR'yi Kurma
  3. Sunucu Rotaları ve Görüntüleme Modları
  4. Durumu İstemciye Aktarma
← Angular Academy Sayfasına Dön