Angular Academy · Lektion

Angular-SSR einrichten

SSR mit der Angular CLI hinzufügen

Angular-SSR einrichten ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

SSR hinzufügen

SSR lässt sich am schnellsten mit dem Schematic ng add @angular/ssr aktivieren. Dadurch werden der Server-Build, ein Express-basierter Server und die Hydration für Sie eingerichtet.

// terminal
// ng add @angular/ssr

Neue Projekte

Beim Erstellen einer neuen App können Sie SSR direkt über das SSR-Flag aktivieren, sodass das Projekt von Anfang an für SSR vorbereitet ist.

// ng new my-app --ssr

Was das Schematic hinzufügt

Es fügt eine server.ts (Express-Server), einen main.server.ts-Bootstrap, eine app.config.server.ts hinzu, aktualisiert angular.json mit Serveroptionen und aktiviert die Hydration in der App-Konfiguration.

provideServerRendering

Die Server-App-Konfiguration stellt die SSR-Engine über provideServerRendering() bereit und führt sie mit Ihrer Browser-Konfiguration zusammen.

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

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

Hydration auf dem Client

Die Browser-Konfiguration aktiviert die Hydration, sodass der Client das Server-HTML wiederverwendet, statt es erneut zu rendern. Das wird vom Schematic automatisch hinzugefügt.

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

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

Der Express-Server

server.ts erstellt eine Express-App, die statische Assets ausliefert und das Rendern des HTML für alle anderen Routen an die Angular-SSR-Engine delegiert.

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

Entwicklungsserver

Während der Entwicklung führt ng serve SSR automatisch mit dem Application Builder aus. Dadurch sehen Sie ohne zusätzliche Schritte serverseitig gerenderte Ausgaben und Hydration.

// ng serve

Für die Produktion erstellen

Ein Produktions-Build erzeugt ein browser-Bundle und ein server-Bundle. Für SSR in der Produktion starten Sie den Node-Server-Einstiegspunkt.

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

Nur im Browser verfügbare APIs

Der Code wird auch auf dem Server ausgeführt, wo window, document und localStorage nicht existieren. Sichern Sie solche Zugriffe ab, sonst stürzt die App während des SSR ab.

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

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

Absolute URLs für HTTP

Auf dem Server haben relative API-URLs keinen Ursprung. Verwenden Sie absolute URLs oder konfigurieren Sie eine Basis, damit serverseitige HttpClient-Aufrufe korrekt aufgelöst werden.

Überprüfen, ob SSR funktioniert

Um SSR zu bestätigen, rufen Sie eine Seite ab und untersuchen Sie die unveränderte Antwort (zum Beispiel mit curl). Das HTML sollte gerenderte Inhalte enthalten und nicht nur ein leeres App-Root-Element.

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

Schnelltest

Überprüfen Sie Ihr Wissen über die SSR-Einrichtung.

Zusammenfassung

Sie haben SSR mit ng add @angular/ssr eingerichtet: Dabei werden ein Express-Server, provideServerRendering() und die clientseitige Hydration hinzugefügt. Denken Sie daran, nur im Browser verfügbare APIs abzusichern, serverseitig absolute URLs zu verwenden und gerendertes HTML in der unveränderten Antwort zu überprüfen.

Häufig gestellte Fragen

Ist die Lektion „Angular-SSR einrichten“ kostenlos?

Ja — der vollständige Text von „Angular-SSR einrichten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Angular-SSR einrichten“?

SSR mit der Angular CLI hinzufügen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Angular-SSR einrichten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy