Zusammengefasst
Mit der Nutzung von TYPO3 als Basis für ein Headless CMS nutzt LfdA ein am Markt durchgesetztes und sicheres Redaktionssystem. Durch den "Headless-Ansatz" wird die Entwicklung des Frontends vom CMS entkoppelt. Das führt zu einem effizienteren Umsetzungsprozess bei der Erstellung der Website. Die Backend-Entwickler sparen Zeit bei der Integration des Designs ins CMS. Änderungen des Designs oder Erweiterungen werden ebenso schneller umgesetzt.
Was ist ein Headless CMS
Bekannte Content Management Systeme wie TYPO3, Wordpress, Drupal oder Django besitzen Komponenten zum Aufbau (Struktur) der Website, für die Contentspeicherung von Text und Bilder und die Definition des späteren Aussehens der Internetseite. Ein Headless CMS lässt das Aussehen – also Schriftart, Farben, Größen, Abstände – weg. Damit entkoppeln sich die Struktur und die Inhalte vom späteren Erscheinungsbild.
Technisch gesehen ist ein klassisches CMS eine Software, die Inhalte und Aussehen in eine Datenbank schreibt, die Daten für Browser zugänglich macht: Die bereitgestellten Daten sind dabei als HTML-Datei für gängige Internetbrowser lesbar. Beim Headless CMS werden die Daten ebenso in eine Datenbank geschrieben, aber im Unterschied zum klassischen Ansatz über eine REST-API für unterschiedliche Anwendungsfälle bereitgestellt. Die Darstellung von Inhalten in einem klassischen Internetbrowser ist dabei nur ein Anwendungsfall. Andere Frontends könnten z.B. eine App, Displays in Geschäften oder eine andere Internetanwendung sein.
Beim Headless CMS steht der Content im Vordergrund und ist von der Gestaltung abgekoppelt. Dies erlaubt die Nutzung des Contents für unterschiedliche Einsatzzwecke.
TYPO3 als Headless CMS
Es gibt auf dem Markt eine Reihe von Headless CMS Systemen, einige davon sind Cloud-basiert, andere wiederum können "in der Cloud" oder auf lokalen Servern gehostet werden.
Nach einigen Tests haben wir uns im Labor für digitale Angelegenheiten für die Nutzung von TYPO3 als Autorenschnittstelle entschieden. TYPO3 selbst bietet keine API, also haben wir uns kurzerhand selbst eine programmiert. Mit dieser Lösung können Redakteure wie gewohnt auf das performante und gewohnte TYPO3 zugreifen. Die Gestaltung der Inhalte und deren Darstellung erfolgt aber komplett unabhängig vom TYPO3.
Besonderheit der Lösung von LfdA:
Die Single-Page-Application
Die gewünschte Frontendanwendung kann Bilder und Text einfach über die von uns geschaffene API darstellen. Die Darstellung im Frontend erfolgt zunächst über Nuxt.js, welches Serverseitig die angeforderte HTML-Seite generiert. In diesem ersten Schritt funktioniert noch alles fast wie gewohnt. Dann jedoch folgt der Prozess der sogenannten Hydration, bei dem aus einer statisch gerenderten HTML-Datei eine Single-Page-Application erzeugt wird. In der Folge werden die Inhalte direkt durch die Applikation über die API abgefragt.
Zum Verständnis anders herum erläutert: Unsere Lösung ist eine Website, welche mit Vue.js, JavaScript und HTML eine Art mobiles Programm ist, welches im Browser läuft und direkt die Inhalte über die API aus TYPO3 generiert. Das sogenannte Rendering, also die Umsetzung von Daten in die Darstellung erfolgt bei aktiviertem JavaScript direkt im Browser.
Die Vor- und Nachteile eines Headless CMS
Aufgrund der Vielfältigkeit der vorhandenen Lösungen im Markt gibt es nicht eine einheitliche Liste von Vorteilen und Nachteilen. So werden z.B. einige Headless CMS als Cloudlösung angeboten, was ein Vorteil sein kann – aber für viele Anwender auch als Nachteil gewertet werden würde.
Als der größte Kritikpunkt an Headless CMS Systemen wird häufig die "Abhängigkeit der Redakteure vom Frontend-Entwickler" genannt. Angeblich werden Redakteure durch die Nutzung eines Headless CMS unflexibler in der Darstellung des Content. Dieses Argument zählt sicher dann, wenn man als Redakteur gewohnt ist, Inhalte mit einem Wordpress-Editor wie Visual Composer oder vergleichbaren Lösungen zu gestalten. Sobald man aber mit stabileren CMS wie TYPO3, Drupal oder Django CMS und an größeren Websites wie z.B. großen Online-Magazinen mit mehreren Redakteuren arbeitet, gibt es die Gestaltungseinschränkungen für Redakteure ohnehin.
Vorteil im Arbeitsprozess:
Beschleunigte Erstellung der Website
Den Hauptvorteil eines Headless CMS sehen wir in der Entkopplung von "System" und "Gestaltung". Beim klassischen Prozess der Websitegestaltung folgt nach dem Design die Umsetzung des Designs in HTML und CSS und dann die Integration dieser Elemente in das CMS – also die Integration des Designs als Designtemplate. Genau dieser letzte Schritt fällt beim Headless CMS weg. Der Prozess der Frontendgestaltung erfolgt ganz direkt unter Nutzung und mit Verweis auf die API-Endpunkte.
Vor- und Nachteile im Überblick
Vorteile
- Entkopplung von Backend und Frontend
- Konzentration auf Content
- Design ist unabhängig von möglichen technischen Beschränkungen des CMS. Gestalterische Flexibilität.
- Technologiefreiheit im Frontend
- Nutzung des Content auf verschiedenen Plattformen
- erhöhte Stabilität des Systems
- Designanpassungen ohne Änderungen am Backend/CMS
- längere Haltbarkeit von Content-(Daten)
- höhere Sicherheit durch Trennung von Frontend und CMS
- Geschwindigkeit bei der Projektumsetzung: Contentpflege kann stattfinden, während das Frontend entsteht
- Geschwindigkeit (Performance) der Frontendanwendung
Nachteile
- fehlende Gestaltungsmöglichkeiten der Redakteure beim Frontend
- mögliche Sicherheitslücken bei Zugriffsrechten der API
- eventuelle Probleme beim Ausspielen personalisierter Inhalte
- mehrere Systeme erforderlich (Backend CMS-Server und Frontend-Server)
- Begrenzung durch Fähigkeiten und Leistungsumfang der API
SEO, Google und Headless CMS
Ein Headless CMS in Verbindung mit einer Single Page Application (SPA) erzeugt die Seiten vollständig im Browser mittels JavaScript. Der Googlebot crawlt im ersten Schritt jedoch nur das HTML – JavaScript wird erst nach einigen Tagen bis Wochen ausgeführt. Damit die Website auch vom Googlebot so schnell wie möglich indiziert werden kann, rendert Nuxt.js das Frontend bereits auf dem Server und liefert statisches HTML an die Suchmaschine.
Hier entlang!
Bei Interesse an einer Headless CMS Lösung von LfdA, schreiben Sie uns doch einfach. Wir melden uns zurück.