Dynamisches Rendering mit Rendertron

Donnerstag, 31. Januar 2019

Viele Frontend-Frameworks verlassen sich auf JavaScript, um Inhalte anzuzeigen. Dies kann bedeuten, dass Google einige Zeit benötigt, um Ihre Inhalte zu indexieren oder die indexierten Inhalte zu aktualisieren.

Eine Problemumgehung, die wir auf der Google I/O
dieses Jahr
diskutiert haben, istdynamisches Rendering
. Es gibt viele Möglichkeiten, dies zu implementieren. Dieser Blogbeitrag zeigt eine Beispielimplementierung von dynamischem Rendering unter Verwendung vonRendertron

, einer Open-Source-Lösung auf Basis von headless Chromium.

Welche Websites sollten dynamisches Rendering in Betracht ziehen?
Nicht alle Suchmaschinen oder Social-Media-Bots, die Ihre Website besuchen, können JavaScript ausführen. Googlebotkönnte zum Beispiel Zeit benötigen, um Ihr JavaScript auszuführen, und hat

einige Einschränkungen
.Dynamisches Rendering ist nützlich für Inhalte, die sich häufig ändern und JavaScript zur Anzeige benötigen. Die Benutzererfahrung Ihrer Website (insbesondere die Zeit bis zum
ersten aussagekräftigen Paint).

) kann von der Berücksichtigung von hybridem Rendering profitieren (zum Beispiel

Angular Universal
).

Wie funktioniert dynamisches Rendering?
Dynamisches Rendering bedeutet das Umschalten zwischen clientseitig gerenderten und vorgerenderten Inhalten für bestimmte User-Agents. Sie benötigen einen Renderer, um das JavaScript auszuführen und statisches HTML zu erzeugen. Rendertron ist ein Open-Source-Projekt, das

headless Chromium

1. zum Rendern verwendet. Single Page Apps laden Daten oft im Hintergrund oder verschieben die Arbeit zum Rendern ihrer Inhalte. Rendertron verfügt über Mechanismen, um festzustellen, wann eine Website das Rendern abgeschlossen hat. Es wartet, bis alle Netzwerkanfragen beendet sind und keine ausstehende Arbeit mehr vorhanden ist.
2. Dieser Beitrag behandelt: Werfen Sie einen Blick auf eine Beispiel-Web-App Richten Sie einen kleinen
3. express.js

Server ein, um die Web-App bereitzustellen

Installieren und konfigurieren Sie Rendertron als Middleware für dynamisches Rendering
Die Beispiel-Web-App

Die “kitten corner” Web-App

verwendet JavaScript, um eine Vielzahl von Katzenbildern von einer API zu laden und sie in einem Raster anzuzeigen.
Hier ist das JavaScript:Die Web-App verwendet modernes JavaScript (ES6), das
noch nicht von Googlebot unterstützt wird . Wir können den

Test auf Mobilfreundlichkeit

verwenden, um zu prüfen, ob Googlebot den Inhalt sehen kann:

Obwohl dieses Problem einfach zu beheben ist, ist es eine gute Übung, um zu lernen, wie man dynamisches Rendering einrichtet. Dynamisches Rendering ermöglicht es Googlebot, die Katzenbilder zu sehen, ohne Änderungen am Web-App-Code vorzunehmen.
Richten Sie den Server ein, a Um die Webanwendung bereitzustellen, verwenden wir die
express

node.js
Bibliothek, um Webserver zu erstellen.
Der Servercode sieht so aus (finden Sie den

vollständigen Projektquellcode
hier): Sie können
das Live-Beispiel ausprobieren – Sie sollten eine Reihe von Katzenbildern sehen, wenn Sie einen modernen Browser verwenden. Um das Projekt von Ihrem Computer aus auszuführen, benötigen Sie

node.js
, um die folgenden Befehle auszuführen:Richten Sie dann Ihren Browser auf

https://localhost:8080

. Jetzt ist es an der Zeit, dynamisches Rendering einzurichten.
Stellen Sie eine Rendertron-Instanz bereit
Rendertron betreibt einen Server, der eine URL entgegennimmt und mithilfe von headless Chromium statisches HTML für die URL zurückgibt. Wir folgen
der Empfehlung des Rendertron-Projekts.

