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.

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.

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.

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.

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.

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.

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.

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 auch „src/prerender_content.js“ kompiliert und im „buildNode“-Ausgabeverzeichnis ablegt.

Im zweiten Schritt führt das Kommando node buildNode/prerender_content.js aus. Dies ruft prerenderContent() (aus „src/prerender_content.js“) auf, 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!