© DrHitch/Shutterstock.com
Shortcuts
Cross-Plattform

6 Server-side Rendering und Search Engine Optimization

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.

Shortcut Autorenteam


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;}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 RenderingDoch 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 Kapitel wollen wir uns allerdings speziell auf Angular konzentrieren. Ein Beispielprojekt für dieses Kapitel ist auf GitHub [1] zu finden. In diesem Kapitel werden die wichtigsten Codeauschnitte gezeigt. Das Beispielprojekt unterstützt neben SSR auch die Paketierung mit Cordova [2] für native mobile Anwendungen und Electron [3] für echte native Desktopanwendungen.Bevor wir uns die Praxis anschauen, wollen wir zunächst klären, warum wir unsere SPA überhaupt auf dem Server rendern wollen, warum nicht jedes Framework auf dem Server gerendert werden kann und worauf wir bei der Entwicklung achten müssen.Single Page Applications waren der Durchbruch für große und leistungsstarke Anwendungen im Browser. Durch das Sparen des Neuladens der Seite konnte eine sehr viel bessere User Experience geschaffen werden. Während zu Beginn jQuery und Aj...

Shortcuts
Cross-Plattform

6 Server-side Rendering und Search Engine Optimization

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.

Shortcut Autorenteam


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;}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 RenderingDoch 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 Kapitel wollen wir uns allerdings speziell auf Angular konzentrieren. Ein Beispielprojekt für dieses Kapitel ist auf GitHub [1] zu finden. In diesem Kapitel werden die wichtigsten Codeauschnitte gezeigt. Das Beispielprojekt unterstützt neben SSR auch die Paketierung mit Cordova [2] für native mobile Anwendungen und Electron [3] für echte native Desktopanwendungen.Bevor wir uns die Praxis anschauen, wollen wir zunächst klären, warum wir unsere SPA überhaupt auf dem Server rendern wollen, warum nicht jedes Framework auf dem Server gerendert werden kann und worauf wir bei der Entwicklung achten müssen.Single Page Applications waren der Durchbruch für große und leistungsstarke Anwendungen im Browser. Durch das Sparen des Neuladens der Seite konnte eine sehr viel bessere User Experience geschaffen werden. Während zu Beginn jQuery und Aj...

Neugierig geworden?


    
Loading...

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