Messbarer Erfolg «10 Punkte-Checkliste für ein zukunftssicheres CMS» White Paper
Messbarer Erfolg - White Paper

Prerendering einrichten

Prerendering einrichten

Heutzutage sind viele Websites ausgewachsene JavaScript-Anwendungen, die darüber hinaus Bibliotheken und Dienste von Drittanbietern oder woanders gespeicherte Inhalte in ihre Geschäftslogik oder ihr Seitenlayout integrieren. Wenn auf solche Websites bei niedriger Bandbreite zugegriffen wird, kann es einige Zeit dauern, bis Skripte, Assets oder CMS-Inhalte aus der Cloud vollständig geladen sind, wodurch ungeduldige Besucher die Website vorzeitig verlassen könnten. Hier kommt Prerendering ins Spiel. Es beschleunigt nicht nur den Seitenaufbau, sondern ermöglicht es auch Crawlern, die nicht mit Single-page-JavaScript-Anwendungen umgehen können, die Struktur und den Inhalt einer Website zu ermitteln, was eine Voraussetzung für funktionierendes SEO ist.

Prerendering löst nicht das zugrunde liegende Performance-Problem, sondern wirkt ihm entgegen, indem es einen Teil der zeit- und bandbreitenintensiven Verarbeitung im Voraus auf der (cloudbasierten) Server-Seite ablaufen lässt.

Im Falle von Apps, die auf der Scrivito Example App basieren und von unserem Hosting-Partner Netlify ausgeliefert werden, kann Prerendering zu einem integralen Schritt im Deployment-Prozess gemacht werden, der bei jeder Veröffentlichung von Änderungen an den Inhalten ausgelöst wird. In diesem Tutorial zeigen wir Ihnen, wie.

Beim Prerendering werden zunächst statische Versionen aller oder bestimmter Seiten generiert und anstelle ihrer dynamischen, mit JS-Funktionalität ausgestatteten Versionen ausgeliefert. Danach erhalten diese statischen Seiten diese Funktionalität wieder zurück. Dadurch stehen die sichtbaren Bestandteile der Seiten (einschließlich ihres gesamten Inhalts) den Besuchern viel früher zur Verfügung, als dies bei Seiten der Fall ist, die von Skripten zusammengesetzt werden, die in einer wenig leistungsfähigen clientseitigen Netzwerkumgebung laufen.

Lassen Sie uns nun zeigen, wie Prerendering integriert werden kann.

Voraussetzungen

Continuous deployment

Diese Anleitung basiert auf der Scrivito Example App und setzt voraus, dass für Ihre Anwendung in den „Build and deploy“-Einstellungen auf Netlify das „Continuous Deployment” eingeschaltet ist.

Mit “Continuous Deployment” brauchen Sie Ihre Anwendung nicht mehr manuell zu erstellen und auf Netlify hochzuladen. Stattdessen pflegen Sie sie in einem Git-Repository auf GitHub, GitLab oder BitBucket und verbinden sie mit Ihrer Netlify-Website. So kann Netlify Ihre Anwendung nach jedem Push automatisch erstellen und deployen. Falls Ihr Repository-Provider dies verlangt, muss Netlify dort als Drittanbieter-Anwendung zu Ihrem Konto hinzugefügt werden.

Build- und Publishing-Details konfigurieren

netlify.toml
# Global settings applied to the whole site. 
# “command” is your build command. 
# “publish” is the directory to publish (relative to root of your repo).  


[build]   
   command = "npm run prerender"   
   publish = "buildPrerendered"

Bearbeiten Sie zunächst Ihre Datei „netlify.toml“, die sich im Stammverzeichnis Ihres Repositorys befindet, und geben Sie als command die Anweisung an, die Netlify ausführen soll, um die App zu erstellen. Geben Sie ferner als publish das Verzeichnis an, in dem die Dateien, die durch den Prerendering-Prozess erzeugt werden, abgelegt werden sollen.

Netlify führt das Build-Kommando immer dann aus, wenn es feststellt, dass zum angegebenen Branch Ihres Repositorys gepusht wurde.

