blog

JAM-Stack: Was ist das (genau)?

Wir werden häufig gefragt: "Was ist eigentlich der JAM-Stack?". Das ist Anlass genug, darüber einen Blogbeitrag zu schreiben und die häufigsten Fragen diesbezüglich zu beantworten. In a nutshell: Der JAM-Stack ist der moderne Weg um Webseiten und Web-Apps zu programmieren, welche eine viel bessere Performance aufweisen als herkömmliche Methoden.


Samuel Rhyner - 16. Juli 2021

WEBENTWICKLUNG - JAM-STACK - SEO

Terminologie:

JAM-Stack (oder Jamstack) bzw. "Stack" ist in der Fachsprache eine Kombination von mehreren Technologien (JavaScript, Apis & Markdown). Sprich, es ist technisch falsch z.B. "JAM-Stack" mit "WordPress" zu vergleichen. WordPress jedoch läuft auf dem "LAMP-Stack" und somit kann man "JAM" mit "LAMP" vergleichen. WordPress ist einfach eines von vielen CMS, welche auf dem LAMP-Stack funktionieren. Für den JAM-Stack gibt es auch viele verschiedene CMS auf dem Markt.



Was ist der JAM-Stack?


JAM-Stack ist eine Architektur, welche speziell dafür gemacht wurde um das Web schneller, sicherer und einfacher skalierbar zu machen - und historisch gesehen ist das "back to the roots". Im Grunde wird die Last, welche normalerweise ein Server zu stemmen hat, zum Client-Computer übertragen oder im Vorfeld einmal für alle gemacht. Dabei generiert der Server bei jeder Änderung des Inhaltes die komplette Seite neu (besucht quasi alle möglichen Seiten und speichert das, was dabei gesehen wird) und nimmt somit viel Traffic z.B. dem CMS ab.

Aber Schritt für Schritt.

Es gibt drei Grundprinzipien, welche wir hier genauer anschauen: Prerendering, Entkopplung und CDN.



Prerendering


Eine für den/die Seitenbetreiber:in grössten Änderungen ist wohl das Prerendering. Das kann man sich wie folgt vorstellen: Wenn es Änderungen beim Inhalt gibt (wie z.B. eine neue Produktseite oder einen Schreibfehler in einem Blogpost) so generiert der Server die komplette Webseite neu. Sprich: Ein virtueller Benutzer besucht jede sichtbare Seite von der Webseite. Beim Besuch speichert er den HTML-Code, die Bilder, die Texte usw. ab. Diese Files werden in einer Ordnerstruktur abgelegt, wo sie wieder gefunden werden. Nach ein paar (3-5) Minuten ist die Seite dann "deployed", sprich live im Internet.



Entkopplung


Dieses Prinzip ist ein Paradigmenwechsel. Nach dem Prerendering-Ansatz werden sich vielleicht einige fragen: "Was ist mit dynamischen Inhalten"? Gute Frage! Wenn du Webseiten besuchst, gibt es immer wieder Teile, welche exakt für dich zugeschnitten sind (z.B. oben rechts dein Benutzername oder Vorschläge basierend auf deinem Warenkorb). Diese Informationen werden jeweils beim Besuch von einer speziellen API abgerufen und dann in der Seite eingefügt. Somit entsteht eine komplette Entkopplung vom Server und dem Benutzer (Front- und Backend).


APIs werden immer beliebter und es gibt immer mehr Services, welche ihre Daten über eine API zur Verfügung stellen. Die meisten CMS, welche im Zusammenhang mit einer JAM-Stack Webseite verwendet werden sind sogenannte "Headless CMS". Das bedeutet, dass dessen Inhalt (nur) via API abgerufen werden kann.



CDN


Das CDN (abk. Content Delivery Network) ist ein System von Servern, welche nur einen Job haben: Sobald ein Request kommt, wird eine vordefinierte Datei ausgeliefert. Beim herkömmlichen LAMP-Stack musste zuerst die Datei berechnet werden. Jedoch kann das CDN das gar nicht. Dafür wurde die Webseite ja "prerendered". Und es geht noch weiter: Weil das File nicht berechnet werden muss, ist der Server blitz-schnell. Nochmals: BLITZSCHNELL!! Und das auf der ganzen Welt, weil es keine Rolle spielt, ob das File vom Server aus der USA, Holland oder der Schweiz kommt. Damit ist die Seite auch bei crappy Mobile-Verbindungen noch einigermassen surfbar.




