© LuckyImages/Shutterstock.com
Server-side Rendering und Search Engine Optimization

Angular Universal: SPA auf dem Server


Es ist geschafft! Die neue Single Page Application wird veröffentlicht. Gespannt wartet man auf die ersten Besucher und es passiert ... nichts. Schnell stellt man fest, dass die Anwendung nicht über eine Suchmaschine gefunden wird. Klar: Die Anwendung wird erst auf dem Client gerendert, aber der Suchmaschinenbot kann oftmals kein JavaScript ausführen. Wie können wir dennoch dafür sorgen, dass unsere Anwendung über Suchmaschinen gefunden wird? Angular Universal schafft hier Abhilfe.

Universal JavaScript oder Isomorphic JavaScript – zwei Begriffe, über die man in der Webwelt in letzter Zeit hin und wieder mal stolpert. Doch dahinter verbirgt sich ein recht einfaches, aber interessantes und mächtiges Konzept: Das Benutzen von JavaScript-Code, der sowohl auf dem Client (d. h. im Browser) als auch auf dem Server läuft. Doch was ist die Motivation, den gleichen Code auf beiden Seiten laufen zu lassen? Als Beispiel hierfür bietet sich sehr gut die Validierung von Modellen an. Nehmen wir an, wir haben ein Kundenmodell, bestehend aus einem Vor- und Nachnamen. Wir erwarten, dass im Modell immer Vor- und Nachname gesetzt werden. Dazu kann der Validierungscode wie folgt ausschauen:

export function validateCustomerModel(model: Customer): boolean { return model.firstName && model.lastName; }

Diese einfache Funktion kann zur Validierung des Kundenmodells genutzt werden. Auf der Seite des Clients können wir sie nutzen, um dem Benutzer direkt bei der Eingabe mitzuteilen, dass er noch nicht alle benötigen Felder ausgefüllt.

Gleichzeitig muss der Server jedes eingehende Modell prüfen, bevor er es beispielsweise in eine Datenbank schreibt (Never trust the client). Das bedeutet, dass auch der Server die gleiche Prüfung vornehmen muss. Anstatt den Code für die Prüfung zu duplizieren, kann der gleiche Code in einem Node.js-Server verwendet werden.

Das bedeutet, dass wir in der Lage sind, Teile der Geschäftslogik einmalig zu entwickeln und auf beiden Seiten zu benutzen. Das spart Zeit, da der Code wiederverwendet werden kann und nur einmal getestet werden muss. Und mit der Zeitersparnis bleiben mehr Zeit und Budget für weitere Features übrig.

Single Page Application auf dem Server – Server-side Rendering

Doch was bedeutet das für unsere Single Page Application (SPA)? Sowohl Angular als auch React oder Vue.js unterstützen Server-side Rendering (SSR). In diesem Artikel wollen wir uns allerdings speziell auf Angular konzentrieren. Ein Beispielprojekt für diesen Artikel ist auf G...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang