Wie Headless CMS funktioniert und wofür du es einsetzt

Du möchtest Content zentral an einer Stelle pflegen und bequem über mehrere Channel wie Apps, Websites, Online Shops oder andere POS Medien ausspielen? Klassische CMS Lösungen wie TYPO3 oder WordPress stoßen hier an ihre Grenzen. Wie Headless-Systeme dieses Problem lösen und wann ein Umstieg Sinn machen kann, liest du in diesem Artikel.

Was ist ein Headless CMS – Das Prinzip dahinter

Stell dir vor, du willst Content nicht nur auf einer Website, sondern auch auf Apps, in einem Webshop oder auf digitalen Displays am Point of Sale ausspielen, im Sinne eines Omnichannel-Marketings. Dabei möchtest du natürlich nicht die Inhalte für jeden Kanal einzeln pflegen. Die Lösung hierfür bieten Headless-Systeme wie beispielsweise Storyblok.

Im Vergleich zu klassischen Content-Management-Systemen wie WordPress verzichten sie auf die Verzahnung von Front- und Backend. Als Backend bezeichnet man den Verwaltungsbereich, in dem dein Content eingepflegt wird. Das Frontend wiederum ist der Bereich, den Nutzende sehen, wenn sie deine Seite im Browser aufrufen. Beide Teile sind bei klassischen Content-Management-Systemen untrennbar verbunden. Genau das ist bei einem Headless CMS nicht der Fall.

Das Frontend, also der „Head“, wird bei Headless-Systemen vom Backend getrennt. Dein Inhalt wird nach wie vor in einem Verwaltungsbereich gepflegt. Die Präsentationsebene wird jedoch völlig unabhängig von dieser Verwaltungs-/Contentebene. Du kannst dir das Backend bei Headless-Systemen also als eine Art “Content-Speicher” vorstellen, der verschiedene Frontends speisen kann. Die Schnittstelle zwischen beiden Ebenen bildet eine sogenannte API.

Durch diese Trennung gewinnst du an Freiheit und Flexibilität. Ohne die Sorge, dass es sich negativ auf dein Frontend auswirkt, kannst du so verschiedene Technologien kombinieren. Zudem muss Content nur einmal gepflegt werden, kann aber auf einer beliebigen Zahl von Kanälen ausgespielt werden. Klingt kompliziert? Keine Sorge, im folgenden Abschnitt gehen wir im Detail auf einzelne Komponenten und Funktionen eines Headless CMS ein.

Bestandteile und Funktionen eines Headless CMS

Frontend, Backend, API: Ganz schön viele Fachwörter. Aber kein Grund, wie das CMS den Kopf zu verlieren. Schauen wir uns die wichtigsten Komponenten eines Headless CMS genauer an.

Headless CMS API: Schnittstelle als Dreh- und Angelpunkt

Wie bereits erwähnt, nutzen Headless-Content-Management-Systeme sogenannte API-Schnittstellen. Die Abkürzung steht hier für “Application Programming Interface”. Im Grunde handelt es sich dabei um Programmierschnittstellen. Diese ermöglichen es verschiedenen Anwendungen, miteinander zu kommunizieren und Daten auszutauschen, ohne untrennbar verbunden zu sein. Im Fall eines Headless CMS ermöglicht die API dem Frontend, Daten im Backend anzufragen. Wie diese Kommunikation im Detail abläuft, kann variieren. Die Ausgabe der Daten erfolgt in der Regel im standardisierten Datenformat JSON (Javascript Object Notation). Je nachdem, ob es sich beispielsweise um eine Restful-API oder GraphQL-API handelt, gibt es hier Unterschiede, was die Art der Anfrage und die ausgegebenen Daten betrifft. Näheres hierzu findest du in unserem Artikel zum Thema REST-API.

Frontends und Frameworks

