WordPress war gestern – JAMstack, eine auf Javascript, APIs und Markup basierender Ansatz, ist die perfekte Lösung für Moderne Präsentationsseiten und einiges mehr.

Wer sich noch erinnern kann - die ersten Webseiten bestanden aus statischem Content und einfachen HTML, JS, CSS Dateien. Man hat einen einfachen
Ordner erstellt, mit HTML, CSS und eventuell JS rum programmiert und anschließend mit FTP auf einen Webserver hochgeladen und fertig.

Diese Seite benötigte keinen Server, keine Datenbanken, kein komplexes Backend oder überhaupt allgemeinen Datenaustausch.
Die Moderne Webentwicklung sieht natürlich anders aus - für jedes Frontend ein eigenes Backend worüber man das Frontend mit Daten füttern kann, eventuell
auch über eine extra Schnittstelle (API) um das Frontend vom Backend zu lösen.

JAMstack funktioniert allerdings ein wenig anders:

Back to the Roots

Was ist JAMstack

Es steht für JavaScript, APIs und Markup. Es repräsentiert eine modernen Web-Entwicklungs-Ansatz, der am Ende einfache Statische Webseiten generiert.
Warum statische Webseiten? Warum wieder zurück zu den Wurzeln?

Ganz einfach - statische Webseiten bieten einige Vorteile, sie sind performant, sicher und können nicht ausfallen.
Selbst wenn das Backend oder der ganze Server ausfällt, die Webseite ist statisch, der Content ist statisch, einmal generiert ist dieser statisch
in HTML Dateien geschriebene Content nach wie vor verfügbar.

Performance

Die Performance einer Seite ist einer der Wichtigsten SEO Ranking Faktoren. Was macht JAMstack so performant? Üblicherweise
werden die Daten über verschachtelte Queries über einen Server oder von einer API angefordert, das fällt weg, wenn der Content bereits vorhanden ist.
Ansonsten sind JAMstack Seiten überdurchschnittlich schnell, ähnlich schnell wie Single-Page-Applicationen (SPAs) aber mit dem feinen Unterschied des es hier um richtigen statischen HTML Content handelt.

Sicherheit

Mit dem JAMstack Ansatz sind Frontend und CMS losgelöst voneinander, darüber hinaus gibt es, wenn überhaupt, kaum Verbindungen zu einem Server bzw. zur API denn das braucht es einfach nicht.
Somit ist dieser Seite auch nicht angreifbar für potentielle Gefahren.

SEO

Mit JAMstack generierte Seiten bieten hervorragendes SEO. Während bei reinen Single Page Applikationen das SEO oft auf der Strecke bleibt, weil relevanter Content eben nur nachgeladen wird und somit nicht
im Seitenquelltext auftaucht, ist der Content hier eben statisch und somit auch im Quelltext auffindbar. Darüber hinaus existiert jede Seite auch tatsächlich, kein virtuelles Routing oder dynamisches nachladen.

Workflow

Wir sprechen ja immer noch über ein CMS, einem Content-Management-System. Wie und wann werden die statischen Seiten dann generiert? Im Grunde funktioniert es folgendermaßen:
Man kann normal über ein CMS Content erstellen, löschen, pflegen etc. Anschließend muss die JAMstack Webseite neu gebaut und hochgeladen werden. Hört sich unnötig aufwendig an, oder?
Im Grunde ist es das in der Theorie auch, praktisch geschieht das aber alles automatisch. Man pflegt Content, der Server erkennt das über einen Hook und sagt dem anderen Server, wo die JAMstack Seite liegt.

Hey! Es hat sich Content geändert, bau dich doch mal bitte neu!

Die JAMstack Seite zieht sich dann den Content neu, generiert alle Seiten und die Änderungen sind dann nach kurzer Zeit verfügbar und ersichtlich.

Die Probleme mit JAMstack

Wie bei allen Technologien eignen sich abhängig der Projektanforderungen einige mehr oder weniger. Seiten oder Applikationen mit sehr stark frequentierten Datenaustausch, die einen neuen Build erfordern, sind im Allgemeinen für JAMstack Seiten eher ungeeignet . Hierbei liegt die Betonung aber auf Neuen Build. Denn ich kann auch Content über eine API nachladen oder einzelne Seiten im Gesamtkonstrukt auslagern, hier sind wir total flexibel.

Frameworks & Hosting

Static Site Generatoren

JAMstack ist ja lediglich der Ansatz bzw. Weg, mit welchen Static Site Generatoren bzw. Frameworks kann ich diese Technologie denn anwenden?

Hier gibts folgende Liste: https://www.staticgen.com/

Auf React basierende gibt es Next.js und Gatsby JS, letzteres verwende ich für meine eigene Seite und kann ich bediengungslos empfehlen.

Headless CMSs

Wo kann ich den Content pflegen? Es gibt einige Headless CMSs die sich dafür eignen. Theoretisch kann man jedes CMS nehmen, es muss lediglich eine Schnittstelle bereitstellen:

Hier gibts folgende Liste: https://headlesscms.org/

Ich verwende Strapi oder Contentful. Strapi ist allerdings self-hosted, dafür hat man ein eigenes System welches man auch für den Anwender customizen kann. Letzeres verwende ich auch für meine eigene Seite.

Hosting und Deployment

Man kann die Seite theoretisch überall hosten, es gibt allerdings moderne Hosting Lösungen über CDN (Content Delivery Networks) die dafür einfach besser geeignet sind.
Meine Favoriten sind Netlify, Firebase und AWS. Diese Seite wird bei Netlify gehostet.

Entwicklung & Zukunft

Der JAMstack Weg entwickelt sich sehr schnell weiter, die Breite an Frameworks ist jetzt schon enorm und es geht noch weiter. Das Frontend ist sehr effektiv und extrem sicher was zu dieser Zeit
enorm wichtig geworden ist. Statische Webseiten mit entkoppelten Systemen lassen die Herkunft der sensiblen Daten vollkommen verschwinden und gepaart mit der Performance wird es DIE Lösung für Internetseiten der Zukunft werden.

Lasst uns ein Teil dieser Zukunft werden.