Host Europe Blog

Jamstack: JavaScript, APIs und Markup für schnelle und sichere Websites

Titelmotiv des Blogartikels zum Thema: Jamstack: JavaScript, APIs und Markup für schnelle und sichere Websites

Mit dem Jamstack können Entwickler statische Websites erstellen, die auf JavaScript, APIs, Markup (HTML/CSS) und inzwischen auch auf weiteren Technologien beruhen. Die hochmodernen und modularen Websites übertreffen klassische Websites in puncto Sicherheit, Geschwindigkeit und Skalierbarkeit. Host Europe zeigt die Vorteile, Nachteile und Einsatzmöglichkeiten.

Die Jamstack-Bestandteile erklärt

Ursprünglich stand der Begriff JAMstack mit Großbuchstaben für JavaScript, APIs und Markup.

Diese drei Bestandteile bilden den sogenannten Stack und reichen für die schnelle Entwicklung statischer Websites aus.

Hinweis: Da inzwischen weitere Technologien hinzugekommen sind, erfolgte 2020 eine Umbenennung zum Jamstack ohne Großbuchstaben, um hervorzuheben, dass es sich nicht nur um diese drei Technologien dreht.

Static Site Generators

Der Betrieb eines Backends mit Server und Datenbank ist nicht nötig, stattdessen baut ein Static Site Generator die Website vorab aus verschiedenen Quellen zusammen und liefert eine Datei an den Browser, die dieser dann ausführt und rendert. Das erspart Serveranfragen und beschleunigt die Ladezeiten.

Funktionen: Jamstack vs. klassische Website-Entwicklung

Jamstack-Websites funktionieren anders als klassische Websites. Zum Verständnis ein kurzer Abriss der Historie: Zu Beginn des Internets waren Websites immer statisch, für Inhaltsänderungen waren Codeänderungen nötig. Seit Mitte der 90er-Jahre ermöglicht PHP die dynamische Website-Darstellung mit Anfragen an einen Server und eine Datenbank. Dafür ist der LAMPstack (Linux, Apache, MySQL und PHP) der Standard. Das Laden dieser Websites erfordert jedoch viele Serveranfragen, um die dynamischen Inhalte zu generieren. Das Ergebnis sind relativ langsam ladende Websites, weil der HTML-Code erst beim Klick auf eine Seite zur Laufzeit (Runtime) erstellt wird. Eine WordPress-Website ist ein gutes Beispiel für eine typische LAMP-Anwendung.

Beim Jamstack bauen Static Site Generators die Webseiten hingegen schon vorher, sodass Inhalte nicht erst bei einem Klick aus einer Datenbank abgerufen und geladen werden müssen. Stattdessen sammelt ein Static Site Generator die notwendigen Inhalte aus Quellen wie Datenbanken und von APIs und generiert daraus die fertigen, statischen Webseiten. Die Bereitstellung erfolgt dann zum Beispiel über einen virtuellen Server und optional über ein Content Delivery Network (CDN). In der Folge laden Jamstack-Websites in der Regel viel schneller als klassische LAMP-Websites.

Bei Codeänderungen lässt sich der Build-Vorgang einfach neu starten, der bei kleinen Projekten meist nur eine Minute dauert. Für Blogs und Unternehmens-Websites stellt dieses Vorgehen kein Problem dar, da neue Artikel oder Kommentare so schnell sichtbar sind. Bei großen Projekten kann die Build Time auch länger dauern. Ob die Jamstack-Architektur dann die richtige Wahl ist, hängt von Faktoren wie der Häufigkeit von Änderungen und Aktualisierungen ab.

Dynamische Inhalte mit Jamstack anzeigen

Der Jamstack ist jedoch nicht auf statische Inhalte beschränkt und kann Inhalte sehr wohl dynamisch anzeigen. Das funktioniert mit asynchronen JavaScript-Anfragen an externe APIs. Zahlreiche sogenannte Microservices stehen dafür zur Verfügung, wie zum Beispiel eine leicht integrierbare Bezahlfunktion über Stripe.

Hybride Architektur

Entwickler müssen sich nicht mehr zwischen statisch und dynamisch ladenden Webseiten entscheiden. Inzwischen stehen mit Frameworks wie Next.js und Gatsby.js Technologien für eine hybride Struktur bereit. In einer Website oder Webanwendung können somit manche Seiten komplett statisch sein, während andere dynamisch, serverseitig gerendert werden. Dieser Ansatz vereint die Vorteile beider Technologien.

Inhalte mit Headless CMS anpassen

Headless CMS wie Strapi, Ghost und Directus ermöglichen benutzerfreundliche Anpassungen der Webseiten. Diese haben keine eigene Ansicht und sind an keine bestimmte Frontend-Technologie gebunden. Sie stellen Inhalte über eine API zur Verfügung oder dienen als Quelle für das Prerendern durch den Static Site Generator.

Jamstack: Vorteile

Der Jamstack bietet im Vergleich zu klassischen Websites mit Datenbanken und dynamischer Seitengenerierung eine Reihe von Vorteilen:

Jamstack: Nachteile

Der Jamstack geht auch mit Nachteilen einher und eignet sich nicht für jeden Anwendungsfall.

Hinweis: Die Build Time lässt sich allerdings mit Incremental Builds (z. B. bei Next.js oder Gatsby) reduzieren, da diese nur die geänderten Teile der Website neu bauen.

Einsatzmöglichkeiten

Die Jamstack-Technologie eignet sich hervorragend für Unternehmens-Websites, Blogs und auch Online-Shops. Die Entwicklung schreitet mit immer leistungsfähigeren Static Site Generators und Headless CMS-Lösungen voran. Der Einsatz lohnt sich für viele Webprojekte und stellt eine leistungsstarke Alternative zu klassischen Web-Architekturen dar. Die richtige Balance zwischen statischen und dynamischen Elementen zu finden, bleibt für Entwickler eine wichtige Aufgabe.

Fazit

Jamstack ist ein moderner Ansatz für die Entwicklung flexibler, skalierbarer, sicherer und schneller Websites und Webanwendungen. Die vielen Vorteile machen die Technologie zur beliebten Alternative zu klassischen LAMP-Websites. In Zukunft werden die Grenzen zwischen statischen und dynamischen Webanwendungen wohl weiter verschwimmen und hybride Architekturen weiter an Bedeutung gewinnen.

Titelmotiv: Bild von ivke32 auf Pixabay

Die mobile Version verlassen