Das Frontend ist, wie bereits erwähnt, der Teil des Ganzen, der dem Nutzenden ausgespielt wird. Häufig wird hierfür mit sogenannten Frontend-Frameworks gearbeitet. Diese kannst du dir wie eine Art Werkzeugkasten vorstellen. Sie geben Entwickler:innen Funktionen und Strukturen an die Hand, um daraus Benutzeroberflächen zu gestalten. Der Vorteil dabei ist, dass diese nicht von Grund auf neu programmiert werden müssen. Die Basis hierfür bildet meist die Programmiersprache Javascript. Am verbreitetsten sind daher Frameworks wie beispielsweise React.js, Vue.js und Angular.js.

Im Gegensatz zu einem klassischen CMS bietet dir ein Headless CMS allerdings kein festgelegtes Frontend. Genau hierin liegt der Vorteil. Unabhängig von deinem Content hast du die Möglichkeit, dein Frontend und somit auch die Benutzeroberfläche flexibel anzupassen. Eine Smartwatch hat andere Anforderungen als eine Website, eine App oder ein Smartspeaker. Durch die Headless-Architektur stellst du sicher, dass deine Inhalte immer so präsentiert werden, wie es der jeweilige Kanal erfordert.

Das Backend als Content Hub

Einfach ausgedrückt ist das Backend der Content-Speicher eines Headless CMS. Hier werden deine Inhalte angelegt, bearbeitet, verwaltet und strukturiert gespeichert. Genau wie bei einem klassischen Content-Management-System hast du auch hier die Möglichkeit, verschiedene Benutzende mit unterschiedlichen Berechtigungen und Zugriffsrechten anzulegen. Zudem bieten viele Headless Content Management Systeme die Option, die Benutzeroberfläche des Backend nach deinen Wünschen und Bedürfnissen anzupassen. Einmal aufgesetzt hast du so genau die Funktionen, die du brauchst, ohne unnötigen Ballast. Eine spätere Erweiterung ist aber trotzdem möglich.

Microservices

In einer Headless-Architektur bieten sogenannte Microservices vielfältige Möglichkeiten, dein CMS zu personalisieren und um Funktionen zu erweitern. Wie deine Frontends nutzen Microservices die API, um mit anderen Komponenten zu kommunizieren. Microservices bezeichnen im Headless-Kontext Softwarelösungen, welche für einen bestimmten Prozess innerhalb der Architektur zuständig sind. Aus Anwendersicht bist du hier höchst flexibel und kannst, je nachdem wie sich deine Anforderungen gestalten oder verändern, einzelne Services jederzeit austauschen.

Die Palette an Microservices ist hier denkbar vielfältig. Du möchtest, dass aktuelle Lagerbestände direkt im Webshop zu sehen sind? Die Integration eines Produktinformationsmanagement (PIM) macht das möglich. Kreditkartenzahlungen für In-App-Käufe, Übersetzungstools, die Integration eines Customer-Relationship-Management-Tools oder die Einbindung von Wetterdaten? Auch hierfür bieten Microservices Lösungen.

Wie der Content zum Nutzenden kommt

Um die Kommunikation zwischen Backend und Frontend ein bisschen greifbarer zu machen, gehen wir nun beispielhaft den Prozess durch, der stattfindet, wenn deine Seite aufgerufen wird:

1. Ein User ruft über den Browser auf seinem Smartphone beispielsweise die Website eines Unternehmens auf.
2. Das Frontend sendet nun eine Anfrage an die Headless CMS API mit der Bitte um die benötigten Inhalte.
3. Die API kommuniziert mit dem Backend und fragt die dort gespeicherten Daten an. Im Anschluss gibt sie die Daten im JSON Format an das Frontend weiter. Je nachdem, welche Daten im Backend gespeichert sind, kann es sich hierbei um Bilder, Videos, Text oder andere Inhalte handeln.
4. Abhängig vom verwendeten Frontend-Framework werden die JSON Daten nun auf entsprechende Weise verarbeitet und gerendert. Im Fall der Website werden HTML- und CSS-Code aus den Daten erzeugt.
5. Schließlich wird dem Nutzenden die gewünschte Seite angezeigt.

