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

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.

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…

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.

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. ❤️

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.

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. ❤️