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.
- JavaScript ist für die dynamischen Funktionen zuständig und ruft die APIs auf.
- APIs ermöglichen den Datenaustausch mit anderen Programmen. Sie bilden das Backend einer Website.
- Markup ist der HTML- und CSS-Code, den der Browser liest und als statische Webseite anzeigt.
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:
- Entwickler können Komponenten unabhängig voneinander erstellen und bereitstellen.
- Maximale Geschwindigkeit, da die sonst üblichen, mehrfachen Serveranfragen entfallen.
- Die Bereitstellung über ein CDN beschleunigt den Zugriff weiter, schützt vor Problemen bei Lastspitzen und stellt die Skalierbarkeit sicher.
- Die kürzeren Ladezeiten verbessern die User-Experience mit niedrigeren Absprungraten und höheren Conversion-Rates.
- Suchmaschinen bewerten schnelle Ladezeiten auch positiv, sodass diese das Ranking verbessern und Website-Betreiber von mehr organischen Besuchern profitieren.
- Auch Google Ads bewertet die Geschwindigkeit positiv und erhöht den Qualitätsfaktor betreffender Landingpages.
- Höhere Sicherheit, da Cyberangriffe wie DDoS-Attacken auf Server und SQL-Injections in Datenbanken nicht möglich sind.
Jamstack: Nachteile
Der Jamstack geht auch mit Nachteilen einher und eignet sich nicht für jeden Anwendungsfall.
- Für Anwendungen mit sehr vielen dynamischen Inhalten ist der Jamstack in der Regel nicht sinnvoll, da ständiges asynchrones Laden von Inhalten den eigentlichen Geschwindigkeitsvorteil zunichtemacht.
- Bei großen Projekten kann die Build Time länger dauern, sodass die Website dann ein paar Minuten nicht erreichbar ist. Wenn täglich viele Änderungen stattfinden und die Seite häufig neu generiert werden muss, kann das ein Problem sein. Für Nachrichtenseiten ist der Ansatz daher nicht geeignet.
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