Vorteile und Nachteile eines Headless CMS

Nun solltest du schon einen kleinen Überblick haben, welche Vor- und Nachteile sich aus der Arbeit mit einem Headless CMS ergeben. Hier findest du sie im Detail.

Headless CMS Vorteile

1. Content First
   Headless CMS greift den Content First Ansatz ideal auf. Präsentation und Inhalt sind voneinander getrennt und wie sich bereits erahnen lässt, steht Letzteres im Mittelpunkt. Der Fokus liegt auf deinem Content und dem Informationsbedürfnis der Nutzenden. Die Präsentation passt sich im Nachgang daran an, nicht umgekehrt.
2. Unterschiedliche Frontends nutzbar
   Die Zeiten, in denen Inhalte nur über Websites an einem Desktop aufgerufen wurden, sind lange vorbei. Ein Großteil des Traffics weltweit läuft mittlerweile über das mobile Endgerät – Stichwort Mobile First. Aber das ist nicht alles. Immer mehr Devices, über die wir Inhalte konsumieren, kommen hinzu. Vom Smart-TV über Apps bis hin zum Internet of Things. Deinen Content für alle diese Kanäle zentral an einer Stelle zu pflegen ist nicht nur bequemer, sondern auch deutlich zukunftsorientierter. Egal, welcher digitale Kanal künftig hinzukommt – mit einem Headless CMS ist er einfach bespielbar.
3. Flexiblere Gestaltung
   Ein großer Vorteil von Headless CMS ist die maximale Flexibilität. Das trifft sowohl auf das Backend als auch auf das Frontend zu. Du kannst beide genau nach deinen Bedürfnissen anpassen. Nutze die Funktionen und Darstellungsformen, die du brauchst, nicht mehr und nicht weniger. Das führt uns direkt zum nächsten Punkt.
4. Code-Overhead und Performance
   Ist dein Headless CMS einmal richtig aufgesetzt, gibt es weniger unnötigen Codeballast für nicht genutzte Funktionen, die bei klassischen CMS per default vorhanden sind. Jede Komponente des Systems enthält nur den Code, den sie für ihre Funktion benötigt. Diese schlanke Codebasis führt zu einer einfacheren Wartung und einer geringeren Fehleranfälligkeit. Dadurch schneidet auch die Performance eines Headless CMS besser ab als bei klassischen Systemen. Zudem bieten die verwendeten APIs die Möglichkeit, Datenabfragen so zu strukturieren, dass lediglich die Daten angefragt werden, die wirklich benötigt werden.
5. Sicherheit
   Durch die Trennung von Back- und Frontend bietet ein Headless CMS zudem einen Sicherheitsvorteil. Wird beispielsweise eines deiner verwendeten Frontends angegriffen, bleibt das Backend in der Regel hiervon unberührt.

Headless CMS Nachteile

1. Umständlicher Einstieg
   Im Vergleich zu einem klassischen Content-Management-System kann sich der Einstieg in ein Headless System schwieriger gestalten. Der Aufbau des Systems ist komplexer. Technisch weniger affine Nutzende können sich hiermit möglicherweise schwertun. Allerdings hängt die Benutzerfreundlichkeit des Systems auch in großen Teilen davon ab, wie das Backend gestaltet wird und welche Funktionen integriert werden.
2. Aufwendiges Setup
   Der Aufwand, das System aufzusetzen, ist größer als bei klassischen Anbietern wie WordPress oder TYPO3. Hier ist ein Headless CMS im Nachteil. Das liegt unter anderem daran, dass die benötigten Frontends erst noch erstellt werden müssen und nicht direkt Teil des Ganzen sind. Hierfür sind Ressourcen und tiefer gehendes technisches Know-how der Entwickler:innen nötig.
