Was ist ein Headless CMS? Unterschied zum klassischen CMS

01Was ist ein Content-Management-System?

Ein Content-Management-System (CMS) ist eine Software, mit der auch Menschen ohne technische Kenntnisse Seiten, News, Produkte oder Blogbeiträge hinzufügen und bearbeiten können. Im Panel geben Sie Titel, Text und Bild ein; das System veröffentlicht sie auf der Website.

Bei klassischen CMS sind Inhaltspanel, Datenbank und Erscheinungsbild der Website Teile eines einzigen Pakets. Das Panel speichert die Inhalte, dieselbe Software verbindet sie mit Templates und liefert sie als HTML-Seite an den Besucher aus. Diese Struktur nennt man monolithische bzw. integrierte Architektur.

Der Headless-Ansatz teilt dieses Paket in zwei. Der Name »Headless« (kopflos) beschreibt, dass das System keinen »Kopf«, also keine feste Darstellungsschicht, besitzt. Die Darstellungsschicht ist ein eigenes Projekt und fordert die Inhalte per API an.

02Wie funktioniert die Headless-Architektur?

Eine Headless-Architektur besteht meist aus drei Teilen: dem Verwaltungspanel, in dem Inhalte eingegeben werden, der API, die die Inhalte nach außen gibt, und einer oder mehreren Oberflächen, die sie anzeigen.

1. Der Redakteur gibt Inhalte ein: Im Panel füllt er Titel, Text, Bild und Felder aus.
2. Inhalte werden als strukturierte Daten gespeichert: Nicht das Seitenlayout, sondern Felder werden gespeichert (Titel, Teaser, Haupttext, Autor, Datum).
3. Die Oberfläche sendet eine Anfrage an die API: Website, mobile App oder ein anderer Kanal erhält die Inhalte als JSON.
4. Die Oberfläche zeigt die Inhalte in ihrem eigenen Design: Derselbe Inhalt wird in jedem Kanal passend zu diesem Kanal ausgeliefert.
5. Die Änderung wird veröffentlicht: Seiten werden neu erzeugt, oder bei der nächsten Anfrage werden aktuelle Daten abgerufen.

const yanit = await fetch('https://cms.ornek.com/api/yazilar?limit=3');
const { veriler } = await yanit.json();
veriler.forEach(y => console.log(y.baslik, y.yayinTarihi));

03Unterschied zwischen Headless und klassischem CMS

Wie die Tabelle zeigt, bringt Headless Flexibilität und Skalierbarkeit, verlangt aber anfangs mehr Entwicklungsaufwand. Deshalb ist es nicht für jedes Projekt die richtige Wahl; es sollte zusammen mit dem Bedarf bewertet werden.

04Vorteile eines Headless CMS

Tempo und Performance

In der Headless-Struktur kann die Oberfläche Seiten vorab erzeugen und über ein CDN ausliefern. Der Besucher wartet nicht bei jeder Anfrage auf eine Datenbankabfrage; die Seite ist bereit. Das erleichtert es, die Ziele der Core Web Vitals (LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1) zu erreichen. Das Thema Tempo haben wir auf unserer Seite zur Speed- und Performance-Optimierung ausführlich erläutert.

Sicherheit

Das Verwaltungspanel kann unter einer anderen Adresse liegen als die Website, die der Besucher aufruft. Besteht die Website aus statischen Dateien, bleibt weniger serverseitiger Code, den ein Angreifer ins Visier nehmen kann. Das verkleinert die Angriffsfläche; denken Sie aber daran, dass auch Panel und API geschützt werden müssen.

Multichannel-Publishing

Dieselbe Produktbeschreibung kann auf der Website, in der mobilen App, auf einem Bildschirm im Laden und in einem Marktplatz-Feed verwendet werden. Der Inhalt wird einmal aktualisiert und ändert sich überall. Das nennt man Multichannel-Publishing (Omnichannel).

Technologiefreiheit

Das Frontend-Team kann die gewünschte Technologie wählen, ohne an die Template-Sprache des CMS gebunden zu sein. Möchten Sie die Oberfläche erneuern, bleiben die Inhalte an ihrem Platz; nur die Darstellungsschicht wird neu geschrieben.

05Nachteile und worauf zu achten ist

