Unsere 3 Zutaten für Ihre dynamische Headless-CMS-Website | Next.js, DatoCMS und Vercel

Das Web ändert sich laufend: neue Technologien, Methoden und Best Practices kommen und gehen jeden Tag. In diesem hochdynamischen Umfeld hat sich der Aufbau monolithischer Systeme, bei denen alle Komponenten einer Anwendung eng integriert und voneinander abhängig sind, als überholter und problematischer Ansatz erwiesen.

"Headless" und “serverless” — ein kurzer Überblick

Moderne Webentwicklung setzt — vor allem im Bereich "herkömmlicher" Content-orientierter Websites — auf modulare und entkoppelte Architekturen, serverless und Headless-CMS-Lösungen, um Agilität, Skalierbarkeit und Flexibilität zu fördern.

headless-cms-negroni-1

Was ist eine Headless-CMS-Website?

Am besten versteht man diesen neuen Ansatz in Abgrenzung zu Architekturen der Vergangenheit: Monolithische CMS-Systeme wie Wordpress, Drupal oder Typo3 vereinen Inhaltserstellung, Datenbank, Templates, Frontend und weitere Features (z.B. durch Plugins für Newsletter-Integration, Kontaktformulare, Analytics usw.) in einer einzigen Plattform. Keine dieser Komponenten kann sinnvoll durch eine neue ersetzt werden. Nach einer aufwändigen Umsetzung ist eine Website mit einem monolithischen System sozusagen in ihren Einzelteilen gefangen. Erweist sich eine der Komponenten als nicht mehr zukunftsfähig, muss unter Umständen das gesamte System neu implementiert werden.

Stattdessen bauen Headless-CMS-Webseiten auf einen moderneren Ansatz, bei dem nicht nur das Frontend strikt und vollständig vom Backend (also dem CMS) getrennt ist. In der Regel sind auch eine ganze Reihe weiterer Dienste angebunden, die dynamisch ausgetauscht werden können (man spricht hier auch von "serverless" und vom "JAMStack"). Die Berührungspunkte der Komponenten untereinander sind daher bewusst schmal gehalten, Form und Inhalt sind sozusagen streng getrennt.

Eine Headless-CMS-Webseite hat mehrere Kernkomponenten. Essentiell ist das CMS, das "headless" verwendet werden kann und als Software as a Service angeboten wird. Das heißt es wird nur über eine dünne Schnittstelle angesteuert und von einem Drittanbieter gehostet und gewartet (SaaS). Darüber hinaus braucht es ein geeignetes Frontend Framework und eine Deployment-Plattform wie Vercel, die es ermöglicht, Webanwendungen zu erstellen und bereitzustellen, ohne sich um die Verwaltung eigener Server oder komplexer Cloud-Konfigurationen kümmern zu müssen. Trotzdem bieten diese Plattformen ein globales Content Delivery Network (CDN), das sicherstellt, dass Anwendungen für Benutzer weltweit schnell geladen werden, sowie viele weitere Features, die uns Entwickler:innen glücklich machen sollen. Und sollte mal ein Umzug nötig werden, ist auch dies problemlos möglich. Das war in der Zeit der Monolithen nicht immer so…

Welche Vorteile bietet dieser Ansatz?

  • Skalierbarkeit: Wenn eine Komponente nicht mehr passt, kann sie durch eine bessere ersetzt werden, ohne dass der Rest des Systems neu implementiert werden muss.

  • Flexibilität: Die einzelnen Komponenten können auch für Anwendungen außerhalb der Website genutzt werden, z.B. um Social-Media-Kanäle zu bespielen (multichannel). Das CMS spielt hier als Single Source of Truth eine zentrale Rolle.

  • Performance: Einzelne Seiten werden bei diesem Ansatz vorberechnet und statisch ausgeliefert, statt jedes Mal neu berechnet zu werden. Das spart Rechenressourcen und damit Zeit, Strom 🌱 und ergo bares Geld. Die Performance von statischen Webseiten ist in jeglicher Hinsicht unschlagbar!

  • Developer Experience (DX): Frei von der Last des Betriebs eines Servers können sich Entwickler:innen voll auf "sauberen" Code konzentrieren. Durch die Modularität, die die Umgebung eines Headless CMS bietet, ist dies besonders einfach. Entwickler:innen sprechen nicht umsonst oft von "divide and conquer" 🙃

headless-cms-negroni-2

Unsere Empfehlungen für Headless-CMS-Webseiten

In den Kundenprojekten der letzten Jahre haben wir unterschiedliche Kombinationen hinsichtlich Performance, Developer- und User Experience gründlich austesten können. Um unseren Leser:innen Blut, Schweiß und Tränen zu ersparen, geben wir hiermit gerne unsere Aha-Momente weiter (leider ohne Provision): Aktuell präferieren wir für viele Anwendungsfälle einen Stack aus DatoCMS als Headless CMS, Next.js als React-Framework und Vercel als Deployment-Plattform.

Warum wir DatoCMS vertrauen