3. Kosten
   Zum einen ist durch das aufwendigere Setup mit höheren Entwicklungskosten zu rechnen. Zum anderen werden Headless-Content-Management-Systeme häufig als lizenzpflichtige Softwares-as-a-Service angeboten. Die Gebühren sind hier meist gestaffelt und variieren je nach Anzahl der Nutzenden, dem zur Verfügung stehenden Speicherplatz und anderen Services.

   Für kleinere Unternehmen kann hier mit monatlichen Kosten zwischen 100 und 300 Euro in der Basis gerechnet werden. Bei steigenden Anforderungen und größeren Projekten können die Kosten deutlich höher ausfallen. Der Anbieter Storyblok veranschlagt beispielsweise knapp 3000 Euro für sein “Enterprise” Paket. Zielgruppe sind hier Großunternehmen und Konzerne mit entsprechenden Anforderungen an ein CMS.
   Ähnlich wie im Fall von WordPress gibt es aber auch kostenlose Open Source Lösungen für Headless-Content-Management-Systeme, natürlich mit Abstrichen bei Service und Support seitens des Anbieters.

4. Vorschau der Inhalte
   Beitrag speichern, Vorschau öffnen – so kennt man es beispielsweise von WordPress. Um zu sehen, wie Inhalte letztlich auf einer Website oder in einer App dargestellt werden, muss solch eine Funktion oft erst eigenhändig erstellt werden. Hierfür braucht es technisches Know-how und entsprechende Ressourcen. Möglich ist die Vorschau aber auch bei Headless-Systemen.

Headless CMS vs. klassisches CMS

Nach dieser Headless CMS Erklärung solltest du ein Bild davon haben, was sich hinter dem Begriff verbirgt. Aber wann sollte man zu der „kopflosen“, wann zu der „klassischen“ CMS-Variante greifen? Die technischen Unterschiede zwischen beiden Systemvarianten führen dazu, dass sich diese stark in den Bereichen Flexibilität, Skalierbarkeit und Benutzerfreundlichkeit unterscheiden. Klassische CMS-Systeme wie WordPress sind oft nutzerfreundlicher, gerade für weniger technikaffine Anwender. Integrierte Themes und Vorlagen, eine WYSIWYG (What You See Is What You Get) Bearbeitungsoberfläche und eine intuitive Bedienung sind hier klare Stärken.

Allerdings stoßen diese Systeme in Bezug auf die Gestaltung und Skalierbarkeit teils an ihre Grenzen. Sie erfüllen nicht immer alle Anforderungen für komplexe Multichannel-Webanwendungen. Hier bietet ein Headless CMS Vorteile. Durch die Verwendung einer API erhältst du maximale Flexibilität und Skalierbarkeit und kannst das CMS mit jedem beliebigen Frontend-System kombinieren. Dadurch ergeben sich Möglichkeiten für plattformübergreifende und stark personalisierte Nutzererfahrungen. Aber auch ein Headless CMS hat Nachteile. Für das Setup des Systems sind mehr technisches Know-how und Ressourcen nötig. Zudem fallen für Headless CMS-Lösungen häufig Lizenzgebühren an, während viele klassische Content-Management-Systeme auf Open-Source-Lösungen basieren. Welche Lösung letztlich die beste für das eigene Contentprojekt ist, muss demnach im Einzelfall abgewägt werden.

Ein Kompromiss: WordPress und TYPO3 als Decoupled CMS

WordPress oder TYPO3 bieten dir im Grunde genommen eine Komplettlösung für die Umsetzung von Blogs und Websites. Backend und Frontend sind hier, wie erwähnt, untrennbar verbunden. Daraus entstehen Nachteile wie eine sinkende Performance bei steigendem Umfang, limitierte Gestaltungsmöglichkeiten und eben eine feste Fixierung auf ein Frontend. Aber natürlich haben die beiden beliebten Systeme auch unverkennbare Vorteile. Also was ist, wenn du aus guten Gründen unbedingt mit dem Backend von WordPress oder TYPO3 arbeiten möchtest? Sie als Decoupled CMS zu nutzen, bietet hierfür eine Lösung.

