TYPO3 als Headless CMS einsetzen

Ein Headless CMS ist ein Content-Management-System, bei dem die Inhalte für beliebige Ausgangskanäle in einem Backend verwaltet werden können. Ausgangskanäle können etwa eine Webseite oder ein Webshop sein aber auch interne Systeme oder beliebige Drittsysteme. Hier pflegen die Redakteure Texte, Bilder, Datenblätter usw. und strukturieren den Content. Das ist sozusagen die Datenquelle. Die Darstellung im Frontend ist nicht Teil des Content-Management-Systems.

Das bedeutet, dass Inhalte und deren Darstellung vollständig voneinander getrennt sind. Es gibt somit zwei Systeme, die getrennt voneinander betrachtet werden müssen:
das Backend = das Headless CMS, zur Verwaltung der Inhalte, sowie das Frontend, zur Darstellung der Daten, des User-Interfaces und des Designs.

Da Frontend und Backend in zwei Instanzen entkoppelt sind, müssen die beiden Komponenten Daten austauschen. Der Datenaustausch geschieht über eine Schnittstelle (API) meist über JSON-Daten, also Textdaten, die das Frontend dann zusammen mit dem Design in HTML zusammenführt und so ein Ergebnis in den Browser des Betrachters zaubert.

Das Frontend implementiert das Design und die Funktionalitäten, die dynamisch auf die Daten der Schnittstelle reagieren und entsprechende Content-Elemente anzeigen.

Vorteile:

• die Inhalte sind sehr flexibel verwendbar und können für eine Vielzahl von Ausgangskanälen gleichzeitig genutzt werden
• die Inhalte müssen nicht in mehreren Systemen für unterschiedliche Kanäle aktuell gehalten werden
• die Systeme sind skalierbar und können mit der wachsenden Nachfrage nach Inhalten mitwachsen
• Frontend und Backend können und sollten auf unterschiedlichen Servern laufen 
• Frontend und Backend können unabhängig voneinander ausgetauscht werden
• getrennte Server erhöhen die Performance und auch die Sicherheit, da das Backend komplett von der Außenwelt abgekoppelt sein kann

Nachteile:

• der initiale Aufwand ist höher als bei einem klassischen Ansatz
• personalisierte Inhalte sind aufwändig zu implementieren

Bei einem "traditionellen CMS" sind Inhalte, Layout/Design im selben System (CMS) angesiedelt.

Es gibt klassische CMS, die Optik und Content vermischen und dieses generierte Konstrukt fest in der Datenbank untrennbar hinterlegen oder als Dateien abspeichern. Ein Designrelaunch wird dann im Grunde zum echten Relaunch, weil Inhalte nicht getrennt von der grafischen Darstellung verfügbar sind. Das bedeutet: Zurück auf Los!

Ganz anders agiert hier TYPO3, im Übrigen schon immer.
Inhalte die der Redakteur im Backend verwaltet, sind schon seit jeher vollständig von der optischen Darstellung entkoppelt. TYPO3 trennt Frontend und Backend "by default". Die Daten liegen in der Datenbank als "reine Daten" vor. Das Frontend wird davon unabhängig gebaut und kann sich ändern, ohne das die Datenbasis sich ändert. Das ergibt Sinn! Natürlich gibt TYPO3 den Entwicklern zahlreiche Tools an die Hand, sodass die Verbindung von Backend und Frontend elegant vonstatten geht.

Im Grunde ist die Ausgabe einer Webseite als HTML aber nur eine Option, die in TYPO3 konfiguriert werden kann. Zugegeben, eine häufig verwendete Option. Ob TYPO3 nun HTML, XML oder JSON ausgibt, das ist lediglich ein Schalter, den es zu konfigurieren gilt. 

Eine Anekdote dazu:
Als wir vor fast zehn Jahren unsere erste App entwickelt haben, gab es die Herausforderung, dass der Kunde natürlich Inhalte innerhalb der App editieren will, ohne jedes Mal die App in den AppStores veröffentlichen zu müssen.

Kein Problem, bekommen wir hin. Die Lösung war, in das vom Kunden schon betriebene TYPO3 Inhalte für die App pflegbar zu machen. So konnte der Kunde je Inhalt entscheiden, ob dieser Inhalt über eine Schnittstelle der APP zur Verfügung gestellt und dementsprechend angezeigt werden soll.

Irgendwann später gab es dann den entsprechenden Begriff zu dem, was wir da umgesetzt haben: Headless. Die Ausgabe war JSON und die App hat diese Inhalte entsprechend verwendet. Das ist der Kern des Headless Konzepts. Auch heute noch.

