Eignen sich Static-Site-Generatoren für E-Commerce?

Statische Websites bringen einige Vorteile mit sich – beispielsweise im Hinblick auf Performance und SEO. Doch eignen sie sich auch für Onlineshops? Wir klären über die Vor- und Nachteile von Static-Site-Generatoren (SSG) gegenüber Server-Side-Rendering (SSR) auf.

Static-Site-Generatoren: Vor- und Nachteile für Onlineshops

Die Inhalte auf Blogs, Dokumentationen oder Unternehmensseiten sind meist statisch, d.h. sie ändern sich in der Regel nicht oder nur selten. Viele Blogger oder Betreiber informativer Landingpages nutzen deshalb SSG-Frameworks oder -Systeme. Deren Funktionsweise lässt sich folgendermaßen zusammenfassen: Alle vordefinierten Seiten einer Applikation werden mittels eines SSG vorgerendert. Erst nach diesem sogenannten Pre-rendering werden sie dann als statische HTML-Dateien auf einen Server hochgeladen.

Die Vorteile dieses Ansatzes: Inhalte können sehr schnell ausgeliefert und im Vorfeld mit den wichtigsten Metadaten für die Suchmaschinen angereichert werden. Das Pre-rendering ist also nicht nur besonders performant, sondern auch im Hinblick auf Crawler und die Indexierung sehr SEO-freundlich. Darüber hinaus sind statische Websites sehr sicher, da sie wenig Angriffsfläche für Cyber-Attacken bieten.

Im E-Commerce haben wir es jedoch häufig mit dynamischen Inhalten zu tun. Ändert sich beispielsweise der Preis eines Produktes, wird das bei SSG nicht automatisch im Shop-Frontend abgebildet. Hier müssen Onlinehändler einen Umweg gehen: Nachdem eine Seite geladen wurde, müssen aktuelle Informationen über den Preis bei der Shop-API erfragt und diese durch die statischen Inhalte ersetzt werden. Diese Vorgehensweise ist für Onlineshops mit einer überschaubaren Anzahl an Routen durchaus umsetzbar. Sie eignet sich beispielsweise für Onlinehändler, die in ihrem Shop ein sehr kleines Sortiment oder nur ein spezielles Produkt anbieten.

Anders verhält es sich bei E-Commerce-Plattformen mit einem größeren, komplexeren Sortiment. Angenommen, ein Onlineshop hat über 1000 Kategorien und innerhalb dieser Kategorien jeweils 100 Produkte, die sich stündlich ändern können. Diese riesige Anzahl an Routen müsste im Falle von SSG jedesmal komplett neu generiert werden, wenn die Applikation aktualisiert wird bzw. eine neue Route dazukommt. Eine Lösung hierfür bietet Server-Side-Rendering (SSR).

Lösung für komplexe Onlineshops: Server-Side-Rendering

Wenn ein Kunde eine Suchanfrage im Onlineshop stellt, fordert sein Browser eine bestimmte Route vom Shopsystem an. Der Server erkennt anhand dieser URL, um welche Entität es sich bei der Suchanfrage handelt, z.B. ein bestimmtes Produkt. Beim SSR rendert der Server das Template daraufhin und befüllt es mit den Daten des Produktes. Das frische und fertige HTML wird dann dem Kunden übermittelt – ihm wird dann also das gesuchte Produkt mit allen aktuellen Informationen angezeigt.

Beim Server-Side-Rendering können sämtliche dynamischen Routen und URLs ausgeliefert werden, ohne diese mit einem Static-Site-Generator vorrendern zu müssen. Der entscheidende Vorteil: Die Produktdaten sind auf diese Weise immer aktuell. SSR ist also die flexiblere Alternative gegenüber dem SSG und besser für Onlineshops mit großem Sortiment geeignet.  

Ein Nachteil von SSR ist allerdings, dass das Rendering seine Zeit kostet und somit dem SSG in Sachen Performance häufig unterlegen ist. 

Neue SSR- und SSG-Frameworks im Vue.js-Kosmos

Rund um das Framework Vue.js wurden inzwischen verschiedene Lösungen entwickelt, die die Vorteile von SSG und SSR miteinander vereinen. Drei davon stellen wir im Folgenden näher vor.

Nuxt (für SSR & SSG)

Nuxt.js, das sich bereits durch seine SSR-Fähigkeiten auszeichnet, bietet im SSG-Bereich gleich zwei Lösungen an: den Nuxt Static Build Mode sowie das Nuxt Content Modul. Beim Content Modul können Inhalte (“Content”) beispielsweise ganz einfach in Markdown angelegt werden. Diese dienen dann als Basis zur Generierung der finalen statischen Webseiten. Beim Static Build Mode hingegen werden statische Seiten auf Basis eines bestehenden Nuxt-Projektes generiert. 

Gridsome (für SSG)

Ein weiterer auf Vue.js basierender Static-Site-Generator ist Gridsome. Interessant gelöst ist der Zugriff auf Daten aus den Templates heraus: Ganz egal, ob die Datenquelle ein CMS, lokale JSON/CSV-Dateien oder das API Layer über der Datenbank ist – die Referenzierung findet über GraphQL statt. Somit entsteht eine Ebene, welche via Datenaggregation abstrahierend wirkt und den Zugriff vereinheitlicht. Falls nun eine “Momentaufnahme” dieser Daten zum Zeitpunkt des Prerendering nicht ausreicht, ermöglicht Gridsome auch Daten dynamisch zu laden. 

Vitepress (für die Entwicklung)

Vitepress, welches erstmalig bei der Vue.js. Global Online Conference am 18. September 2020 vorgestellt wurde, punktet bereits stark mit der Optimierung des Tree-Shaking-Prozesses und der automatischen Bereitstellung von Code Splitting. Auf dem ebenfalls neuen Build-Tool Vite basierend, ist Vitepress – wie der Name “Vite” (frz. für “schnell”) bereits vermuten lässt – darauf ausgelegt, den Entwicklungsprozess erheblich zu beschleunigen. Auf diese Weise werden Seiten nicht nur performanter, sondern Ideen lassen sich im Entwicklungsprozess auch viel schneller iterieren und verifizieren, also ein Performance-Gewinn aus mehreren Perspektiven! Voraussetzung für die Verwendung von Vitepress ist, dass der Browser native ES-Module unterstützt, da nicht mehr die ganze Applikation in jedem Änderungsschritt der Entwicklung komplett gebundelt werden muss und native ES Modul Importe verwendet werden. 

Fazit und Ausblick

SSG eignen sich insbesondere für Blogs, informative Landingpages oder Onlineshops mit sehr wenigen Produkten. Vorgerenderte Seiten können hier interessante Vorteile in Sachen Performance und SEO bieten. Für E-Commerce-Plattformen mit einem komplexeren Produktsortiment hingegen ist SSR meist die geeignetere Lösung.

Die neuesten Entwicklungen, beispielsweise im Vue.js-Ökosystem, zeigen jedoch, dass auch SSG zunehmend flexibler werden und hybride Lösungsmöglichkeiten anbieten. So unterscheiden sie beispielsweise zwischen Änderungen im Inhalt und Änderungen im Code und können bei ausschließlich inhaltlichen Änderungen ein erneutes Vorrendern aller Seiten vermeiden. Dies wird auch als “Incremental Builds” bezeichnet und optimiert somit den Bundling-Schritt, welcher bei großen Seiten viel Zeit in Anspruch nehmen kann.

Zusammenfassend lässt sich also sagen, dass sich SSG eindeutig weiterentwickelt haben und stark auf Flexibilität und Performance-Optimierung setzen. Neue Frameworks bieten zunehmend hybride Lösungen aus SSG und SSR, um die Vorteile beider Varianten für den E-Commerce zu nutzen.