Zur Kommunikation mit unterschiedlichen Frontends wird dann ebenfalls eine API-Schnittstelle eingeschoben. Mithilfe der REST-API hast du die Möglichkeit, WordPress flexibler mit diversen Frontend-Frameworks wie Angular, vue.js oder React zu nutzen. Sie erweitert WordPress um eine Schnittstelle, durch die es möglich wird, verschiedene Kanäle aus einem Backend heraus zu spielen. Wie das Ganze im Detail funktioniert, kannst du in unserem Artikel zum Thema “WordPress als Headless CMS” nachlesen. Ähnlich verhält es sich mit TYPO3. Hier hilft dir die Headless Extension dabei, das System um eine REST API zu erweitern. Unser TYPO3 vs. WordPress Artikel verrät dir zudem, wo Vor- und Nachteile beider CMS-Lösungen liegen.

Hybride CMS: Eine Alternative

Eine Alternative zu Headless CMS-Lösungen findet man bei sogenannten hybriden Content-Management-Systemen. Diese bieten dir zunächst von Haus aus Front- und Backend. Neben dieser Präsentationsschicht hast du jedoch zudem die Möglichkeit, das CMS über eine API-Schnittstelle zu erweitern. Der Ansatz versucht, die besten Eigenschaften der jeweiligen Lösungen miteinander zu verbinden. Beispiele hierfür sind Anbieter wie Kentico Kontent, Magnolia oder Drupal. Welche Vor- und Nachteile daraus entstehen, erfährst du im Folgenden.

Vorteile Hybrides CMS

1. Erweiterbarkeit
   Durch vorhandene API Schnittstellen bietet dir ein hybrides CMS ebenso wie sein Headless-Pendant die Möglichkeit, flexibel um Funktionen und Frontends zu erweitern.
2. Vorschau Möglichkeiten
   Im Gegensatz zu einem reinen Headless CMS verfügen hybride Lösungen häufig von Haus aus über die Möglichkeit einer Live-Vorschau. Diese muss also nicht erst eigenhändig entwickelt und implementiert werden.
3. Einstieg
   Der Einstieg kann sich für technisch weniger affine Nutzende einfacher gestalten. Gründe hierfür sind unter anderem die eben erwähnte Live-Vorschau oder bereits enthaltene WYSIWYG-Editoren.

Nachteile Hybrides CMS

1. Fehleranfälligkeit und Wartung
   Komplexere Funktionen und aufwendigere Architektur eines hybriden CMS bringen mehr Code mit sich, als es bei einem Headless CMS der Fall wäre. Dadurch kann eine höhere Anfälligkeit für Fehler und eventuelle Wartungsarbeiten entstehen.
2. Performance und Leistung
   Gleiches gilt für die Performance des Systems. Wenn es zusätzliche Funktionen für möglicherweise nicht benötigte Anwendungen gibt, kann die Performance hiervon in Mitleidenschaft gezogen werden.
3. Komplexität
   Aufgrund der Möglichkeit, das CMS flexibler anzupassen als ein klassisches Content-Management-System, ist die Architektur naturgemäß komplexer. Hierdurch kann es zu einem höheren Entwicklungsaufwand und dadurch steigenden Kosten kommen.

Wann ein Headless CMS für dich Sinn macht

Nun weißt du, wie ein Headless CMS funktioniert und welche Vor- und Nachteile es mit sich bringt sowie welche Alternativen es gibt. Aber wann kommt ein Wechsel auf ein Headless-System in Frage? Kannst du die folgenden Punkte für dich mit “Ja” beantworten, macht es Sinn, in Zukunft auf ein Headless-Content-Management-System zu setzen.

