Ein Jamstack-fähiges CMS

KB11

Jamstack, ein Begriff, der 2015 von Mathias Biilmann und Chris Bach von Netlify geprägt wurde, definiert ein weit verbreitetes Architekturmuster für die Erstellung moderner Websites. Ursprünglich wurde Jamstack als JAMstack geschrieben, wobei das „JAM“ für JavaScript, APIs und Markup stand. Heute wird der Begriff allgemeiner verwendet. Unternehmen wie Netlify und Contentful haben Jamstack in der Web-Community beworben. Websites, die dieses Konzept nutzen, verwenden in der Regel eine Kombination aus JavaScript und JavaScript-Frameworks, wiederverwendbare APIs, die serverseitige Prozesse und vorab gerendertes statisches HTML ersetzen.

Heute gibt es viele Definitionen von Jamstack – [Re-Rendering und Entkopplung sind konsistente definierende Prinzipien, mit denen man vertraut sein sollte.

Content vorab rendern

Pre-Rendering ist kein neues Konzept in der Webentwicklung, aber der Aufstieg statischer Website-Generatoren und die Popularität von Jamstack haben es wieder in den Vordergrund gerückt. Beim Pre-Rendering generieren Sie eine Website im Voraus, anstatt sie auf Basis einer Nutzeranfrage zu rendern. Diese Methode verringert die Komplexität und verbessert die Leistung der Website. Sie verkürzt die Zeit bis zum ersten Byte, d. h. die Zeit, die von der Anforderung von Informationen durch eine Seite bis zu ihrem Eintreffen vergeht. Schnelle Seitengeschwindigkeiten in Kombination mit statischem Website-Content verbessern das SEO-Ranking. Mit Pre-Rendering können Sie Ihre Website auch in ein Content-Distribution-Netzwerk stellen, wodurch dynamische Serveroperationen entfallen. Content-Delivery-Netzwerke sind Gruppen von geografisch verteilten Servern, die die Web-Performance verbessern, indem sie Content standortbezogen bereitstellen.

Entkopplung

Entkopplung ist die Praxis, eine klare Trennung zwischen Diensten und Systemen, die in Ihrer Anwendung verwendet werden, aufrechtzuerhalten. Bei Jamstack sind Front-End- und Back-End-Tools getrennt, sodass Wartung und Aktualisierung einfach sind. Jamstack bietet Ihnen auch die Möglichkeit, vertrauenswürdige Tools und Frameworks zu nutzen, darunter Headless-CMS oder Composable Content-Plattformen, Suchanbieter und Medienspeicherdienste. Hier kommt eine Composable Content-Plattform wie Contentful ins Spiel.

Jamstack-Tools und -Services

Es gibt Dutzende von Tools, um eine Jamstack-Website zu erstellen – Jamstack.org listet über 300 statische Website-Generatoren auf! Um mit der Erstellung einer Jamstack-Website zu beginnen, wählen Sie einfach ein Framework, einen Ort zum Verwalten von Content und einen Bereitstellungsdienst aus. Hier ist eine Übersicht über mögliche Tools, die Sie zum Erstellen innerhalb des Jamstack-Ökosystems verwenden können.

Statische Website-Generatoren

In traditionellen CMS wie WordPress wird Content in einer Datenbank gespeichert und befindet sich in eng gekoppelten Vorlagen, die HTML-Seiten erstellen. Diese Seiten werden clientseitig geladen und benötigen JavaScript, um zu funktionieren. Wenn Ihr Content skaliert wird und mehr clientseitige Aufrufe erfolgen, kann die Web-Performance abnehmen. Statische Website-Generatoren wie Next.jsNuxt und Hugo sind vom CMS entkoppelt. Entwickler*innen haben keine Einschränkungen bei der Speicherung von Content, Vorlagen, Sprachen oder Frameworks. Die Daten werden zur Build-Zeit mit HTML-Seiten gebündelt und von einem CDN bereitgestellt. Da diese Seiten statisch bereitgestellt werden, benötigen sie kein JavaScript. Während der Content skaliert wird, erleben die Nutzer*innen keine Änderungen der Web-Geschwindigkeit.

Headless Content Management System (CMS)

Traditionelle CMS verflechten Content, HTML und Layout. Diese Systeme basieren auf Seiten, bei denen Sie Content an mehreren Stellen aktualisieren müssen und die keine Wiederverwendung von Content unterstützen. Bei WYSIWYG-Editoren ist es auch üblich, dass Redaktionsteams Layouts aufbrechen.Composable Content trennt Content von Präsentationsschichten und verbessert die Arbeitsabläufe. Dieser Ansatz unterstützt die Wiederverwendung von Content und bietet Entwickler*innen die Autonomie bei der Auswahl von Tools, die mit einem Headless-CMS kombiniert werden können.

Drittanbieter- und interne APIs

Such-, Authentifizierungs- und Medienverwaltungsfunktionen sind oft in alte CMS eingebettet, sodass Entwickler*innen nicht ihre bevorzugten Alternativen auswählen können. Da viele Jamstack-Websites APIs von Drittanbietern oder interne APIs verwenden, haben Sie die Freiheit, die Tools von Drittanbietern auszuwählen, mit denen Sie sich am wohlsten fühlen. Beliebte Tools sind Shopify für E-Commerce, Auth0 für die Authentifizierung und Typeform für das Hinzufügen von Formularen.

Bereitstellungsdienste

Nachdem Sie einen statischen Website-Generator, eine Content-Plattform und APIs ausgewählt haben, ist die Bereitstellung der nächste und letzte Schritt. Für Jamstack-Websites stehen verschiedene Bereitstellungsdienste zur Verfügung, darunter NetlifyVercel und GitHub – sie alle ermöglichen Entwickler*innen, eine Verbindung zu Git herzustellen und innerhalb von Minuten bereitzustellen. Verabschieden Sie sich vom Hochladen von Dateien über FTP und nutzen Sie einen reibungsloseren Build-Prozess.

Da Jamstack-Websites während des Builds Seiten generieren, sind sie nicht auf serverseitige Anfragen angewiesen (obwohl Dienste wie Netlify und Vercel diese Funktionalität bieten), was zu einer besseren Leistung führt. Jamstack unterstützt schnelle, leistungsstarke Websites mit nützlichen Funktionen wie Serverless-Funktionen, die es Entwickler*innen ermöglichen, ohne zusätzliche Infrastrukturimplementierungen mit dem Build fortzufahren.

Jamstack hilft auch bei der Verwaltung von Traffic-Spitzen und hohen Website-Lasten durch Caching. Mit einem CDN ist es viel einfacher, ein Volumen zu haben, das den Traffic-Spitzen entspricht. Hosting-Anbieter können Entwickler*innen sogar diese Verantwortung abnehmen, wodurch die Fehlerquellen in Anwendungen reduziert und die Wahrscheinlichkeit und Häufigkeit von Ausfallzeiten begrenzt werden.

Das Hosten statischer Websites ist erschwinglich und verringert die Anzahl der erforderlichen Dienste. Bei Jamstack-Websites verwalten Hosting-Anbieter die Infrastruktur und verringern so die Abhängigkeit von Entwickler*innen. Es besteht keine Notwendigkeit, Server zu überwachen, und es gibt weniger Abhängigkeit von proprietärer, veralteter Software, was zu einer moderneren Webentwicklung führt.

Jamstack verwendet Tools, mit denen viele Frontend-Entwickler*innen bereits vertraut sind, was zu einer schnelleren Entwicklung führt. Entwickler*innen haben die Freiheit, zu wählen, welche Tools und Frameworks sie verwenden möchten, und APIs von Drittanbietern bieten mehr Funktionalität ohne zusätzlichen Wartungsaufwand. Jamstack-Websites sind unglaublich flexibel, da sie auf JavaScript basieren, sodass Sie mit Angular, Vue oder Ihrem bevorzugten Framework erstellen und schnell loslegen können. Jamstack-Entwickler*innen können robuste Web-Apps erstellen, ohne sich mit monolithischen Infrastrukturen aufhalten zu müssen. Die einladende Jamstack-Community bietet auch einen wertvollen Vorteil für Entwickler*innen, indem sie detaillierte Ressourcen bereitstellt und den Austausch von Ideen fördert.

Bei Contentful dreht sich alles um Content, APIs und Technologie-Stacks. Unser grundsolides Content-CDN hilft Apps, API-Aufrufe an uns zu senden, und stellt sicher, dass wir Content blitzschnell zurücksenden. Contentful liefert Content als JSON, sodass das Format für jeden denkbaren Content vertraut und zukunftssicher ist. Was ist mit Content mit Bildern? Wir freuen uns, dass Sie das gefragt haben. Wir haben eine zuverlässige Images API, die über die Bildbereitstellung hinausgeht. Mit ihr können Sie Bildformate spontan bearbeiten, zuschneiden und ändern. Contentful ist mehr als eine Content-Plattform – es ist die Composable Content-Plattform für Ihre Jamstack-App. Im Gegensatz zu herkömmlichen CMS wie Drupal und WordPress basiert unsere Composable Content-Plattform auf einer RESTful- und GraphQL-AP-Architektur. Unsere SDKs und Client-Bibliotheken, die alle Programmiersprachen unterstützen, vereinfachen die Erstellung von Projekten, wenn Contentful Teil des Tech-Stacks ist.