Articles / Dezember 28, 2021

Angular Universal in der Praxis – Wie man SEO-freundliche Single-Page-Apps mit Angular erstellt

In den letzten Monaten wurde viel über Angular gesprochen und darüber, wie man es für die Erstellung von Client-Apps nutzen kann, aber eine der wichtigsten Innovationen findet auf dem Server statt.

Dies ist eine Technologie, die eine ganz neue Art von Webanwendungen ermöglichen könnte: Angular Universal. Lassen Sie uns mehr darüber erfahren! Gehen wir die folgenden Themen durch:

Vorteile von Single-Page-Apps
Warum verwenden wir dann nicht überall Single-Page-Apps?
Verständnis der SEO-Implikationen einer Single-Page-App
Was ist Angular Universal, was ermöglicht es?
Serverseitiges Rendering ist wirklich nicht nur Rendering auf dem Server
Eine Demo einer serverseitig gerenderten Single Page App in Aktion
Vorgerendertes zur Build-Zeit – Hochladen von vorgerenderten Apps auf Amazon S3
Das Killer-Feature von Angular Universal: Dependency Injection
Schlussfolgerungen

Dieser Beitrag ist eine Einführung in Angular Universal. Für einen detaillierteren Leitfaden, der die Verwendung in der Praxis abdeckt, werfen Sie einen Blick auf diesen Beitrag:

Angular Universal: ein kompletter praktischer Leitfaden

Vorteile von Single Page Applications

Single Page Apps gibt es schon eine Weile, und Frameworks wie Angular, React oder Ember sind wahrscheinlich die Javascript-Bibliotheken, die die meiste Aufmerksamkeit in der Javascript-Welt bekommen.

Die Vorteile von SPAs sind eigentlich nur eine Sache

Die Vorteile von Single Page Apps sind potentiell viele:

Wenn der Benutzer auf der Seite navigiert, werden nur Teile davon ersetzt, was für ein flüssigeres Erlebnis sorgt
Nach dem ersten Laden der Seite gehen nur Daten über die Leitung, wenn der Benutzer in der App navigiert: JSON wird an den Browser geliefert und auf HTML-Vorlagen direkt im Browser angewendet
Das führt zu einer besseren Leistung und eröffnet die Möglichkeit, dass diese Backend-Dienste für andere Dinge genutzt werden können, da sie nur Daten zurückliefern

Wir können dies auf eine einzige Sache reduzieren:

Single Page Apps können eine viel bessere User Experience bieten!

Und User Experience ist in der öffentlichen Internetwelt entscheidend. Es gibt zahlreiche Studien, die zweifelsfrei belegen, dass Seitenabbrüche und Benutzerabbrüche sehr schnell zunehmen, je länger die Seitenladezeit ist.

Wenn eine Seite 200 ms länger braucht, um zu laden, hat dies potenziell große Auswirkungen auf das Geschäft und den Umsatz (siehe diese Studie von Google).

Warum werden SPAs dann nicht überall eingesetzt?

Warum werden angesichts dieser Statistiken und der Tatsache, dass SPAs ein viel besseres Nutzererlebnis bieten, nicht überall Single Page Apps eingesetzt?

Sie gibt es schon seit Jahren, und jede Website mit einem Navigationssystem könnte davon profitieren, auf diese Weise aufgebaut zu sein.

Die SEO-Implikationen einer Single-Page-App verstehen

Es gibt einen Hauptgrund, warum Single-Page-Apps bisher nicht überall verwendet werden (mit zwei verschiedenen Ursachen):

Einzelseiten-Apps schneiden bei Suchmaschinen nicht gut ab

Die beiden Gründe dafür sind:

Die Suchmaschine muss „raten“, wann die Seite vollständig ist

Wenn eine Einzelseite abgerufen wird, sieht eine Suchmaschine nur sehr wenig HTML. Erst wenn das MVC-Framework einsetzt, wird die Seite unter Verwendung der vom Server erhaltenen Daten vollständig gerendert.

Das Problem ist, dass die Suchmaschine erraten muss, wann das Javascript-Framework die Seite fertig gerendert hat, so dass die Gefahr besteht, dass unvollständige Inhalte indiziert werden.

Der zweite Grund, warum SPAs bei Suchmaschinen nicht gut abschneiden, ist:

SPA Deep Links sind schwer zu indizieren