Was sind die Vorteile einer Webseite auf dem JAM-Stack?


Der neue Ansatz ist schön und gut, was jedoch bringt eine Webseite, die auf dem JAM-Stack aufbaut? Es gibt sehr viele Vorteile, welche für den JAM-Stack sprechen. Ebenfalls gibt es ein paar wenige Nachteile, welche wir natürlich auch zur Sprache bringen wollen. Aber zuerst zu den überzeugenden Argumenten.



Performance


Webseiten auf dem JAM-Stack sind schnell. Sehr schnell! Und wenn diese dann noch auf einem CDN gehostet werden, sind sie "blazing fast"! :) Mit den JAM-Stack Webseiten erreichen wir ohne grosse Optimierungen einen Google Light-House-Schnitt von mehr als 85/100 Punkten. Und mit etwas Optimierungen schaffen wir locker 95/100 Punkten, was weit über dem Schnitt liegt.


Die Geschwindigkeit ist vor allem für mobile Nutzer sehr spürbar. Webseiten die schnell laden werden statistisch viel länger besucht. Zudem rankt Google Webseiten auch einiges besser, welche schnell laden.



Sicherheit


Der JAM-Stack hat viele verwundbare Teile verbannt. Die Infrastruktur einer Seite beläuft sich auf ein Minimum. Da die Webseite von einem anderen Server anstatt dem CMS-Server geliefert wird können Angriffe gar nicht gestartet werden. Es ist somit für Angreifer nur schon eine grosser Herausforderung zu erkennen, welches CMS für die Seite genutzt wird. Und da die meisten CMS als SaaS (Software as a Service) "gemietet" werden haben sie ein hohes Interesse, die Daten zu schützen.



Stabil


JAM-Stack Webseiten sind sehr resilient und robust. Durch die Entkopplung von Front- und Backend ist ein Betrieb auch möglich, wenn Teile der Webseite in Wartung sind oder Fehler aufweisen. Zudem ist der Request nicht nur an einen Server, sondern auch an einen Loadbalancer gerichtet.


Durch die sofortige Invalidierung des Caches ist auch ein konsistenter Betrieb gewährleistet, wenn sich Inhalte ändern. Dadurch kann man sicher gehen, dass bei allen Endgeräten die aktuelle Version angezeigt wird! Nie mehr Cache-Probleme beim Testen einer Webseite.



Skalieren


Man mag denken: Wieso sollte meine Seite gut skalieren können? Gerade Schweizer Unternehmen haben üblicherweise keine grossen Skalierungsprobleme. Jedoch gibt es immer wieder Fälle, wo Webseiten nicht erreichbar sind, weil zu viele Benutzer darauf zugreifen möchten (Klassiker: unschlagbare Angebote / Tickets / etc.). Und da kommt der Clou, wie man beim JAM-Stack skaliert: zuschauen! Das CDN ist darauf ausgelegt, die Seite skalieren zu lassen. Als Betreiber:in muss man höchstens ein paar Daten-Volumen-Pakete kaufen und die APIs auf Funktionalität prüfen, wenn sehr viel Traffic anfällt. Der Rest wird vom System "by design" erledigt.


Bei herkömmlichen Webseiten war eine Skalierung nicht so einfach zu bewerkstelligen. Mehrere Server mit einem Loadbalancer zu versehen und dann die Datenhoheit zu gewährleisten waren Herausforderungen für ganze IT-Abteilungen.



Wartung


Eine laufende JAM-Stack Webseite braucht praktisch keine Wartung. Sobald die Webseite läuft, braucht es keine Entwickler, welche die Seite konstant warten. Es macht sicher Sinn, ab und zu die Code-Basis auf die neusten Updates zu aktualisieren. Jedoch ist das nicht halb so dringend wie bei einer WordPress Webseite, welche unter Umständen grosse Sicherheitslücken aufweisen kann.



Zügelbar


Unzufrieden mit dem Hosting? Langsames CDN? Firma geht Konkurs? Das sind Fälle, welche eintreten können. Es war aber noch nie so leicht, eine Webseite zu zügeln wie eine, die auf dem JAM-Stack aufgebaut ist. Wenn sie Prerendered ist, dann nimmt man die Files und platziert sie dort wo man sie neu haben will. Fertig. Copy - Paste.

Fällt eine API aus, weil z.B. der Mail-Dienstleister den Betrieb einstellt? Auch da, es war noch nie so einfach, sich einen neuen Dienstleister auszusuchen und die Requests anpassen.



