0Pricing
Angular Academy · Lekcja

Konfiguracja Angular SSR

Dodawać SSR za pomocą Angular CLI

Konfiguracja Angular SSR to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dodawanie SSR

Najszybszym sposobem włączenia SSR jest użycie schematu ng add @angular/ssr. Konfiguruje on za Ciebie kompilowanie serwera, serwer oparty na Express oraz hydratację.

// terminal
// ng add @angular/ssr

Nowe projekty

Podczas tworzenia nowej aplikacji możesz od razu włączyć SSR za pomocą odpowiedniej flagi, dzięki czemu projekt będzie od początku gotowy do obsługi SSR.

// ng new my-app --ssr

Co dodaje schemat

Dodaje plik server.ts (serwer Express), mechanizm uruchamiający w main.server.ts, plik app.config.server.ts, aktualizuje angular.json o opcje serwera oraz włącza hydratację w konfiguracji aplikacji.

provideServerRendering

Konfiguracja aplikacji serwerowej udostępnia silnik SSR za pomocą provideServerRendering(), połączonego z konfiguracją przeglądarki.

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

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

Hydratacja po stronie klienta

Konfiguracja przeglądarki włącza hydratację, dzięki czemu klient ponownie wykorzystuje kod HTML serwera zamiast renderować go od początku. Schemat dodaje tę konfigurację automatycznie.

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

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

Serwer Express

server.ts tworzy aplikację Express, która udostępnia zasoby statyczne, a renderowanie kodu HTML dla pozostałych tras przekazuje silnikowi Angular SSR.

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

Serwer deweloperski

Podczas programowania polecenie ng serve automatycznie uruchamia SSR za pomocą buildera aplikacji, dzięki czemu bez dodatkowych kroków widzisz dane wyrenderowane przez serwer i działającą hydratację.

// ng serve

Kompilowanie do produkcji

Kompilacja produkcyjna tworzy pakiet browser oraz pakiet server. Aby obsługiwać SSR na produkcji, należy uruchomić punkt wejścia serwera Node.

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

Interfejsy API tylko dla przeglądarki

Kod jest również uruchamiany na serwerze, gdzie nie istnieją window, document ani localStorage. Dostęp do nich należy zabezpieczyć, w przeciwnym razie SSR zakończy się błędem.

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

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

Bezwzględne adresy URL dla HTTP

Na serwerze względne adresy URL API nie mają źródła. Należy używać adresów bezwzględnych albo skonfigurować adres bazowy, aby wywołania HttpClient po stronie serwera były poprawnie rozwiązywane.

Weryfikowanie działania SSR

Aby potwierdzić działanie SSR, wyślij żądanie do strony i sprawdź surową odpowiedź, na przykład za pomocą curl. W kodzie HTML powinien znajdować się wyrenderowany materiał, a nie tylko pusty główny element aplikacji.

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

Szybki test

Sprawdź swoją wiedzę o konfiguracji SSR.

Podsumowanie

Skonfigurowałeś SSR za pomocą ng add @angular/ssr: polecenie dodaje serwer Express, provideServerRendering() i hydratację klienta. Pamiętaj o zabezpieczaniu interfejsów API dostępnych tylko w przeglądarce, używaniu bezwzględnych adresów URL po stronie serwera oraz sprawdzaniu wyrenderowanego kodu HTML w surowej odpowiedzi.

Często zadawane pytania

Czy lekcja „Konfiguracja Angular SSR” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Angular SSR” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja Angular SSR”?

Dodawać SSR za pomocą Angular CLI Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Konfiguracja Angular SSR”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dlaczego renderowanie po stronie serwera
  2. Konfiguracja Angular SSR
  3. Trasy serwera i tryby renderowania
  4. Przekazywanie stanu do klienta
← Powrót do Angular Academy