1. Du suchst ein zukunftssicheres CMS?
   Dein CMS soll in der Lage sein, technische Neuerungen flexibel einzubinden und zukünftige Entwicklungen problemlos mitzugehen? Mit einem Headless CMS bist du hier auf der sicheren Seite – und das ohne technische Beschränkungen, die ein klassisches CMS mit sich bringen kann.
2. Du möchtest mehrere Kanäle bespielen?
   Du möchtest Content auf mehreren Kanälen wie Apps, Websites oder Smart-Devices ausspielen, ohne diese an zig verschiedenen Stellen zu pflegen? Genau hierfür wurden Headless CMS entwickelt. Pflege und verwalte deinen Content zentral und spiele ihn stets am richtigen Ort in der richtigen Form aus.
3. Dein Unternehmen wächst stetig?
   Du stehst vor den Herausforderungen schnellen Wachstums? Durch seinen Aufbau bieten Headless CMS Systeme die ideale Architektur, um mit schnell wachsenden Nutzerzahlen und komplexer werdenden Contentprojekten klarzukommen. Es lässt sich flexibel erweitern und an hinzukommende Bedürfnisse, wachsenden Traffic und gestiegene Anforderungen anpassen.
4. Du legst Wert auf Performance?
   Du möchtest schnelle Ladezeiten trotz großer Datenmengen? Leichtgewichtige Frontends, effizientere Kommunikation über APIs und die Trennung von Back- und Frontend machen Headless-Content-Management-Systeme zu einer performanten Lösung.
5. Sicherheit hat Priorität?
   Durch seine Architektur verringert ein Headless CMS die Angriffsfläche für potenzielle Gefährder. Bei einem Angriff auf eines der Frontends besteht kein Zugriff auf die im Backend befindlichen Daten. Zudem kommt es nicht zu einem Komplettausfall, sollte eines von mehreren Frontends Opfer eines Cyber-Angriffs werden.

Headless CMS von Storyblok – Ein Überblick

Ein Headless System, mit dem wir als Agentur gute Erfahrungen gemacht haben, ist Storyblok. Das aus Österreich stammende Unternehmen wurde 2017 gegründet und zählt einige namhafte Global Player wie Telekom, Adidas oder Netflix zu seinen Anwendern. Neben den erwähnten Vorteilen, die ein Headless Content-Management-System mit sich bringt, überzeugt Storyblok mit den folgenden Punkten.

1. Datensicherheit
   Der Software as a Service Anbieter speichert die Daten auf Servern innerhalb der EU und ist damit DSGVO-konform.
2. Live Vorschau
   Im Gegensatz zu vielen Mitbewerbern bietet Storyblok von Haus aus einen Visual Editor. Dieser ermöglicht Nutzenden eine Live-Vorschau während des Content-Pflege-Prozesses.
3. Wiederverwendbare Komponenten
   Storyblok bietet Nutzenden die Möglichkeit, Seiten mithilfe wiederverwendbarer Komponenten zu erstellen. Einmal angelegt, lassen sich Inhalte schnell auf verschiedenen Seiten und Plattformen ausspielen. Das vereinfacht die Contentpflege und spart Zeit.
4. Suchmaschinenoptimierung
   Neben der starken Performance und schnellen Ladezeiten bietet Storyblok auch Vorteile im Bereich SEO. Im Vergleich zu vielen anderen Headless CMS Lösungen bietet Storyblok bereits integrierte SEO-Features, welche beispielsweise die einfache Verwaltung von Meta Tags, Titles und Alt-Tags ermöglichen. Zudem lassen sich leicht XML-Sitemaps und Robots.txt-Dateien erstellen. Diese helfen dem Crawler der Suchmaschine bei der Navigation und ermöglichen so eine einfachere Indexierung der Seite.

Falls Storyblok für dich nach einer passenden Lösung klingt, beraten wir dich als Storyblok-Agentur gerne zu dem System im Kontext deines Website-Projekts.