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.

Mehr aus unserem Blog

Headless Commerce: Das sind die Vorteile für Shopbetreiber
24. Juni 2020

Mit den steigenden Verkaufszahlen werden auch die Anforderungen den den E-Commerce zunehmend komplexer. Ein moderner Onlineshop muss viel leisten können: …

Mehr erfahren
Wie navigiere ich meine Kunden schneller zum Ziel?
27. November 2020

Das UI/UX-Design Ihres Onlineshops spiegelt nicht nur den Markenkern Ihres Unternehmens visuell wider, sondern ist auch essentiell für eine hohe …

Mehr erfahren
Erfolgreicher B2B-Commerce – Teil 2: Praxistipps für die digitale Customer Journey
18. Mai 2020

Im ersten Teil dieses Blog-Beitrages haben wir analysiert, wie sich die Anforderungen von Einkäufern an B2B-Händler in den letzten Jahren …

Mehr erfahren
Erfolgreicher B2B-Commerce – Teil 2: Praxistipps für die digitale Customer Journey
18. Mai 2020

Im ersten Teil dieses Blog-Beitrages haben wir analysiert, wie sich die Anforderungen von Einkäufern an B2B-Händler in den letzten Jahren …

Mehr erfahren
Bilder und Videos optimieren: Mehr Conversion und weniger CO2!
2. November 2020

Visuelle Darstellungen von Produkten sind elementar für die gesamte E-Commerce-Branche. Sie helfen dem Kunden dabei, eine Kaufentscheidung zu treffen und …

Mehr erfahren
Agenturnews 01.2020
29. Dezember 2019

Neues Jahr, neues Shopsystem – Shopware 6, die neue Lösung aus dem Hause Shopware, ist in der E-Commerce-Welt in aller …

Mehr erfahren
Warum B2B-Onlineshops auf PWA setzen sollten
14. September 2020

Dass im E-Commerce an „Mobile First“ kein Weg mehr vorbeiführt, ist längst kein Geheimnis mehr. PWA, kurz für Progressive Web …

Mehr erfahren
PWA und SEO: Das müssen Onlinehändler beachten
19. Oktober 2020

Progressive Web Apps, kurz PWA, bieten Onlinehändlern zahlreiche Vorteile. Auch im Hinblick auf SEO kann die Einführung einer PWA …

Mehr erfahren

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1