Der Markt für Headless-CMS-Systeme ist in den letzten Jahren rasant gewachsen. Viele Anbieter ähneln sich in ihren Marketingversprechen und man muss genau hinschauen, ob ein CMS für das eigene Projekt geeignet ist. Meist hilft hier nur Erfahrung in der Praxis. DatoCMS hat sich hier in den letzten drei Jahren für uns oft als die richtige Antwort erwiesen:

  • Benutzerfreundlichkeit: Die Oberfläche ist aufgeräumt und übersichtlich. Die UI zur Bearbeitung der Inhalte eignet sich auch für komplexeste Inhalte und macht komponentenbasierte Bearbeitung zum Kinderspiel.

  • Contentvielfalt & Performance: Mit DatoCMS lassen sich alle möglichen Inhalte verwalten, egal ob Text, Bild, Video oder andere Dateien. All diese Daten werden über weltweite Content Delivery Networks geografisch nah am Nutzer bereitgestellt, um Ladezeiten zu minimieren.

  • Developer Experience: DatoCMS verwendet GraphQL für die Content API, was eine präzise und schnelle Entwicklung mit industrieüblichen Standardwerkzeugen (z.B. graphql-codegen mit TypeScript) und somit weniger fehleranfälligen Code ermöglicht. Darüber hinaus bietet DatoCMS eine Reihe von SDKs und APIs, um auch komplexere Anwendungen zu realisieren.

  • Philosophie: DatoCMS entstand 2015 als hauseigene Entwicklung einer italienischen Web-Agentur, die mit den bisherigen Lösungen unzufrieden war und für ihre Kund:innen etwas Neues, Besseres wollte. Die Dato Srl hat ihren Sitz in Florenz (und ist damit als EU-Firma zu 100% DSGVO/GDPR-konform!) und liegt uns daher nicht nur geografisch näher als jedes Silicon Valley Startup. ❤️

Wir sind offiziell Agency Partner bei Dato.CMS. Das ermöglicht es uns, exklusive Preispakete an unsere Kund:innen weiterzugeben. Schreiben Sie uns unverbindlich, wir freuen uns drauf!

Michael Jaser

Ihr Ansprechpartner: Michael Jaser, Co-Founder

Warum wir es lieben, Websites mit Next.js zu bauen

Kaum ein Framework hat die Herzen von Webentwickler:innen in den letzten Jahren öfter und höher schlagen lassen: Next.js basiert im Kern auf React und verbindet dessen Vorteile für komplexe, dynamische und effiziente Browseranwendungen mit den Performance-Vorteilen serverseitig generierter, statischer Seiten. Zusätzlich bietet es die Möglichkeit auch Backendfunktionalität mit Serverless Functions abzubilden.

  • Performance: Das Beste aus beiden Welten. Incremental Static Regeneration verbindet die Performance statischer Einzelseiten mit der Möglichkeit, Inhalte rasch zu ändern und direkt auszuspielen. Das ist nicht nur gut für User, sondern auch für SEO!

  • Developer Experience: Wer React beherrscht, kann auch Next.js mit einer flachen Lernkurve schnell meistern. Viele der Dinge, die man für die meisten Projekte braucht, sind hier schon an Bord (Routing, Code Splitting, SSR, i18n u.v.m.)

  • Open Source & Community: Kollaborative, Community-gestützte Open-Source-Entwicklung begünstigt Innovation, Inklusivität und kontinuierliche Verbesserung des Frameworks.

headless-cms-negroni-3

… und warum es sich nur richtig anfühlt, diese dann auf Vercel zu hosten

Vercel ist eine Serverless-Hosting-Plattform und die treibende Kraft hinter der Entwicklung von Next.js. Somit bietet Vercel die perfekte Infrastruktur für Entwicklung und Betrieb von Next.js basierten Websites.

Neben Continuous Integration und einer nahtlosen Integration in git bietet Vercel noch eine Vielzahl weiterer Zuckerl: Edge Network, Storage-Lösungen für Serverless, Logging, Analytics und Monitoring, Speed Insights, und einiges mehr… dabei bauen sie auf die bewährte Infrastruktur von AWS auf.

Ende September ist Negroni Week, ein Tribut an einen der ikonischsten Cocktails der Welt. Dieser florentinische Barklassiker besteht aus drei einfachen Zutaten: Gin, süßem Wermut und Campari. Auch wir entwickeln unsere besten Ideen aus drei Zutaten. Wir empfehlen für maßgeschneiderte Web-Apps immer häufiger den Stack aus DatoCMS als Headless CMS, dem Framework Next.js und Vercel als Deployment-Plattform. Er bietet, im Vergleich zu klassischen monolithischen Systemen, eine Vielzahl an Vorteilen für Anwender:innen vor und hinter den Screens. ❤️

headless-cms-negroni-4

Beginnen Sie noch heute mit Ihrer dynamischen Headless-CMS Website.

Unser erfahrenes Team unterstützt Sie auf Ihrem Weg und sorgt für einen reibungslosen und nachhaltigen Entwicklungsprozess.

E-Mail:
hello@peerigon.com
Telefon: