Headless Drupal
mit Next.js
Was ist Headless Drupal - und warum wird es immer beliebter?
Bei einem klassischen Drupal-Setup übernimmt das CMS alles: Inhaltsverwaltung, Logik und die Darstellung der fertigen HTML-Seiten im Browser. Bei Headless Drupal - auch Decoupled Drupal genannt - wird das aufgetrennt. Drupal kümmert sich nur noch um die Inhalte und stellt sie über eine API bereit. Ein separates Frontend - zum Beispiel Next.js - holt sich diese Daten und baut daraus die Website.
Das Ergebnis: Eine Website die so schnell und flexibel ist wie eine moderne Web-App - mit der redaktionellen Stärke und Sicherheit von Drupal im Hintergrund.
vartoo.de selbst ist so gebaut: Next.js als Frontend, und ich setze diesen Stack regelmäßig für Kundenprojekte ein.
Traditionelles Drupal
- Drupal rendert HTML direkt im Backend
- Theme-System bestimmt das Design
- Tightly coupled – CMS und Frontend als Einheit
- Bewährt, einfacher zu warten
- Performance abhängig vom Server-Caching
Headless / Decoupled Drupal
- Drupal liefert nur Daten per JSON:API oder GraphQL
- Frontend komplett unabhängig – z.B. Next.js
- Maximale Design- und Tech-Freiheit
- Statische Seiten möglich – extrem schnell
- Content auf mehreren Kanälen gleichzeitig
Wann ist Headless Drupal sinnvoll?
Maximale Performance
Wenn Core Web Vitals und Ladezeiten entscheidend sind - z.B. bei großen Websites mit hohem Traffic. Next.js mit Static Site Generation liefert Seiten in Millisekunden.
Multichannel-Publishing
Wenn derselbe Content auf Website, App, Digital Signage oder anderen Kanälen ausgespielt werden soll - Drupal als zentrales Content Repository macht das einfach.
Modernes Frontend-Team
Wenn Frontend-Entwickler in React oder Next.js arbeiten und sich nicht mit Drupal-Theming auseinandersetzen wollen - Headless gibt ihnen die volle Freiheit.
Komplexe Redaktionsprozesse
Wenn ein leistungsstarkes CMS mit Workflows, Mehrsprachigkeit und Content-Modellierung gebraucht wird - ohne dass das Frontend dabei eingeschränkt wird.
Der Tech-Stack: Drupal + Next.js
Für Entwickler und technisch interessierte Entscheider - so sieht ein typisches Headless Drupal Setup aus.
Drupal als Backend & Content Repository
Drupal übernimmt Content-Modellierung, Redaktionsworkflows, Mehrsprachigkeit, Benutzerrollen und Zugriffsrechte. Das JSON:API Modul ist seit Drupal 8.7 Core-Bestandteil und stellt alle Inhalte als REST-API bereit. Alternativ kann GraphQL über ein Contrib-Modul genutzt werden.
JSON:API oder GraphQL als Schnittstelle
JSON:API liefert alle Drupal-Entitäten (Nodes, Taxonomien, Medien, User) als strukturierte JSON-Responses. GraphQL ermöglicht präzisere Abfragen und ist besonders bei komplexen Content-Strukturen effizienter. Für die meisten Projekte ist JSON:API ausreichend und einfacher zu warten.
Next.js als Frontend
Next.js holt die Drupal-Daten per API und rendert daraus statische Seiten (SSG) oder server-seitig gerenderte Seiten (SSR). Mit Incremental Static Regeneration (ISR) können einzelne Seiten im Hintergrund neu gebaut werden ohne einen kompletten Rebuild. Das Ergebnis sind schnelle, SEO-freundliche Seiten.
Deployment & Hosting
Das Drupal-Backend läuft auf einem klassischen PHP-fähigen Server oder in der Cloud. Das Next.js Frontend wird auf Vercel oder einem Node.js-fähigen Host deployed. Bei Inhaltsänderungen in Drupal wird ein Webhook ausgelöst der einen neuen Build triggert – so sind Inhalte immer aktuell.
- Drupal JSON:API & GraphQL
- Next.js Frontend Entwicklung
- Static Site Generation (SSG)
- Incremental Static Regeneration
- Vercel Deployment
- Webhook-basierte Builds
- Laufende Drupal Wartung
- Remote – deutschlandweit
Häufige Fragen
Was ist Headless Drupal?
Bei Headless Drupal wird das CMS vom Frontend getrennt. Drupal übernimmt die Inhaltsverwaltung und stellt Daten über eine API bereit – ein separates Frontend wie Next.js konsumiert diese Daten und rendert die Website. Das ermöglicht maximale Flexibilität bei Design und Performance.
Was ist der Unterschied zwischen Headless und traditionellem Drupal?
Bei traditionellem Drupal rendert das CMS die HTML-Seiten direkt im Backend. Bei Headless Drupal liefert das Backend nur strukturierte Daten per API – das Frontend ist komplett unabhängig und kann in jeder modernen Technologie wie Next.js, React oder Vue gebaut werden.
Welche Vorteile hat Headless Drupal gegenüber traditionellem Drupal?
Headless Drupal ermöglicht deutlich bessere Performance durch Static Site Generation, mehr Flexibilität beim Frontend-Design, einfachere Skalierung und die Möglichkeit denselben Content auf mehreren Kanälen auszuspielen – Website, App und weitere Touchpoints gleichzeitig.
Wann ist Headless Drupal sinnvoll?
Headless Drupal lohnt sich wenn maximale Performance wichtig ist, das Frontend-Team in React oder Next.js arbeitet, Content auf mehreren Kanälen ausgespielt werden soll, oder wenn ein modernes Redaktionssystem mit flexiblem Frontend kombiniert werden soll.
Was ist der Unterschied zwischen Headless und Decoupled Drupal?
Die Begriffe werden oft synonym verwendet. Technisch gesehen ist 'fully decoupled' dasselbe wie Headless – Drupal liefert nur die API. 'Progressively decoupled' bedeutet dass Drupal noch teilweise das Rendering übernimmt, während einzelne Komponenten per JavaScript-Framework eingebettet werden.
Headless gebaut - und dann?
Ein Headless Drupal Projekt braucht nach dem Launch dieselbe Pflege wie ein klassisches Setup - Composer-Updates, Security-Patches und Monitoring. Mit einem Drupal Wartungspaket übernehme ich den laufenden Betrieb des Backends. Für Performance-Fragen und Sicherheit bin ich ebenfalls der richtige Ansprechpartner.
Headless Drupal Projekt geplant?
Schreib mir kurz was du vorhast – ich schätze den Aufwand ein und sage dir ob Headless für dein Projekt sinnvoll ist.
Weitere Drupal-Themen: Drupal Wartung · Drupal Performance · Drupal Migration · Drupal Sicherheitslücken