November 2023

CMS – Headless ist das Gegenteil von kopflos

Ein AI-generiertes Teaserbild mit dem Prompt: a minimalistic colorful cartoon character that looks like an it-expert with no head.

Wohl überlegt, setzen wir seit geraumer Zeit unsere Development-Projekte gerne Headless um. Aber was genau bedeutet das überhaupt?

Ein Headless CMS ist ein Content-Management-System, das sich von der traditionellen Struktur unterscheidet, indem es auf die Trennung von Backend und Frontend setzt. Im Gegensatz zu herkömmlichen CMS bietet es keine vorgefertigten Frontend-Vorlagen, sondern stellt nur die Backend-Funktionalitäten bereit. Dies ermöglicht eine höhere Flexibilität, da Entwickler ihre eigenen Frontend-Anwendungen nutzen können, unabhängig von der Content-Verwaltung. Die Inhalte werden über APIs bereitgestellt, was die Integration in verschiedene Plattformen und Geräte erleichtert. Diese Architektur ermöglicht es, Inhalte dynamisch und schnell auf unterschiedlichen Kanälen zu präsentieren.

Hier die Vorteile aus unserer Sicht im Detail:

  • Flexibilität und Innovation: Die Entkopplung des Frontends vom Backend ermöglicht eine unabhängige Entwicklung. Wir können im Frontend innovativ sein, ohne durch die Einschränkungen eines herkömmlichen CMS eingeschränkt zu sein.

  • Verbesserte Leistung: Ein Headless CMS reduziert die Ladezeit, indem es Entwickler:innen ermöglicht, das Frontend separat zu optimieren. Dies kann zu schnelleren Websites, einem besseren Benutzererlebnis und besserem Ranking in Suchmaschinen führen.

  • Plattformübergreifende Kompatibilität: Mit APIs für die Bereitstellung von Inhalten wird es einfacher, Inhalte über verschiedene Plattformen wie Web, mobile Apps, IoT-Geräte usw. zu verteilen und dabei Konsistenz und Kohärenz zu wahren.

  • Skalierbarkeit: Die Trennung der Inhaltsschicht von der Präsentationsschicht ermöglicht eine einfachere Skalierung. Wenn der Datenverkehr wächst, können wir entweder die Frontend- oder die Backend-Komponenten unabhängig voneinander skalieren.

  • Erhöhte Sicherheit: Durch die Entkopplung der Präsentationsschicht verringern wir potenziell die Angriffsfläche für Hacker:innen. Der Schwerpunkt kann auf der Sicherung der API-Endpunkte und Backend-Systeme liegen. Gerade bei einem Open Source CMS (z. B. WordPress, Drupal oder Typo3) sinnvoll, da die große Verbreitung den Angriff für Hacker:innen attraktiv macht.

  • Wiederverwendbarkeit von Inhalten: Die Inhalte können über mehrere Plattformen hinweg wiederverwendet werden, ohne dass Änderungen erforderlich sind. Dies fördert die Konsistenz und spart Zeit. (z. B. App, Screens in den Veranstaltungsorten, diverse Websites und Microsites)

  • Zukunftssicherheit: Die Headless-Architektur erleichtert die Einführung neuer Technologien und Frameworks. Ihr könnt Teile des Systems austauschen oder aktualisieren, ohne dass sich dies auf das gesamte System auswirkt. Das betrifft auch den nächsten Relaunch, bei dem das Backend bestehen bleiben kann und »einfach nur« das Frontend mit einem neuen Layout geändert wird.

  • Spezialisiertes Tooling: Die Entwickler:innen können für jeden Teil des Stacks die besten Tools auswählen. Sie können zum Beispiel spezielle Frameworks oder Bibliotheken verwenden, die für die Front-End-Entwicklung optimiert sind, ohne an die Zwänge eines monolithischen CMS gebunden zu sein. Das betrifft auch andere Systeme, aus denen Inhalte ins Frontend gespielt werden, z. B. ein CRM für Formulare, ein Shop für den Ticketverkauf, ein DAM für Download-Dokumente und Bilder, etc.

Es ist wichtig zu bedenken, dass die Umstellung auf ein Headless-System auch einige Herausforderungen mit sich bringt. Die potenziell höhere Komplexität bei der Verwaltung mehrerer Systeme (siehe letzter Punkt oben, CRM, CMS, DAM, etc.), die Notwendigkeit von mehr technischem Fachwissen (das wir aber mitbringen) und die potenziell höheren anfänglichen Entwicklungskosten im Vergleich zu herkömmlichen CMS-Konfigurationen. 

Das Frontend selbst bauen wir aktuell gerne mit VUE.JS. Dabei handelt es sich um ein modernes und »leichtgewichtiges« Framework zum Entwickeln grafischer Oberflächen für Webanwendungen. Das Javascript Setup lässt sich einfach BITV-kompatibel (barrierefrei) einsetzen und hat sich hinsichtlich Performance und Responsivität in unseren Projekten sehr bewährt. 

Unser aktueller Favorit bezüglich Headless ist übrigens Strapio.io. 

PS: Das etwas hilflose Teaserbild wurde von DALL-E generiert, mit dem Prompt: »a minimalistic colorful cartoon character that looks like an it-expert with no head.« Nun denn.

Auch interessant