TYPO3 lässt sich somit sehr gut als Headless CMS verwenden.

Das Frontend ist vollständig entkoppelt, aber was bedeutet das nun und wo liegen die Vorteile?

Im Grunde haben wir jetzt den Vorteil, ein beliebiges Frontend-Framework nutzen zu können, da die Komponenten ja "nur" miteinander sprechen müssen. Das erlaubt uns wie bereits erwähnt, das Frontend auch austauschen zu können. Wenn das Backend mehrere Kanäle bedient, können die unterschiedlichen Kanäle auch mit unterschiedlichen Frontend-Frameworks implementiert sein. 

Die populärsten Vertreter sind React, Vue und Angular, es gibt natürlich zahlreiche Weitere, ebenso Laufzeitumgebungen wie Next oder Nuxt, die weitere Funktionalitäten bereitstellen.

Die Auswahl des Frameworks ist somit maximal flexibel. Die Frameworks sind spezialisiert für genau diesen Zweck. Hinter React steht Facebook, hinter Angular Google. Man könnte jetzt meinen, das wäre ein entscheidener Vorteil, ja, es hat aus unserer Erfahrung allerdings auch einen entscheidenden Nachteil. Neue Versionen kommen sehr schnell, so schnell, das man kaum hinterher kommt. Ebenso ändert sich häufig auch Grundlegendes, sodass man sich genauso häufig mit dem Thema Update im Frontend beschäftigen muss. Zudem sind die beiden Schwergewichte und sind für komplexe Frontendapplikationen ausgelegt.

Das ist vermutlich mit ein Grund, warum Vue so beliebt ist. Vue ist leistungsfähig, performant, leichtgewichtig und kann mit den Anforderungen mitwachsen. Von der Taktung der Versionen zudem nicht so rasant, wie es bei den großen Vertretern der Fall ist. Es ist jünger als die bekannten Vertreter, aber nicht weniger leistungsfähig. Es wird weniger Struktur vorgegeben, ein Vorteil, erfordert aber auch mehr "Disziplin" bei der Entwicklung.

Wer den harten Weg wählt, baut alles selbst. Wie oben beschrieben kann TYPO3 JSON per Konfiguration ausgeben, trotzdem braucht es natürlich nicht nur eine Liste von Inhaltselementen, es braucht mehr. Beliebte und nützliche Extensions sollten out-of-the-box verwendbar sein, ohne jedes Mal alles selbst bauen und konfigurieren zu müssen. Zudem muss die Seitenstruktur zur Menügenerierung vorliegen. Mehrsprachigkeit muss abbildbar sein, wie sehe ich versteckte Seiten als Redakteur, was ist mit Workspaces und vieles Weitere mehr.

Genau hier setzt die Extension - EXT:headless - an, die diese Aufgabenstellungen bereits an vielen Stellen gelöst hat und einfach erweiterbar ist. Zusammen mit der Extension Headless ist der Bereich "Backend" bereits sehr gut gerüstet, um ein TYPO3 Projekt "Headless" effizient umzusetzen.

Für das Frontend existiert mit Nuxt-TYPO3 ein passendes Pendant dazu. Nuxt ist ein Vue Modul, das perfekt mit der Erweiterung EXT:headless zusammenarbeitet. Es ermöglicht Server-Side-Rendering, dynamische Routen, Frontend und Backend-Layouts (zur Vorschau im Backend), Mehrsprachigkeit, Integration der Meta-Tags-API, Support für alle Standard Content Elemente und verfügt über zahlreiche Default-Komponenten die das Zusammenspiel von Frontend und JSON TYPO3 spezifisch vereinfachen.

Wenn Sie mehrere Online-Plattformen oder Systeme mit einer Datenbasis betreiben wollen, dann ergibt ein zentrales System wie oben beschrieben Sinn. Wenn Sie schon eine TYPO3 Installation betreiben und weitere Plattformen mit Daten versorgen wollen, dann liegt ein Headless-Einsatz sozusagen auf der Hand. Die Umsetzung von Apps, mobilen Anwendungen oder Webseiten empfehlen ohnehin den Einsatz eines der oben beschriebenen Frameworks.

Planen Sie eine Webseite als Single-Page-Application oder Progressive Web App (PWA) mit maximaler Performance die auf Open-Source Komponenten basieren soll? Dann sollten Sie TYPO3 Headless mit in ihre Überlegungen aufnehmen. Präferieren Sie ein Headless-System in der Cloud mit Herstellersupport, dann ist Storyblok eine sehr gute Wahl.

In beiden Fällen können wir Sie unterstützen. Nehmen Sie gerne Kontakt zu uns auf.