Zusätzlich muss der Befehl ausgeführt werden, nachdem eine Arbeitskopie des betreffenden Scrivito CMS veröffentlicht wurde, damit Besucher der Website stets die aktuellen Inhalte sehen. Also lassen Sie uns als nächstes den Hook für das unmittelbare Prerendern nach jeder Veröffentlichung einrichten. Wir benötigen eine hereinkommende Build-Hook-URL von Netlify und werden diese dann als Publish-Webhook im Dashboard des betreffenden Scrivito CMS eintragen.

Continuous deployment set up
Netlify build hook set up

Bei Netlify können Sie eine Build-Hook-URL erst erhalten, nachdem die Einrichtung des „Continuous Deployment” abgeschlossen wurde. Kehren Sie dann zum „Continuous Deployment” Ihrer Website auf Netlify zurück, scrollen Sie nach unten zum Abschnitt „Build Hooks“ und fügen Sie einen solchen hinzu.

Die URL wird bei jeder Veröffentlichung angefragt, wodurch der in der Datei „netlify.toml“ angegebene Befehl ausgeführt, d h. der Prerendering-Build generiert und deployt wird.

Nach dem Speichern wird die Hook-URL angezeigt und sollte in die Zwischenablage kopiert werden.

Bevor Sie nun die URL zu Ihren Scrivito CMS-Einstellungen hinzufügen, scrollen Sie ein wenig weiter nach unten und deaktivieren Sie Netlifys Prerendering-Option für Ihre Website (im Abschnitt „Post processing“), falls sie ausgewählt ist. Netlifys Prerendering zielt auf Bots ab und optimiert Ihre Website nicht für schnelles Laden. Ferner wird es in unregelmäßigen Abständen ausgeführt, wodurch Content-Aktualisierungen unter Umständen erst nach mehreren Stunden sichtbar werden.

Was die Hook-URL betrifft, so öffnen Sie nun die „Einstellungen“ Ihres Scrivito CMS in Ihrem Dashboard, bearbeiten Sie den Abschnitt “Publish Webhooks”, fügen Sie die URL aus der Zwischenablage in das entsprechende Formularfeld ein und speichern Sie das Ganze:

Sie können den Build-Prozess über den Abschnitt „Deploys” Ihrer Website auf Netlify verfolgen.

SCREENSHOT VOM BUILD-PROZESS ANZEIGEN
Netlify deploy log - prerendering

Prerendering konfigurieren 

Ungeeignete Inhalte ausnehmen

src/prerender_content.js
const PRERENDER_OBJ_CLASSES_BLACKLIST = [   
   "Download",
   "Image",
   "Redirect",
   "Video",
];

Nicht alle Inhalte eignen sich dafür, vorgerendert zu werden. Binärer Content wie Bilder oder auch spezielle CMS-Objekte wie Weiterleitungen oder nicht sichtbare Datenobjekte sollten ausgenommen werden, um keine Zeit mit der Erzeugung von Ausgaben zu verschwenden, die nicht genutzt werden.

Da alle CMS-Objekte auf Objektklassen basieren, liegt es nahe, einen Mechanismus zum Ausschluss von CMS-Objekten anhand ihrer Objektklasse anzubieten. Genau diesem Zweck dient das Array PRERENDER_OBJ_CLASSES_BLACKLIST in der Datei „src/prerender_content.js“. Als Voreinstellung enthält es einige Namen von Standard-Objektklassen, deren Instanzen beim Prerendern übergangen werden sollen.

Sitemap-Inhalte konfigurieren

Beim Prerendern einer Website erzeugt Scrivito automatisch eine Sitemap, damit Crawler die Inhalte finden und richtig indizieren können. Die hierbei zu berücksichtigen CMS-Objekte können analog zur obigen Liste der Objektklassen angegeben werden, das Array SITEMAP_OBJ_CLASSES_WHITELIST ist jedoch eine Positivliste. In der Example-App ist es so belegt:

src/prerender_content.js
const SITEMAP_OBJ_CLASSES_WHITELIST = [
  "Author",
  "Blog",
  // ...
  "Page",
];

