Für viele heute unvorstellbar: Es gab eine Zeit, in der ersten Hälfte der 1990er Jahre, da das noch junge World Wide Web ausschließlich aus statischen HTML-Seiten bestand. Diese lagen fix und fertig auf dem Webserver und wurden bei jedem Aufruf unverändert angezeigt. Die Benutzerinteraktion mit einer Website beschränkte sich im Wesentlichen auf das Anklicken von Hyperlinks.
Das Web wird dynamisch
Erste dynamische Elemente wurden auf Clientseite durch JavaScript möglich, welches 1995 für den damals populärsten Browser, Netscape Navigator, veröffentlicht wurde. Nahezu zur selben Zeit entstanden auch Programme wie PHP, ASP oder ColdFusion, die mithilfe des damals brandneuen Common Gateway Interface (CGI) mit einem Webserver kommunizieren konnten und serverseitig dynamische Webanwendungen ermöglichten – und um diese soll es in diesem Beitrag vorrangig gehen.
Denn inzwischen gibt es auch statisch auf dem Webserver vorgehaltene Webseiten, bei denen umfangreiche dynamische Funktionen clientseitig realisiert werden, um die Seite nicht bei jeder Benutzerinteraktion neu vom Server laden zu müssen, sogenannte Single-Page-Applikationen. Im Gegensatz dazu beschäftigen wir uns hier mit serverseitiger Dynamik: Serverseitiges Skripting erlaubt es, Webseiten mit Hilfe von Templates und Datenbankinhalten erst beim Aufruf dynamisch zu erzeugen – nützlich bei der Darstellung häufig aktualisierter Informationen (z. B. von Börsenkursen), aber auch für die komfortable Verwaltung von Webseiten in Content-Management-Systemen (CMS).
Denn vor allem Bequemlichkeit ist der Grund, warum über drei Viertel aller Websites weltweit ein CMS nutzen, die meisten davon WordPress. Es ist damit nicht mehr nötig, HTML- und CSS-Dateien lokal zu erstellen oder zu verändern, sie auf einer lokalen Webserver-Umgebung zu testen und dann auf den produktiven Webserver hochzuladen. Das CMS nimmt die gewünschten Inhalte entgegen, die Erstellung und Aktualisierung von Webseiten erfolgt dank Datenbank auf Knopfdruck. Die Layout-Entwicklung wird durch Vorlagen (Templates) erleichtert. Der eigentliche Zweck eines CMS – die Verwaltung von umfangreichen Inhalten – tritt dagegen meist in den Hintergrund.
Dynamische Erzeugung von Webseiten
Bei der dynamischen Erzeugung von Webseiten hat der Webserver wesentlich mehr zu tun als bei statischen Seiten. Denn er muss nach einem Seitenaufruf die Webseiten-Inhalte aus verschiedenen Quellen zusammensuchen (meist einer SQL-Datenbank wie MySQL oder MariaDB und immer häufiger auch APIs von Webservices), daraus die Seite bauen und das Ganze ausliefern. Die Bauanleitung dafür findet er in Templates mit statischem HTML-Code und Variablen für die dynamischen Anteile. Um diese Vorlagen mit aktuellen Inhalten zu befüllen und daraus den auszuliefernden HTML-Code zu erzeugen, arbeitet er entsprechende Skripte ab, geschrieben in serverseitigen Skriptsprachen wie PHP, Perl, Ruby oder auch JavaScript (per Node.js).
Genauso arbeiten CMS-Systeme oder auch deren einfachere Version, die sogenannten Homepage-Baukästen: Sie nutzen Templates (oder Themes) für die Struktur und das Layout von Websites und speichern die eigentlichen Inhalte in einer Datenbank, wo sie schneller und einfacher geändert werden können als im fertigen HTML-Code, der nach jeder Änderung wieder auf den Webserver geladen werden muss.
Statisch vs. dynamisch: Vor- und Nachteile
Werden Webseiten erst bei ihrer Anforderung erzeugt, erlaubt das die Anzeige aktueller Informationen in „Echtzeit“, umfangreiche interaktive Funktionen und komplexe Anwendungen wie beispielsweise Webshops, Websites mit Benutzermanagement etc. Insbesondere ermöglicht es die komfortable Erstellung und Pflege von Webseiten auch ohne fortgeschrittene Programmierkenntnisse. Redakteure können sich um ihre Texte kümmern, das CMS sorgt dafür, dass diese an der richtigen Stelle in der Webseite erscheinen.
Aber CMS für Websites haben auch Nachteile: Die dynamische Generierung benötigt mehr Rechenressourcen für Datenbank- und Webserver und dauert häufig zu lange. Es ist zudem wenig nachhaltig, eine komplexe Webseite, die sich vielleicht einmal im Monat ändert, bei jedem Aufruf – also möglicherweise mehrere Tausend mal täglich – neu zu generieren. Zudem benötigen CMS-Anwendungen viel Pflege, um etwa Sicherheitslücken zu beseitigen; gerade WordPress ist wegen seiner großen Verbreitung ein populäres Ziel von Hackern.
„Statische“ Seiten haben all diese Nachteile nicht: Sie benötigen keine Datenbank, kein CMS und kein PHP; das reduziert die Komplexität. Weil sie nicht erst generiert werden müssen, laden sie schneller und zuverlässiger und bieten bessere Sicherheit und Verfügbarkeit. Und anders als die Bezeichnung suggeriert, muss man dank clientseitigem JavaScript nicht auf dynamische und interaktive Funktionen verzichten.
Static-Site-Generatoren
So liegt die Frage nahe, ob sich nicht auch die Vorteile statischer Seiten mit einer schnellen Generierung und Aktualisierung verbinden lassen. Genau das leisten „Static-Site-Generatoren“ (SSG).
Ähnlich wie ein CMS trennt ein Static-Site-Generator die Inhalte einer Webseite von Struktur und Layout. Am Anfang dieses Trends stand Jekyll, geschrieben in Ruby und veröffentlicht 2008. Wie auch viele traditionelle HTML-Editoren nutzt Jekyll Layout-Templates, um Designs für Webseiten festzulegen. Anders als HTML-Editoren ist Jekyll aber nicht als Entwickler-Werkzeug, sondern – wie CMS – als Publishing-Werkzeug konzipiert, aber mit dem Blick eines Entwicklers („Blogging like a hacker“). Das heißt: Wie in einem Git-Repository sind Inhalte (als Plain-Text-Dateien) und Templates in Ordnern gespeichert und können per Knopfdruck oder automatisch im Hintergrund veröffentlicht werden (analog einem Deploy-Skript oder Git-Hooks). Die Konfiguration erfolgt über YAML- oder TOML-Dateien.
Jekyll ist bis heute einer der beliebtesten SSGs und steckt unter anderem unter der Haube von GitHubs Hosting-Angebot GitHub Pages. Inzwischen gibt es mehrere Hundert SSGs; die populärsten sind neben Jekyll Gatsby (in JavaScript) und Hugo (in Go) sowie die „Meta-Frameworks“ mit SSG-Fähigkeiten Next.js (für React) und Nuxt (für Vue.JS). Einen guten Überblick erhalten Sie auf jamstack.org.
Ein wesentlicher Unterschied zu CMS mit Admin-Oberfläche: Static-Site-Generatoren werden in der Regel auf der Kommandozeile bedient. Das gilt für den Pionier Jekyll ebenso wie für Hugo oder Gatsby. Schwerer wiegt, dass die Webseiten-Inhalte so nicht besonders komfortabel verwaltet werden können. Aber auch dafür gibt es Werkzeuge, denn Jekyll, Hugo, Gatsby & Co. unterstützen Plugins und Erweiterungen. So rüstet das Plugin „Jekyll Admin“ eine grafische Verwaltungsoberfläche für Inhalte und Jekyll-Sites nach; Hokus bietet CMS-Funktionen für Hugo. Die Headless-CMS-Systeme NetlifyCMS (Open Source) und Forestry (kommerziell, mit kostenlosem „Personal“-Tarif) lassen sich ebenfalls mit diversen SSGs koppeln.
Mehr spannende Infos zum Thema finden Sie in diesen Blogbeiträgen von Host Europe:
Weitere Tipps, wie Sie dynamische Webseiten erstellen, finden Sie hier:
- Die besten Static-Website-Generatoren für Ihr Web-Projekt
- Webseiten bauen mit Gatsby
- JAMstack mit Gridsome – dem Static Site Generator für Vue.js
- Sofort startklar mit Managed WordPress-Hosting
Titelmotiv: Photo by charlesdeluvio on Unsplash
