Statische Webseiten – Back to the Roots
Klären wir zuerst die Frage, was denn genau eine statische Webseite ist.
Gehen wir davon aus, dass wir mit unserem Smartphone die Webseite unserer Lieblingsbuchhandlung aufsuchen wollen. Ich gebe also die Domain in die Adresszeile des Browsers ein und bestätige diese. Mein Smartphone schickt nun eine Anfrage ins Internet, um die Informationen zu bekommen. Die Anfrage landet beim Server der Buchhandlung. Hier unterscheiden sich statische von dynamischen Webseiten.
Während bei einer statischen Webseite nun einfach eine HTML-Seite an mein Smartphone zurück geschickt wird, generiert der Server bei einer dynamischen Webseite erst einmal die HTML-Seite.
Wozu soll eine Seite überhaupt dynamisch generiert werden? Die Buchhandlung kann so zum Beispiel jeder Kundin und jedem Kunden personalisierte Buchvorschläge anzeigen, oder die aktuellen Bestseller der Buchhandlung in Echzeit anzeigen.
Welche Vor- und Nachteile haben statische und dynamische Webseiten?
Statische Webseiten sind schnell, da auf der Seite des Servers nicht erst eine HTML-Seite generiert werden muss. Sie können aber nicht individuell angepasst werden. Egal, wie oft die statische Seite aufgerufen wird – sie liefert immer dasselbe Ergebnis. Weiters ist es zeitaufwendig, Texte oder Bilder zu verändern. Außerdem können Personen ohne HTML-Kenntnisse keine Inhalte ändern.
Dynamische Webseiten sind wie zuvor erwähnt langsamer, da die Antwort als HTML erst generiert werden muss. Dafür können aktuelle Daten aus einer Datenbank geladen werden. Oder aktuelle Informationen verarbeitet werden, wie beispielsweise das Erhöhen der Anzahl im Warenkorb, wenn man ein Produkt eines Onlineshops in den Warenkorb legt – auch wenn dies in einem anderen Browserfenster passiert.
JAMstack what?
JAM setzt sich aus folgenden Technologien zusammen:
J - JavaScript A - APIs M - Markup
Wenn man einen Workflow auf Basis von JAMstack entwickelt, werden statische Webseiten generiert, in denen sich Inhalte einfach editieren lassen und dynamisch geladen werden können.
Um Inhalte leicht zu editieren, werden Content Management Systeme (CMS) verwendet. Wird die Webseite auf JAMstack aufgebaut, kann ein Headless CMS integriert werden. Headless CMS unterscheiden sich von anderen CMS darin, dass sie kein Frontend, sondern nur ein Backend haben, indem Inhalte eingegeben werden können. Sie stellen die Inhalte über eine API (Programmierschnittstelle) bereit. JavaScript wird dabei dazu eingesetzt, über diese API die Informationen zu laden.
Für die Generierung von statischen HTML-Files kann auch ein Static Website Generator verwendet werden, welcher aus Markdown-Files HTML-Files generiert. Markdown als auch HTML sind Markup-Sprachen.
JAMstack beschreibt also einen Workflow, beziehungsweise ein Prinzip für moderne statische Webseiten. Die genaue Wahl von Tools und Technologien bleibt aber den Webentwicklerinnen und -entwicklern überlassen.
Hat man erst einen solchen Workflow für seine Webseite aufgebaut, ergeben sich folgende Vorteile (die den Aufwand rechtfertigen):
Performance
Weil nicht erst eine Seite generiert werden muss, sondern sofort ausgespielt werden kann, sind statische Webseiten unglaublich schnell. Das führt dazu, dass die Webseite benutzerfreundlicher wird, da Userinnen und User selten länger als 1 Sekunde auf das Laden von Webseiten warten wollen. Die Webseite wird dadurch auch barrierefreier, weil auch Personen mit langsamen Internetverbindungen die Seiten benutzen können. Weiters führt eine gute Performance zu einem SEO-Boost, also besseren Suchergebnissen z.B. bei Google: Schnelle Webseiten werden dadurch höher gerankt.
Sicherheit
Da kein Code auf dem Server ausgeführt werden muss, kann ein Hosting gewählt werden, bei dem der Server das auch gar nicht kann oder erlaubt. Schadsoftware, also Programme, die schädliche Funktionen ausführen, kann dadurch weniger anrichten. Weiters gibt es keinen Login, der öffentlich zugänglich und dadurch durch Hacker oder Bots angreifbar ist.
Skalierbarkeit
Ein weiterer Vorteil ist die Skalierbarkeit, wodurch auch viel Traffic kein Problem für statische Webseiten ist. Diese Erfahrung haben wir zum Beispiel bei der Don’t Smoke Kampagne gemacht, als bis zu 1000 Userinnen und User gleichzeitig auf der Kampagnen-Webseite waren. Während die Ministeriums-Server eingegangen sind, war unsere Webseite dank statisch generierter Webseiten noch online.
Der Grund: Bei viel Traffic, kann man die HTML-Files schnell auf einen leistungsfähigeren Server schieben. Mittels CDN (Content Delivery Network) kann man die Webseite sogar noch schneller machen.
Günstig + ressourcenschonend
Dadurch, dass der Server lediglich HTML-Files ausliefern soll, kann hier beim Hoster ein kleineres Paket genommen werden – das spart Geld. Außerdem werden Ressourcen geschont: Je weniger Strom der Server braucht (weil er nichts generieren muss), umso mehr tun wir für die Welt!
Learnings
JAM setzt sich aus 3 Technologien zusammen
JavaScript, APIs (Programmierschnittstelle) & Markup werden verwendet, um statische Webseiten zu generieren, in denen sich Inhalte einfach editieren lassen und dynamisch geladen werden können.
Headless CMS
Headless CMS unterscheiden sich von anderen CMS darin, dass sie kein Frontend, sondern nur ein Backend haben, in dem Inhalte eingegeben werden können. Sie stellen die Inhalte über eine API (Programmierschnittstelle) bereit.
Vorteile
Den entwicklungstechnischen Aufwand rechtfertigen einige Vorteile: Performance, Sicherheit und Skalierbarkeit. Außerdem sind statische Webseiten ressourcenschonend und kostengünstig, weil die Server weniger Strom benötigen.
Veröffentlicht am: 10.09.2019
Autorin
Mirjam Zenz
Wir haben noch mehr super interessante Blogartikel!