Ein Headless-CMS ist ein Content-Management-System, das Inhalte speichert und über eine API ausliefert, ohne festzulegen, wie eine Website aussieht. Erstens pflegen Redakteure Texte und Bilder an einem Ort. Zweitens zeigen Entwickler dieselben Inhalte auf einer Website, in einer App oder auf einem Bildschirm an, zum Beispiel mit Next.js. Bekannte Optionen sind 2026 Strapi, Sanity, Payload und Directus. Auch WordPress kann über die REST API headless laufen, und laut W3Techs laufen 39,7 % aller Websites mit WordPress. Schließlich zählt das Budget: Eine Firmenwebsite von VirtuoLab hat eine Indikation von 2.000 bis 8.000 €. Ein Headless-Aufbau bringt zusätzliche Arbeit für Inhaltsmodell und Vorschau, daher braucht eine kleine Website mit 5 Seiten oft gar kein CMS. Die Abschnitte unten erklären die Vorteile, die Nachteile, die Kosten und die fünf wichtigsten Optionen.
Was ist ein Headless-CMS?
Ein Headless-CMS ist ein Content-Management-System ohne eingebautes Frontend, also ohne den Kopf, der Inhalte in Webseiten verwandelt. Das CMS speichert Inhalte als strukturierte Daten, etwa einen Blogbeitrag mit Titel, Zusammenfassung, Autor und Haupttext. Erstens legen Entwickler die Inhaltstypen und Felder in einem Inhaltsmodell fest. Zweitens füllen Redakteure diese Felder in einer Verwaltungsoberfläche aus, ohne Code anzufassen. Schließlich liefert das CMS die Inhalte als JSON über eine API aus, meist REST oder GraphQL, wie sie etwa Strapi anbietet. Eine Website mit Next.js, eine mobile App oder ein digitaler Bildschirm stellt dieselben Inhalte dann auf eigene Weise dar. Ein Produkttext kann zum Beispiel eine Website, eine App und einen Bildschirm bedienen, sodass die Redaktion 1 Text statt 3 pflegt. In der Praxis trennt ein Headless-CMS 2026 zwei Aufgaben: Die Redaktion verantwortet die Inhalte, die Entwicklung die Darstellung. Der verwandte Begriff Decoupled CMS beschreibt meist ein System mit optionalem Frontend neben der API.
Was unterscheidet ein Headless-CMS von WordPress?
Ein klassisches CMS wie WordPress ist ein einziges System, das Inhalte speichert, ein Theme anwendet und die fertigen HTML-Seiten rendert. Redakteure sehen das Ergebnis fast sofort, und Plugins ergänzen Funktionen sowohl in der Verwaltung als auch auf der Website. Ein Headless-CMS hört bei den Inhalten auf: Die Website ist eine separate Anwendung, oft gebaut mit React oder Next.js. Der Unterschied zeigt sich in der täglichen Arbeit. In der Praxis bedeutet ein neues Layout für eine WordPress-Seite meist eine Änderung am Theme oder an einem Page-Builder. Mit einem Headless-CMS ändern Redakteure die Inhalte, und Entwickler passen die Templates im Code an. WordPress kann auch headless laufen. Laut dem Handbuch zur WordPress REST API kann die API WordPress-Inhalte in völlig separate Anwendungen bringen, sodass ein Team das vertraute Dashboard behält, während Next.js die Website rendert. Außerdem liefen laut W3Techs im Oktober 2026 39,7 % aller Websites mit WordPress. Viele Redakteure kennen das WordPress-Dashboard daher bereits gut.
Was sind die Vorteile eines Headless-CMS?
Der größte Vorteil eines Headless-CMS ist Freiheit: Die Inhalte bleiben gleich, während sich das Frontend ändern kann. Erstens wählen Entwickler die Frontend-Technik selbst, etwa eine Website mit Next.js und eine mobile App mit React Native. React, die Bibliothek unter beiden, wurde laut Stack Overflow Developer Survey 2025 von 44,7 % der Befragten genutzt. Zweitens kann eine einzige Inhaltsquelle mehrere Kanäle bedienen. Laut Sanity speichert der Content Lake Inhalte als strukturierte Daten, bereit für die Auslieferung an jeden Kanal. Drittens wird die Website schneller, wenn Seiten vorab gerendert werden. Die Next.js-Dokumentation beschreibt Incremental Static Regeneration als Weg, statische Inhalte zu aktualisieren, ohne die ganze Website neu zu bauen. Viertens verbessert sich die Sicherheit, weil die Verwaltungsoberfläche nicht auf der öffentlichen Website läuft. Außerdem wird ein Redesign später günstiger, weil die Inhalte nicht erneut migriert werden müssen. Ein Unternehmen mit einer Website in 3 Sprachen und einer Kunden-App kann zum Beispiel jeden Produkttext einmal pflegen, in einem einzigen CMS.
Was sind die Nachteile eines Headless-CMS?
Der größte Nachteil eines Headless-CMS ist zusätzliche Komplexität: zwei Systeme statt einem, jedes mit Hosting, Updates und Zugriffsrechten. Erstens brauchen Vorschauen Arbeit. Redakteure wollen eine Seite vor der Veröffentlichung sehen, und ein separates Frontend zeigt Entwürfe erst, wenn der Entwickler eine Vorschauroute baut. Next.js löst das Vorschauproblem mit dem Draft Mode, in dem Redakteure Entwürfe sehen, während andere Besucher die gecachte Seite behalten. Zweitens hat ein Headless-CMS standardmäßig keinen Theme-Marktplatz und keinen Drag-and-drop-Page-Builder, für Layoutänderungen braucht es also einen Entwickler. Drittens kostet die erste Umsetzung mehr als eine WordPress-Website mit fertigem Theme. Schließlich kosten gehostete CMS-Dienste ein Abonnement, das mit Nutzern oder Nutzung wachsen kann. In der Praxis lohnt sich ein Headless-CMS 2026 für inhaltsreiche Websites, mehrere Kanäle oder strenge Ladezeitziele. Eine kleine Firmenwebsite mit 5 Seiten funktioniert oft gut ganz ohne CMS.
Welches Headless-CMS sollten Sie 2026 wählen?
Das beste Headless-CMS ist die Option, die zum vorhandenen Stack, zur Hosting-Vorliebe und zur Redaktion passt. Fünf Optionen decken 2026 die meisten Projekte ab. Erstens ist Strapi ein Open-Source-Headless-CMS auf Node.js, das auf einem eigenen Server oder in der Strapi Cloud läuft, mit MySQL, MariaDB, PostgreSQL oder SQLite als Datenbank. Zweitens kombiniert Sanity ein Open-Source-Studio für die Zusammenarbeit in Echtzeit mit dem Sanity Content Lake und der Abfragesprache GROQ. Drittens bezeichnet sich Payload in der eigenen Dokumentation als Fullstack-Framework für Next.js und lässt sich in eine neue oder bestehende Next.js-App mit MongoDB oder Postgres installieren. Viertens verbindet sich Directus mit einer bestehenden Datenbank und stellt darauf eine REST- und GraphQL-API bereit, unter der Monospace Sustainable Core License. Schließlich passt Headless WordPress zu Teams, die bereits mit WordPress arbeiten. Eine Marketing-Website mit 20 Seiten in einer einzigen Next.js-Codebasis führt zum Beispiel zu Payload, ein Team mit vorhandener SQL-Datenbank eher zu Directus.
Wie arbeitet ein Headless-CMS mit Next.js zusammen?
Die Verbindung zwischen Next.js und einem Headless-CMS ist ein Ablauf in vier Schritten: modellieren, abrufen, aktualisieren und Vorschau. Schritt 1 ist das Inhaltsmodell, zum Beispiel Seiten, Blogbeiträge und FAQ-Einträge mit festen Feldern. Schritt 2 ist das Abrufen: Server Components fragen die Inhalte bei der API des CMS ab und rendern HTML auf dem Server oder beim Build. Schritt 3 ist das Aktualisieren. Laut der Next.js-Dokumentation können Seiten nach einer festen Zeit neu validiert werden, oder bei Bedarf mit revalidatePath oder revalidateTag nach einem Webhook des CMS. Eine Website mit 300 Seiten baut dann nur die geänderte Seite neu. Schließlich ist Schritt 4 die Vorschau mit dem Draft Mode: Das CMS öffnet eine geheime Vorschau-URL, und Next.js prüft das Geheimnis, setzt ein Cookie und zeigt den Entwurf. VirtuoLab ist eine Softwareagentur in Papendrecht, die Websites mit Next.js baut und Inhaltsquellen über APIs anbindet. Eine Firmenwebsite hat 2026 eine Indikation von 2.000 bis 8.000 €, mit Festpreis nach einem kostenlosen Kennenlerngespräch.
Häufig gestellte Fragen
Ist WordPress ein Headless-CMS?
WordPress ist standardmäßig ein klassisches CMS, weil WordPress Inhalte speichert und die Seiten auch selbst mit einem Theme rendert. WordPress kann aber über die eingebaute REST API als Headless-CMS arbeiten. Laut der WordPress-Dokumentation kann jede Programmiersprache, die HTTP-Anfragen senden und JSON verarbeiten kann, die API nutzen. In einem Headless-Aufbau behalten Redakteure das WordPress-Dashboard, und Next.js baut die öffentliche Website. Der Aufbau hat Abwägungen. Erstens wirken Plugins, die das Frontend verändern, etwa Page-Builder, nicht mehr auf die Website. Zweitens brauchen zwei Systeme Hosting und Updates. Schließlich braucht der Vorschau-Button eine eigene Vorschauroute. In der Praxis lohnt sich Headless WordPress 2026, wenn ein Team bereits in WordPress veröffentlicht, etwa eine Nachrichtenseite mit 200 Seiten, und ein schnelleres Frontend möchte. Ein neues Projekt ohne WordPress-Gewohnheiten passt oft besser zu Sanity, Strapi oder Payload, Systemen, die von Anfang an headless konzipiert sind.
Was kostet eine Website mit Headless-CMS?
Die Kosten einer Website mit Headless-CMS bestehen aus der Umsetzung des Frontends plus der Einrichtung des CMS, des Inhaltsmodells und der Vorschau. Bei VirtuoLab hat eine Firmenwebsite 2026 eine Indikation von 2.000 bis 8.000 € und ein Onlineshop von 5.000 bis 20.000 €. Erstens bringt ein Headless-Aufbau zusätzliche Arbeit für Inhaltsmodell, Vorschauroute und Cache-Aktualisierung, daher bestimmt der Leistungsumfang, wo ein Projekt innerhalb dieser Spannen landet. Zweitens kommen laufende Kosten hinzu: Hosting für die Website und entweder Hosting für ein selbst betriebenes CMS wie Strapi oder ein Abonnement für einen von Sanity gehosteten Dienst. Open-Source-Optionen wie Payload und Strapi kosten keine Lizenzgebühr für die Kernsoftware. Eine Website mit 10 Seiten und einem Blog braucht zum Beispiel ein deutlich kleineres Inhaltsmodell als ein mehrsprachiger Katalog mit 500 Produkten. Der genaue Preis folgt nach einem kostenlosen Kennenlerngespräch.
Können Redakteure Seiten vor der Veröffentlichung noch ansehen?
Ja, und eine Vorschau ist ein Standardbestandteil jedes guten Headless-Aufbaus. In Next.js heißt die Vorschaufunktion Draft Mode. Laut der Next.js-Dokumentation zeigt der Draft Mode Redakteuren, wie Entwürfe aussehen werden, ohne auf eine Neuvalidierung zu warten. Jedes Headless-CMS, das eine eigene Vorschau-URL öffnen kann, etwa Sanity, Strapi oder Payload, funktioniert mit dem Draft Mode. Der Ablauf hat drei Teile. Erstens öffnet das CMS eine Vorschau-URL mit einem gemeinsamen Geheimnis und dem Pfad der Seite. Zweitens prüft ein Route Handler in Next.js das Geheimnis, aktiviert den Draft Mode per Cookie und leitet zur Seite weiter. Drittens überspringt Next.js für den Redakteur den Cache und holt den neuesten Entwurf aus dem CMS, während andere Besucher weiterhin die veröffentlichte Version sehen. In der Praxis vertrauen Redakteure dem, was sie auf dem Bildschirm sehen, daher ist die Vorschau 2026 ein wesentlicher Teil jedes Headless-Projekts. Außerdem zeigt eine Vorschauleiste mit Schaltfläche zum Beenden, welcher Modus aktiv ist.