Schnelle Websites mit dem Static Site Generator

Veröffentlicht am
858 Wörter - Lesezeit: ca. 5 Minuten

Ein Static Site Generator ist ein Tool für Webentwickler, welches eine vollständige statische HTML-Website basierend auf Rohdaten generiert.

Schnelle Websites mit dem Static Site Generator | Titelbild

Das neue Web ist dynamisch und interaktiv. Als Besucher einer Website stößt, man immer mehr auf Websites, die sehr groß sind und eine Zeit lang brauchen, bis dies geladen sind. Das Problem: Die Websites werden ad hoc von langsamen Servern generiert und zur Verfügung gestellt. Hinzu kommen unoptimierte Assets, die zusätzlich geladen werden, die nicht benötigt werden.  Das muss aber allerdings nicht sein und Abhilfe  schaffen hier die Static Site Generatoren (auch als Akronym SSG bekannt).

Ein statischer Site-Generator ist ein Tool für Webentwickler, welches eine vollständige statische HTML-Website basierend auf Rohdaten und einer Reihe von Vorlagen generiert. Dadurch werden die Inhalte voraus generiert und stehen direkt beim Aufruf einer Website zur Verfügung und müssen nicht erst per Server Site Rendering generiert werden. Hinzu kommt das viele Generatoren die Assets so optimieren, dass nur das nötigste geladen wird. Sie sind essenzieller Teil eines JAMstack-Webentwicklungsansatzes für einfache Websites. 

Was ist eine statische Website?

Die meisten Websites, die wir öffnen sind, nicht dynamisch. Das bedeutet sie verändern sich nach dem Aufruf der Seite nicht mehr. Stell Dir zum Beispiel einen Blog-Beitrag oder die Startseite eine gewöhnliche Website vor. Das genaue Gegenteil wäre zum Beispiel die Startseite von YouTube. Hier erhält jeder Nutzer eine eigene Startseite. Natürlich ist bei beiden Ansätzen der clientseitige Datenabruf immer noch möglich.

Sind statische Websites komplett undynamisch?

Nein! Intelligente Static Site Generatoren wie NextJs (und auch Gatsby.js seit Version 4) geben einem die Option welche Unterseiten statisch vorgerendert werden soll und welche Unterseiten dynamisch per Aufruf geladen werden. Mit diesen Hybrid-Websites können wir Webentwickler extrem schnelle Websites bauen und können trotzdem dynamische Bereiche wie Mitgliederbereiche oder Shopping-Systeme realisieren. 

Vorteile von Static Site Generatoren

Performance und SEO

Wie vorher erwähnt machen wir den ganzen Static Site Generatoren Unfug nur aus einem Grund: Performance der Website. Dieser Performance-Boost verbesser auch signifikant die SEO-Performance, da die Geschwindigkeit einer Website mittlerweile einen hohen Einfluss auf die Rankings hat. 

Günstiges Hosting

Da durch den Generator nicht wirklich einen großen Server brauchen, der Daten verarbeitet und die Website zur Verfügung stellt, ist das Hosting von statischen Websites extrem günstig.

Anpassungsfähigkeit durch Komponenten

Viele der Static Site Generatoren arbeiten auf komponentenbasiertes Webdesign und splitten eine Website (wenn gewollt) in einzelne Teilbereiche auf. So wird ein Button einmal definiert und mehrmals angewendet. Eine Änderung an der Button-Datei und die Ausgabe ist überall geändert. 

Die Entwicklung mit den Generatoren macht Spaß

Durch das komponentenbasierte Webdesign und das Fehlen von Benutzeroberflächen wird den Webentwicklern die Arbeit stark erleichtert. Mit den Generatoren fühlt sich das Programmieren von Websites fast so an, als würde man die statisch schreiben. Durch das Erstellen von eigenen Komponenten und Templates ist es spielend einfach eine Website nach seinen Vorstellungen zu erstellen. Erfahrene Webentwickler bevorzugen dieses Vorgehen, da ein CMS die Denkweise einschränkt, weil man sich an das CMS und die Eigenheiten anpassen muss.

Nachteile von Static Site Generatoren

Technische Hürde

Alles wunderbar in der Welt der Generatoren? Nicht ganz. Der Vorteil für Programmiere ist für Webdesigner, die nicht programmieren können der Tod. Es ist quasi unmöglich eine Website mit einem Static Site Generator zu bauen, da die technische Hürde sehr hoch liegt und jegliche Benutzeroberflächen fehlen. Ebenso gibts im Dschungel der vielen Generatoren immer technische Unterschiede und jeder Generator stellt andere APIs zur Verfügung.

Keine bis wenige Templates

Wer gerne mit Templates arbeitet, ist an dieser Stelle falsch. Dadurch das die technische Hürde sehr hoch ist, stehen hier auch wenige Vorlagen zur Verfügung. Man muss quasi alles selbst erstellen und gestalten - was für einen Webdesigner-Profi aber kein Problem darstellt, da wir sowieso keine Templates verwenden.

Welche Generatoren gibt es?

Es gibt zahlreiche Generatoren, die sich je nach Programmiersprache und Template-Engine aufteilen. Anbei einige bekannte die heute (August 2021) sehr bekannt sind:

SSG Programmiersprache Template-Engine
Next.js JavaScript React
Hugo Go Go
Gastby JavaScript React
Jekyll Ruby Liquid
Nuxt JavaScript Vue
Hexo JavaScript EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko 
Eleventy JavaScript Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, JavaScript, HTML, Markdown 
Astro JavaScript Svelte, React, Preact, Vue, HTML 
     

Eine vollständige und ständig aktuelle Liste findest Du hier: https://jamstack.org/generators/

Fazit

Ein Static Site Generator ist die richtige Wahl, wenn Du eine einfache schnelle Website brauchst und Programmieren kannst. Selbst ein Vergleich von Vor- und Nachteilen fällt hier weg, da dank Hybrid-Systemen das Renderverfahren der Seite bestimmt werden kann. Wir für unseren Teil haben uns von den klassischen CMS Systemen getrennt und nutzen ausschließlich Static Site Generatoren. Aber auch ein WordPress ist bei uns als Headless CMS trotzdem noch zu finden. 

 

 

Möchtest Du noch mehr erfahren?

Lautenschlager Marketing & Entwicklung ist eine Werbeagentur mit Spezialisierung auf Web-Technologie und online Marketing. Lies gerne in unseren anderen Artikeln weiter.

Zu weiteren Artikeln