Da es in Browsern keine HTML5 History-Unterstützung gibt, basieren Single Page Apps ihre Navigations-URLs in HTML Bookmark-Ankern (URLs mit #, wie /home#section1). Es gibt Möglichkeiten, dies zu tun, aber es ist mühsam und es wird immer Schwierigkeiten geben, dies richtig zu indizieren, im Gegensatz zur Verwendung von einfachem HTML.

Die Schlussfolgerung könnte sein, dass es keinen Sinn macht, die am leichtesten zu navigierende Website zu haben, wenn die Art und Weise, wie sie aufgebaut ist, eine gute SEO verhindert.

Nun die gute Nachricht

Die gute Nachricht ist, dass keiner dieser beiden Gründe mehr zu 100% zutrifft! Google hat begonnen, Single-Page-Apps besser zu indizieren.

Und die kürzliche Abschaffung des IE9 bedeutet, dass die HTML5-Geschichte fast überall verfügbar ist, wodurch die Verwendung von Anker-URLs für SPAs nicht mehr erforderlich ist, wir können einfach einfache URLs (wie /home/section1) verwenden.

Das sind großartige Neuigkeiten, aber es gibt andere Suchmaschinen, die einen bedeutenden Datenverkehr erzeugen. Baidu zum Beispiel macht mehr als die Hälfte des Verkehrs in China aus (derzeit 1,3 Milliarden Menschen).

Außerdem gibt es immer noch das Problem der Leistung: eine einseitige App wird aufgrund der großen Javascript-Mengen, die sie benötigt, und der langen Startzeit langsamer sein und daher schlechter funktionieren als eine HTML-basierte Lösung.

Und das bedeutet Seitenabbrüche, dieses Problem wird nicht so bald verschwinden, vor allem nicht auf dem Handy. Gibt es eine Möglichkeit, das Beste aus allen Welten zu haben, und sowohl sofortige Navigation, SEO-Freundlichkeit und hohe Leistung auf dem Handy zu bekommen?

Die Antwort ist Ja, mit Angular Universal.

Was ist Angular Universal, was ermöglicht es?

Einfach ausgedrückt, ermöglicht Angular Universal die Entwicklung von Apps, die sowohl die Vorteile von Single-Page-Apps in Bezug auf Leistung und Benutzerbindung als auch die SEO-Freundlichkeit von statischen Seiten bieten.

Serverseitiges Rendering ist nicht nur das Rendering auf dem Server

Angular Universal bietet neben einer Lösung für das Rendering von HTML auf dem Server noch weitere Funktionen. Ausgehend von dem Begriff „serverseitiges Rendering“ könnte man meinen, dass das, was Angular Universal tut, beispielsweise einer serverseitigen Template-Sprache wie Jade ähnelt. Aber es gibt viel mehr Funktionalität.

Mit Angular Universal bekommt man die anfängliche HTML-Nutzlast auf dem Server gerendert, aber man bootet auch eine abgespeckte Version von Angular auf dem Client und von dort übernimmt Angular die Seite als eine Single-Page-App und generiert von dort aus das gesamte HTML auf dem Client statt auf dem Server.

Das Endergebnis ist also dasselbe, es ist eine laufende Single-Page-Anwendung, aber da man jetzt die anfängliche HTML-Nutzlast vom Server erhält, erhält man eine viel bessere Startzeit und auch eine vollständig SEO-indizierbare App.

Vorrendering zur Erstellungszeit – vorgerenderte Apps auf Amazon S3 hochladen

Eine weitere Möglichkeit, die Angular Universal eröffnet, ist das Vorrendering von Inhalten, die sich zur Erstellungszeit nicht häufig ändern. Dies wird entweder mit Grunt, Gulp oder Weppack-Plugins möglich sein. So sieht eine Gulp-Konfiguration aus, die den Inhalt unserer Anwendung in eine Datei vorrendert:

Und diese dann einfach mit der Amazon CLI in einen Amazon S3-Bucket hochlädt:

Wenn wir diesen Bucket mit einer Cloudfront CDN-Distribution verknüpfen, haben wir eine sehr kostengünstige und skalierbare Website.

Was ist, wenn der Benutzer sofort mit der Seite interagiert?

Es gibt eine anfängliche Verzögerung zwischen dem Moment, in dem das einfache HTML gerendert und dem Benutzer präsentiert wird, und dem Moment, in dem Angular auf der Client-Seite einsetzt und die SPA übernimmt.

In diesem Zeitrahmen könnte der Benutzer auf etwas klicken oder sogar anfangen, in ein Suchfeld einzugeben. Was Angular Universal über seine Preboot-Funktionalität ermöglicht, ist die Aufzeichnung der Ereignisse, die der Benutzer auslöst, und deren Wiedergabe, sobald Angular startet.

Auf diese Weise ist Angular in der Lage, auf diese Ereignisse zu reagieren, wie zum Beispiel durch die Anzeige der Suchergebnisse in einer Typeahead-Liste.

Aber wie sieht das auf dem Server in Bezug auf den Code aus?

Wie wird HTML mit Angular auf dem Server gerendert

Die Art und Weise, wie der Inhalt auf dem Server gerendert wird, ist die Verwendung der Express Angular Universal Rendering Engine expressEngine :

Es gibt auch eine Hapi Engine, wenn Sie lieber Hapi anstelle von Express verwenden möchten. Es gibt auch Server-Rendering-Engines, die für alle möglichen Plattformen entwickelt werden: C#, Java, PHP, siehe diesen früheren Beitrag für weitere Details.

Wie fängt man mit Angular Universal an?

Der beste Ort, um zu beginnen, ist der offizielle Starter Universal-Starter, mit dem wir eine laufende Anwendung erhalten, die einen Express-Server mit serverseitigem Rendering enthält, der sofort funktioniert.

Was an Angular Universal innovativ ist, ist die Einfachheit der Nutzung. Eines der wichtigsten Designmerkmale von Angular Universal ist die Art und Weise, wie es Dependency Injection verwendet.

Server Side Rendering Development ist nicht wie Coding nur für den Client

Meistens wollen wir, dass unsere Anwendung auf dem Server genau das Gleiche tut wie auf dem Client, indem sie nicht direkt von Browser-APIs abhängig ist.

Die Realität der serverseitigen Rendering-Entwicklung ist, dass dies nicht immer möglich ist, und es gibt bestimmte Dinge, die wir auf dem Client und auf dem Server anders machen wollen.

Nehmen wir zum Beispiel das Rendering eines Diagramms: Sie wollen wahrscheinlich eine Drittanbieter-Bibliothek aufrufen, die SVG verwendet. Wir können sie nicht auf dem Server aufrufen, wie können wir sie also rendern?

Ein weiteres Beispiel: Wie können wir authentifizierte Seiten rendern? Weil der Inhalt davon abhängt, wer gerade eingeloggt ist.

Using Dependency Injection to implement Authentication

Um die Authentifizierung zu handhaben, gibt es folgende Möglichkeit:

Auf dem Client soll die Identität des Benutzers aus einem Token entnommen werden, das entweder in einem Cookie oder im lokalen Speicher des Browsers vorhanden ist.
Auf dem Server soll das Identitäts-Token während des Renderns der Anfrage aus einem HTTP-Anfrage-Header gelesen werden.

Wie kann man dieselbe Seite ausgeben, wenn man auf dem Client über einen Routerübergang zu dieser Seite navigiert und auf dem Server über eine Browseraktualisierung?

Erst eine Serviceschnittstelle definieren

Der erste Schritt besteht darin, eine Schnittstelle zu definieren, die Ihr Dienst bereitstellt und die unabhängig von der Laufzeit ist:

Dann stellen wir zwei Implementierungen für diese Schnittstelle bereit, eine für den Client und die andere für den Server. Auf dem Server gibt es zum Beispiel keinen Anlass, die Login-Methode aufzurufen, so dass wir einen Fehler auslösen:

Auf dem Client hingegen werden wir den Auth0 Lockscreen (eine Bibliothek nur für Browser von Drittanbietern) auslösen, um ein Anmeldeformular bereitzustellen:

Wir injizieren dann verschiedene Implementierungen der Schnittstelle auf dem Server und auf dem Client für dasselbe Injektions-Token:

Und so können wir in Angular Universal auf dem Client und auf dem Server etwas anderes tun, indem wir den Angular-Abhängigkeitsinjektions-Container nutzen.

In der Tat ist Angular Universal auch unter Verwendung dieses Konzepts aufgebaut: zum Beispiel die Art und Weise, wie HTML gerendert wird, ist durch die Injektion eines DOM-Renderers während des Bootstrappings des Frameworks, es injiziert einen Server-Renderer, der HTML unter Verwendung der parse5 HTML-Serialisierungsbibliothek generiert.

Schlussfolgerungen

Wie jede Technologie werden sich die Vorteile des serverseitigen Renderings im Laufe der Zeit weiterentwickeln. Aber im Moment bietet das serverseitige Rendering einen großen Vorteil für den Aufbau von mobilfreundlichen, suchmaschinenfreundlichen Anwendungen, die aufgrund der nahtlosen, sofortigen Navigation eine hohe Benutzerbindung aufweisen.

Es ist heute einfacher denn je, diese Art von Anwendungen mit Angular Universal und dem universellen Starter zu erstellen.

Mit Angular Universal macht es die Verwendung von Dependency Injection sehr einfach, etwas auf dem Server anders zu machen als auf dem Client, wenn wir es brauchen.

Getting Started With Angular

Wenn Sie mehr über Angular erfahren möchten, schauen Sie sich den Kurs Angular für Anfänger an:

Universe