Entwicklerfreundlich


Die Frameworks und Programmiersprachen für den JAM-Stack sind sehr programmiererfreundlich. Eventuell interessiert das dich als Kunde nicht. Jedoch hat das durchaus seine Vorteile:

  • Wir können fehlerfreieren Code ausliefern, wenn wir die Entwicklung geniessen.

  • Wir sind schneller was in geringeren Kosten resultiert.

  • Wir profitieren von der Community, welche auch gerne einfach entwickelt.

  • Wir sind effektiv und effizient.




Gibt es Nachteile?


Wie schon erwähnt, gibt es auch ein paar Nachteile, wenn wir vom JAM-Stack sprechen. Anzumerken ist aber, dass wir als Entwickler diese nicht als "Red Flag" sehen, weil uns dadurch mehr Optionen zur Verfügung stehen.



Entkoppelt


Gerade weil alles Entkoppelt ist, werden gewisse Dinge leicht aufwendiger. Beispielsweise das Versenden von E-Mails ist auf einem PHP-Server genau eine Zeile Code - simpel. Beim JAM-Stack müssen wir entweder eigene Lösungen entwickeln oder auf Dienstleister wie SendGrid zugreifen. Dasselbe gilt auch, wenn wir z.B. Daten speichern müssen oder Benutzer authentifizieren sollten.


Jedoch ist dieser Ansatz sehr zukunftsgerichtet: Ist man mit einem Dienst nicht mehr einverstanden, so ist es einfach, diesen zu wechseln. Wenn in einer Komplettlösung einen Bestandteil nicht mehr passt, so muss viel umgebaut werden.



Presets & Plugins


Die JAM-Stack Welt ist vergleichsweise relativ jung. Es gibt noch nicht so viele Presets und Plugins, wie dies bei anderen Webseiten-Lösungen der Fall ist. Jedoch wird das je länger desto besser.


Es ist zudem relativ schwierig "einfach kurz ein Plugin zu installieren" und direkt neue Funktionen auf der Webseite zu haben. Das ist sich aber auch am Entwickeln und wir werden sehen, wie die Zukunft aussieht.



Echtzeit & Userdaten


Der JAM-Stack-Ansazt ist nicht sehr gut geeignet, wenn es darum geht mit viel Userdaten umzugehen. Facebook z.B. ist nicht auf dem (klassischen) JAM-Stack aufgebaut, weil zu viele Daten sich zur selben Zeit ändern. Da hilft, aus einer Webseite eine Web-App zu machen und somit diese Möglichkeiten zu aktivieren.




Gehört dem JAM-Stack die Zukunft?


Obwohl die JAMstack-Architektur ein integraler Bestandteil der modernen Web-App-Entwicklung ist, handelt es sich nicht um eine Einheitslösung. Es gibt durchaus Fälle, wo dieser Ansatz nicht angebracht ist. wir verwenden nicht für jedes Projekt den JAM-Stack. Doch diese dynamischen Webseiten können nicht mit ihren JAM-Stack-Pendants in Bezug auf Geschwindigkeit, Leistung und Sicherheit mithalten. Das Ökosystem rund um den JAM-Stack ist sich jedoch am Entwickeln und wird irgendwann die Beschränkungen auch ausgleichen.


JAM-Stack ist kein Buzzword, welches wir in ein paar Jahren schon wieder vergessen haben. Er ist die Zukunft. Genau so wie die dynamische Entwicklung. Wenn du dich dafür interessierst und JAM-Stack-Outsourcing-Entwickler suchst, so kann unser Team deinen Fall analysieren und die komplexeste Idee zum Leben erwecken! Schreibe uns und wir melden uns umgehend bei dir!

Samuel Rhyner, Gründer von Code Crush
Autor:in

Samuel Rhyner

Ich bin Samuel. Meine Welt dreht sich die meiste Zeit um Programm-Code. Ich liebe es, hartnäckige Probleme zu verstehen und dafür Lösungen zu finden. Dabei bin ich gerne im Zug und arbeite am liebsten, wenn die Landschaft mit 130 Stundenkilometer an mir vorbeizieht. Um abzuschalten schaue ich gerne real-fiktionale Serien – und hasse es, gespoilert zu werden. Wenn ich auf den Stream warten muss, so nehme ich mir jeweils vor: meine Applikationen sind performant programmiert & die Wartezeiten möglichst kurz. Sie sind die TGV’s unter den Programmen!