Headless CMS

01.03.2024

Autor: Khoa Nguyen

Im Zeitalter der digitalen Transformation müssen Unternehmen auf rasante Veränderungen in der Art und Weise der Kommunikation mit ihren Kunden reagieren können. Die Interaktionen mit Kunden finden heute über verschiedene Kanäle wie Apps, Webseiten, Digital Signage, Newsletter und andere Medien statt. In dieser hochvernetzten Welt ist es entscheidend, dass Unternehmen Werkzeuge nutzen, die eine reibungslose Multichannel-Kommunikation ermöglichen. Eine mögliche Lösung für dieses Problem bietet ein Headless Content Management System (CMS).

In diesem Blogbeitrag erläutern wir, was ein Headless CMS ist, diskutieren seine Vor- und Nachteile und teilen unsere Erfahrungen bei jls in der Umsetzung anspruchsvoller Headless-Projekte. Der Fokus dieses Beitrags liegt auf den wesentlichen Fakten und Argumenten für den Einsatz eines Headless CMS. Eine ausführliche Behandlung aller Aspekte würde den Rahmen dieses Artikels sprengen.

Im Kontext von Content Management Systemen (CMS) wird der Präsentationslayer oft als der «Kopf» (Head) bezeichnet, während die reine Content-Verwaltung im Backend als der «Körper» (Body) fungiert. Ein Headless CMS unterscheidet sich von herkömmlichen CMS, da es den Inhalt und seine Präsentation strikt voneinander trennt.

Diese Architekturentscheidung bedeutet, dass ein Headless CMS den Schwerpunkt auf die Verwaltung von Inhalten legt und diese über eine Schnittstelle (in der Regel eine REST API) bereitstellt, sodass verschiedene «Köpfe» (Frontends) wie Webseiten oder Apps auf diese Informationen zugreifen können. Im Gegensatz dazu wird bei traditionellen CMS die Präsentation der Inhalte direkt im CMS entwickelt und zusätzlicher Aufwand ist erforderlich, um Inhalte über eine separate API für andere Frontends verfügbar zu machen.

In der Regel nicht. Ein professionelles CMS bietet neben der API eine Vielzahl wichtiger Kernfunktionalitäten. Dazu gehören Funktionen wie redaktionelle Inhaltsverfassung (mit Pagebuildern, WYSIWYG-Editoren, Vorschau), Publikationsworkflows, zeitgesteuerte Veröffentlichungen, Kundensegmentierung für personalisierte Inhalte, A/B-Tests und vieles mehr.

Ein Headless CMS bietet eine Vielzahl von Vorteilen. Im Folgenden werden die wichtigsten Vorteile kurz erläutert.

• Multichannel Kommunikation: Kunden konsumieren Inhalte auf verschiedenen Kanälen wie Apps und verschiedene Webseiten. Mit einem Headless CMS kann der gleiche Inhalt über die Delivery API auf die verschiedenen Kanäle verteilt werden.

• Flexibilität in der Gestaltung des Frontends: In der Umsetzung des Frontends können die Entwickler:innen die gewünschte Technologie einsetzen, dass den Kunden die beste Experience bietet. Mit einem Headless CMS sind die Entwickler:innen nicht mehr an die Frontend Technologie des CMS gebunden.

• Schnellere Time-to-Market: Durch die Entkopplung von Frontend und Backend kann die Entwicklung parallel und unabhängig durchgeführt werden.

• Zeit- und Kostenersparnis: Dadurch, dass die Inhalte für die Multichannel Kommunikation an einem einzigen Ort erfasst sind, führt diese Wiederverwendbarkeit von Inhalten über verschiedene Kanäle zu einem massgeblichen Zeit- und Kostenersparnis.

• Einfache Skalierbarkeit und Leistungsoptimierung: Durch die Entkopplung des Frontends und Backend können alle Komponenten unabhängig voneinander skaliert werden. Die verschiedene Kanäle können zudem spezifisch auf die Endgeräte optimiert werden für schnellere Ladezeiten und besseren Benutzererfahrungen.

Obwohl ein Headless CMS viele Vorteile bietet, gibt es auch einige wichtige Nachteile, die in Betracht gezogen werden sollten, bevor man sich einen Headless CMS Ansatz entscheidet:

• Entwicklungskomplexität: Bei einem traditionellen CMS ist die Architektur, Technologie und Vorgehensweise in der Entwicklung bereits durchdacht und somit vorgegeben. Bei einem Headless CMS muss ein massgeschneidertes Frontendkonzept ausgearbeitet werden. Dies erfordert mehrere erfahrene Entwickler:innen, welche Experten in der CMS und Frontend Technologie sind.

• Redaktionelle Inhaltserfassung: Traditionelle CMS bieten Echtzeit Inhaltserfassung mit Page Builder Funkalität (Drag und Drop von UI Komponenten) und WYSIWYG- Editoren an. Mit einem Headless CMS ist dies selten möglich, da die Frontends separat und unabhängig entwicklet werden.