und verwenden
Google Cloud Platform. Bitte beachten Sie, dass Sie mit
der ohne Zahlung verfügbaren Nutzungsstufe.

1. beginnen können; die Verwendung dieses Setups in der Produktion kann gemäß den
   Google Cloud Platform PreisenKosten verursachen.
2. Erstellen Sie ein neues Projekt in der Google Cloud Konsole
   . Notieren Sie sich die “Projekt-ID” unter dem Eingabefeld.
3. Installieren Sie das
4. Google Cloud SDK wie in der Dokumentation beschrieben
5. und melden Sie sich an. Klonen Sie das Rendertron-Repository von GitHub mit: Führen Sie die folgenden Befehle aus, um Abhängigkeiten zu installieren und Rendertron auf Ihrem Computer zu erstellen:
6. Aktivieren Sie den Cache von Rendertron, indem Sie eine neue Datei namens
   config.json im rendertron-Verzeichnis mit folgendem Inhalt erstellen:
7. Führen Sie den folgenden Befehl aus dem rendertron-Verzeichnis aus. Ersetzen Sie
8. YOUR_PROJECT_ID YOUR_PROJECT_ID.appspot.com. Sie sollten die Rendertron-Oberfläche mit einem Eingabefeld und einigen Schaltflächen sehen.

Wenn Sie die Rendertron-Weboberfläche sehen, haben Sie Ihre eigene Rendertron-Instanz erfolgreich bereitgestellt. Notieren Sie sich die URL Ihres Projekts (YOUR_PROJECT_ID.appspot.com), da Sie diese im nächsten Teil des Prozesses benötigen werden.

Rendertron zum Server hinzufügen

Der Webserver verwendet express.js und Rendertron verfügt über eine express.js
Middleware. Führen Sie den folgenden Befehl im Verzeichnis der server.js Datei aus:

Dieser Befehl installiert die rendertron-middleware von npm, damit wir sie zum Server hinzufügen können:

Bot-Liste konfigurieren

Rendertron verwendet den user-agent HTTP-Header, um festzustellen, ob eine Anfrage von einem Bot oder dem Browser eines Benutzers stammt. Es gibt eine
gut gepflegte Liste von Bot-User-Agents
zum Vergleich. Standardmäßig enthält diese Liste Googlebot nicht, da Googlebot JavaScript ausführen kann. Damit Rendertron auch Googlebot-Anfragen rendert, fügen Sie Googlebot zur Liste der User-Agents hinzu:

Rendertron vergleicht den user-agent Header später mit diesem regulären Ausdruck.

Middleware hinzufügen

Um Bot-Anfragen an die Rendertron-Instanz zu senden, müssen wir die Middleware zu unserem
express.js Server hinzufügen. Die Middleware überprüft den anfragenden User-Agent und leitet Anfragen von bekannten Bots an die Rendertron-Instanz weiter. Fügen Sie den folgenden Code zu server.js hinzu und vergessen Sie nicht, YOUR_PROJECT_ID durch Ihre Google Cloud Platform-Projekt-ID zu ersetzen:

Bots, die die Beispiel-Website anfordern, erhalten das statische HTML von Rendertron, sodass die Bots kein JavaScript ausführen müssen, um den Inhalt anzuzeigen.

Unsere Einrichtung testen

Um zu testen, ob die Rendertron-Einrichtung erfolgreich war, führen Sie den Mobile-Friendly-Test erneut aus.

Im Gegensatz zum ersten Test sind die Katzenbilder sichtbar. Im HTML-Tab können wir den gesamten HTML-Code sehen, den der JavaScript-Code generiert hat, und dass Rendertron die Notwendigkeit von JavaScript zur Anzeige des Inhalts beseitigt hat.

Fazit

Sie haben eine dynamische Rendering-Einrichtung erstellt, ohne Änderungen an der Web-App vorzunehmen. Mit diesen Änderungen können Sie Crawlern eine statische HTML-Version der Web-App bereitstellen.

Gepostet von Martin Splitt, Open Web Unicorn