Die Flexibilität der Headless-Struktur gibt es nicht umsonst. Viele Funktionen, die ein klassisches System mitbringt, werden hier vom Team eingerichtet und gewartet. Prüfen Sie die folgenden Punkte vor der Entscheidung einzeln für Ihr Projekt; oft entscheidet nicht die Technologie, sondern ob Team und Budget diese zusätzliche Verantwortung tragen können.

• Die Abhängigkeit von Entwicklern steigt: Ein neues Seitentemplate oder eine neue Komponente erfordert Code.
• Die Vorschau wird separat eingerichtet: Damit der Redakteur eine Seite vor der Veröffentlichung sehen kann, ist zusätzlicher Aufwand nötig.
• Die Zahl der Bausteine wächst: CMS, API, Oberfläche und Hosting werden jeweils einzeln verwaltet.
• SEO liegt bei der Oberfläche: Title-Tags, strukturierte Daten und Sitemap müssen im Frontend-Projekt richtig aufgebaut werden.
• Das Kostenmodell ist anders: Manche Cloud-CMS-Dienste rechnen nach Anzahl der Inhalte, Nutzer oder API-Anfragen ab.

06Was ist Jamstack?

Jamstack ist ein Ansatz für Webarchitektur, der häufig zusammen mit Headless CMS genannt wird. Seiten werden beim Build vorab erzeugt und als statische Dateien über ein CDN ausgeliefert; dynamische Aufgaben übernehmen APIs und JavaScript.

Bei diesem Ansatz kommen die Inhalte aus dem Headless CMS, und die Seiten erzeugt ein Static-Site-Generator oder ein Framework wie Next.js. Wie Next.js statisches und serverseitiges Rendering verbindet, haben wir im Beitrag Was ist Next.js? erklärt.

Jamstack passt nicht zu jedem Projekt. Bei sehr häufig wechselnden, nutzerabhängig personalisierten Inhalten können serverseitiges Rendering oder hybride Verfahren besser geeignet sein. Entscheidend ist, je nach Änderungshäufigkeit jeder Seite die richtige Erzeugungsart zu wählen.

07Für welche Projekte eignet es sich?

Schauen Sie bei der Entscheidung vor der Technologie auf Ihre Inhalte: Wie viele Kanäle gibt es, wie oft wird aktualisiert, wie viele Personen bearbeiten, und wie kritisch ist das Tempo? Können Sie mindestens zwei dieser Fragen klar mit Ja beantworten, ist die Headless-Struktur ein ernsthafter Kandidat; andernfalls liefert eine schlichtere Architektur meist schnellere und wirtschaftlichere Ergebnisse.

• Multichannel-Marken: Unternehmen, die dieselben Inhalte im Web, in mobilen Apps und auf physischen Bildschirmen nutzen.
• Mehrsprachige und multiregionale Websites: Strukturierte Inhalte erleichtern die Übersetzungsverwaltung.
• Inhaltsstarke Websites mit viel Traffic: Vorab erzeugte Seiten sind unter Last belastbarer.
• Anwendung und Website zusammen: ein Onlineshop oder eine Buchungsplattform mit mobiler App.
• Marken mit häufig erneuertem Design: wer die Oberfläche neu schreiben will, ohne die Inhalte umzuziehen.

08Worauf beim Umstieg achten?

Beim Wechsel von einer bestehenden Website zur Headless-Struktur ist der wichtigste Schritt, das Inhaltsmodell richtig aufzubauen. Statt Seiten unverändert zu übernehmen, sollten Inhalte in sinnvolle Felder zerlegt werden: Produktname, Kurzbeschreibung, Langbeschreibung, Bild, Kategorie.

Der zweite Schritt ist, die URL-Struktur zu erhalten. Ändern sich Adressen, sollte für jede alte Adresse eine 301-Weiterleitung geplant werden; sonst kann die Sichtbarkeit in Suchmaschinen leiden. Hier dienen die Prinzipien von SEO-optimiertem Webdesign als Wegweiser.

Auch sollte von Anfang an besprochen werden, mit welcher Technologie die Inhalte im Frontend ausgeliefert werden. Die Arbeitsteilung zwischen Frontend und Server haben wir im Beitrag Frontend und Backend im Vergleich behandelt, eine der serverseitig noch verbreiteten Sprachen in Was ist PHP?. Bei Aurora Yazılım werden in Webdesign-Projekten Inhaltsstruktur, Tempoziele und einfache Verwaltung gemeinsam geplant.