Fehler melden

Die Example-App gibt Fehler in der Konsole aus. Wenn das Prerendern einer Seite einen Fehler verursacht, wird die Seite einfach übersprungen und reportError() in „storePrerenderedContent.js“ aufgerufen.

Es dürfte sinnvoll sein, diese rudimentäre Fehlerprotokollierung durch einen Aufruf Ihres bevorzugten Dienstes zur Fehlerverfolgung und Überwachung wie Honeybadger zu ersetzen.

storePrerenderedContent.js

COPY
function reportError(message, ...args) {
  // Report to your external error tracker here, like Honeybadger or Rollbar.
  console.log(`  ❌ [reportError] ${message}`, ...args);
}

Das Ausgabe-Template anpassen

Der Prerenderer füllt die Vorlage „src/prerenderContent/generateHtml.js“ aus, um die Seiten Ihrer Website zu generieren. Falls Sie den Inhalt dieser Datei anpassen möchten (um beispielsweise ein Meta-Tag hinzufügen oder zusätzliche Skripte aufrufen), sollte die nicht vorgerenderte Version „public/catch_all_index.html“ nachgezogen werden.

Lokales Testen

npm run prerender
cd buildPrerendered
npx serve -l 8080

Um das Prerendern zu testen (und zu debuggen), führen Sie es einfach im Stammverzeichnis Ihres App-Verzeichnisses aus.

Der letzte der obigen Befehle startet einen Webserver auf localhost:8080, damit Sie die vorgerenderten Seiten mit dem Browser Ihrer Wahl überprüfen können.

Wenn Sie mit Ihrer lokalen Installation der Beispiel-App experimentiert haben, empfehlen wir, lose Enden, insbesondere dysfunktionale Widgets, vor dem Prerendern zu entfernen, da sie bewirken, dass die betreffende Seite übersprungen wird und dadurch im Browser nicht verfügbar ist.

SCRIVITO_PRERENDER=true npm start

Sollte Ihre Anwendung nicht wie erwartet vorgerendert werden, dürfte es helfen, zur Fehlersuche in den Entwicklungsmodus zu wechseln. Führen Sie im Basisverzeichnis Ihres Projekts Folgendes aus:

Öffnen Sie anschließend http://localhost:8080/_prerender_content.html in Ihrem Browser und führen Sie prerenderContent() in der JS-Konsole aus. So können Sie den Prerendering-Prozess viel genauer verfolgen und die Fehlerquelle schneller finden.

So funktioniert es

Bei der Ausführung von npm run prerender wird als erstes SCRIVITO_PRERENDER auf true gesetzt und dann npm run build ausgeführt. Das Flag SCRIVITO_PRERENDER bewirkt, dass Webpack „src/prerender_content.js“ sowie „_prerender_content.html“ in das „build“-Ausgabeverzeichnis mit aufnimmt.

Im zweiten Schritt führt das Kommando node storePrerenderedContent.js. aus. Dies startet einen lokalen Webserver auf Port 8080, der den Inhalt des „build“-Verzeichnisses ausliefert. Dann wird ein Chrome-basierter Browser ohne Anzeigemöglichkeit („puppeteer“) gestartet und auf http://localhost:8080/_prerender_content.html gelenkt. Schließlich wird prerenderContent() (aus „src/prerender_content.js“) im Browser ausgeführt, um die vorgerenderten Dateien zu generieren und im „buildPrerendered“-Verzeichnis abzulegen.

prerenderContent() erzeugt zunächst die Datei „sitemap.xml“ und dann für jede Seite eine HTML-Datei sowie eine „preloadDump-obj-id.js“-Datei, wobei „obj-id“ die CMS-Objekt-ID der Seite ist. Letztere Datei wird als Skript zu der generierten HTML-Datei hinzugefügt. Sie enthält alle Daten, die erforderlich sind, um die angeforderte Seite zu rendern, ohne den Inhalt vom Scrivito CMS-Service holen zu müssen, wodurch die Ladezeit der Seite deutlich reduziert wird.

Der Geschwindigkeitsgewinn wird Sie beeindrucken!