Einführung in Angular 17 SSR

Was ist Angular 17 SSR?

Das serverseitige Rendering (SSR) in Angular 17 ermöglicht das Rendering einer Angular-Anwendung auf dem Server, wodurch sie zunächst schneller angezeigt werden kann. Im Gegensatz zu herkömmlichen Single-Page Applications (SPAs), die vollständig im Browser gerendert werden, generiert SSR den HTML-Inhalt vom Server und sendet ihn an den Client. Dies beschleunigt die Ladezeiten der ersten Seite und bietet Vorteile für die Search Engine Optimization (SEO) und das Teilen von Links in sozialen Medien.

Wie bindet man Angular SSR in ein Projekt ein?

Um Angular SSR in ein neues Projekt zu integrieren, kann man den Befehl ng new --ssr verwenden. Bei bestehenden Projekten kann SSR mit dem Befehl ng add @angular/ssr hinzugefügt werden. Alternativ bietet Angular 17 die Möglichkeit, Anwendungen mit dem Befehl ng build --prerender vorzuberechnen, wodurch die Notwendigkeit des Node.js-Hostings entfällt und statische, vorberechnete HTML-Dateien verwendet werden können.

Konfiguration und Struktur von Angular SSR

Durch das Hinzufügen von Angular Universal mit dem Befehl ng add @nguniversal/express-engine wird eine neue Ordnerstruktur im Projekt erstellt. Zu den wichtigen hinzugefügten Dateien gehören main.server.ts für den Server-App-Bootstrapper, app.server.module.ts für das serverseitige Anwendungsmodul und server.ts für den Express-Webserver. Die package.json konfiguriert z. B. spezifische Skripte für SSR:

1{
2  "start": "ng run APP_NAME:serve-ssr",
3  "build": "ng build && ng run APP_NAME:server",
4  "serve": "node dist/APP_NAME/server/main.js"
5}

APP_NAME steht hier für den Namen der Anwendung. Diese Konfiguration ermöglicht die Verwendung von SSR sowohl in der Entwicklung als auch in der Produktion und hilft, SSR-spezifische Fehler während der Entwicklung zu erkennen.

Warum ist Client-Hydrierung wichtig?

Ein wesentlicher Aspekt von Angular 17 SSR ist das Konzept der Client-Hydrierung. Bei diesem Prozess übernimmt Angular das vom Server gerenderte DOM und aktualisiert es bei Bedarf mit aktuellen Daten. Dieser Prozess der Hydrierung überträgt Markup und Daten vom Server zum Client, ohne dass das gesamte DOM im Browser neu aufgebaut werden muss. Dies führt zu einer effizienteren Nutzung der vom Server vorgeladenen Inhalte und verbessert die Gesamtleistung der Anwendung.

Wie gehe ich mit der localStorage-API um?

Es ist wichtig zu beachten, dass der Angular-Code jetzt auf dem Server ausgeführt wird und die Verwendung der localStorage-API unter anderem zu Fehlern führen kann. Um dies zu umgehen, kann man entweder eine Bedingung integrieren, um die Plattform zu überprüfen oder einfacher, den afterNextRender-Lifecycle-Hook verwenden. Da der erste Render-Hook auf dem Server stattfindet, wird alles im afterNextRender-Hook auf dem Client ausgeführt.

Fazit

Angular 17 bringt mit seinem verbesserten SSR-Ansatz erhebliche Vorteile in Bezug auf Leistung und Suchmaschinenoptimierung. Durch die einfache Integration und Konfiguration von SSR in neue und bestehende Projekte sowie die fortschrittlichen Funktionen wie Client-Hydrierung und Pre-Rendering bietet Angular 17 Entwicklern leistungsstarke Tools für die Erstellung von Hochleistungs-Webanwendungen.