• Abhängigkeit von Entwickler:innen: Komplexe Frontend-Frameworks erfordern, dass Entwickler:innen für Änderungen am System hinzugezogen werden, im Gegensatz zu herkömmlichen CMS, bei denen einfache Anpassungen von Nicht-Entwickler:innen durchgeführt werden können.

• SEO-Komplexität: Headless CMS erfordern zusätzliche Massnahmen, um SEO-freundliche Webseiten zu erstellen, insbesondere wenn JavaScript-Frameworks wie Angular verwendet werden. Dies führt zu der Einführung weiterer Komponenten und erhöht die Komplexität der Lösung.

• Zusätzliche Kosten und Ressourcen: Durch die Entkopplung vom Frontend zu seinem CMS, muss dieser Teil separat entwickelt und betrieben werden. Die führt dazu, dass mit zusätzlichen Betriebskosten für den Betrieb der zusätlichen Komponenten und deren Skalierung, Optimierung, Überwachung und Wartung gerechnet werden muss.

Wir setzen verschiedene Plattformen für unsere Headless CMS-Lösungen ein, abhängig von den Anforderungen des Projekts. Für die reine Inhaltserfassung für Apps nutzen wir Cloud-basierte Lösungen wie DatoCMS während wir bei komplexeren Projekten auf das Enterprise CMS Magnolia zurückgreifen.

Gängige Anforderungen an ein Headless Content Management System, die uns dazu bewegen, das Enterprise CMS Magnolia zu verwenden, sind:
 

• Redaktionelle Inhaltserfassung und Vorschau: Die Möglichkeit, Inhalte einfach zu erstellen und direkt in einer Vorschau anzusehen (WYSIWYG - What You See Is What You Get).
   

• SEO-Optimierung: Die Fähigkeit, Inhalte so zu gestalten, dass sie für Suchmaschinen optimal sind und eine bessere Auffindbarkeit gewährleisten.
   

• Personalisierung: Die Möglichkeit, Inhalte an die Eigenschaften der Besucher:innen anzupassen, um individuellere Erfahrungen zu schaffen.
   

• Sicherheit: Ein hohes Mass an Sicherheit, um sensible Daten und den Schutz der Plattform zu gewährleisten.
   

• Integration von Drittsystemen: Die Fähigkeit, nahtlos mit anderen Systemen zu interagieren und Daten aus verschiedenen Quellen zu integrieren.
   

• Flexibilität und Erweiterbarkeit des Backends: Ein flexibles Backend, das anpassungsfähig ist und die Integration neuer Funktionen oder Erweiterungen ermöglicht.

Magnolia gehört zu den etablierten Herstellern von Enterprise CMS. Magnolia ist ein Hybrid-CMS, das sowohl mit als auch ohne «Head» verwendet werden kann. Dies bietet den Vorteil, dass du alle Vorteile der CMS-Welt mit einer einzigen Plattform nutzen kannst.

Magnolia unterstützt als Headless CMS Funktionen wie das Erstellen von Webseiten im Pagebuilder per Drag-and-Drop, das Erfassen von Inhalten mit WYSIWYG-Editoren, eine Live-Vorschau der Inhalte und die Personalisierung mithilfe von so genannten Kundentraits. Dies sind Funktionen, die nur wenige andere Headless CMS bieten. Weiter können die Frontend Entwickler:innen alle erfassten Inhalte über die automatisch generierte Content Delivery API beziehen.

Magnolia bietet auch für verschiedene bekannte Frameworks wie Angular, Vue und React durch spezielle Entwicklungs Add-Ons, sodass trotz des Headless Ansatzes mit wenig Aufwand im Frontend die Inhalte aus dem CMS geladen werden können.

Um die SEO-Freundlichkeit einer mit einem Headless CMS entwickelten Website sicherzustellen, setzen wir das Framework NuxtJS ein. Mit NuxtJS können wir eine mit VueJS erstellte Webseite serverseitig rendern, was von Suchmaschinen bevorzugt wird.

Magnolia positioniert sich als Content Hub mit einfachen Integrationsmöglichkeiten. Diese Eigenschaften sind bemerkbar, sobald im Projekt auch weitere Daten aus verschiedenen Umsystemen wie CRM, E-Commerce und DAM integeriert werden müssen. Denn Magnolia ist ein bewährtes Enterprise CMS und stellt eine Vielzahl von Konnektoren bereit, dass die Integration von Umsystemen massgeblich beschleunigt.

Ein Headless CMS ermöglicht den freien Einsatz einer beliebigen Frontendtechnologie für den Präsenationslayer und eine einheitliche Multichannel Kommunikation. Der Einsatz eines Headless CMS hat zwar diverse Vorteile, aber bringt auch Komplexität und diverse zusätzliche Abhängigkeiten mit sich. Bei jls werden anspruchsvolle Headless Projekte mit Magnolia und NuxtJS umgesetzt, denn diese Kombination bietet mehrere massgebliche Vorteile wie die geschätzte redaktionelle  Inhaltserfassung wie bei einem traditionellen CMS, SEO Optimierung, Personalisierung in der Inhaltsausspielung, Integration von Drittsystemen und Flexiblität in der Umsetzung der Backendfunktionaliäten.