Headless WordPress bedeutet, dass du WordPress nur als Content-Management-System verwendest, während ein separates Frontend wie Next.js oder Astro die Website für Besucher anzeigt. Die beiden kommunizieren über die WordPress REST API oder GraphQL miteinander. Das sorgt oft für schnellere Ladezeiten, mehr Sicherheit und mehr Freiheit im Design, erfordert jedoch etwas mehr technisches Wissen als eine klassische WordPress-Site. In diesem Artikel erfährst du, was Headless WordPress genau bedeutet und wie du es selbst einrichtest.
Was ist Headless WordPress genau
Bei einer traditionellen WordPress-Site generiert WordPress selbst das HTML, das Besucher zu sehen bekommen, über Themes und Templates. Bei Headless WordPress trennst du diesen Prozess auf: WordPress bleibt verantwortlich für das Speichern und Verwalten von Inhalten (Seiten, Beiträge, Medien, Custom Fields), aber die Darstellung wird von einer separaten Frontend-Anwendung übernommen. Dieses Frontend ruft die Inhalte über eine API ab und baut damit selbst die Seiten auf.
Das Ergebnis sind zwei getrennte Systeme: ein Backend (WordPress, oft erreichbar über eine eigene Subdomain) für die Content-Verwaltung, und ein Frontend (gebaut mit einem Framework wie Next.js oder Astro), das für Besucher sichtbar ist. Redakteure arbeiten weiterhin in der gewohnten WordPress-Umgebung; Entwickler bauen die Website davon losgelöst mit moderner Webtechnologie.
Warum sich für Headless entscheiden
Headless WordPress ist nicht für jede Site die beste Wahl, aber in einigen Situationen bringt es klare Vorteile.
- Geschwindigkeit: das Frontend generiert statische oder sehr leichte Seiten, ohne aufwändige PHP-Verarbeitung bei jedem Besuch. Das bedeutet kürzere Ladezeiten und bessere Ergebnisse in Geschwindigkeitstests.
- Sicherheit: da das WordPress-Backend nicht direkt für Besucher sichtbar ist, ist die Angriffsfläche kleiner. Es gibt kein öffentliches Theme, das anfällig sein könnte.
- Design-Freiheit: du bist nicht an WordPress-Themes gebunden und kannst jede gewünschte Interaktion oder Animation mit moderner Frontend-Technologie bauen.
- Skalierbarkeit: das Frontend kann unabhängig vom Backend skaliert werden, zum Beispiel über ein CDN, was bei viel Traffic praktisch ist.
Die Kehrseite ist, dass du zwei Systeme statt eines pflegen musst und dass Funktionen, die in klassischen WordPress-Themes standardmäßig funktionieren (wie manche Plugins für Formulare oder Suchfunktionen), im Frontend selbst neu gebaut werden müssen.
Next.js oder Astro: Was passt zu dir
Beide Frameworks können problemlos Headless-WordPress-Inhalte anzeigen, unterscheiden sich aber im Ansatz.
Next.js ist ein React-Framework, das sich gut für Sites mit viel Interaktivität eignet, wie Webshops, Dashboards oder Sites mit Login-Funktionalität. Es unterstützt sowohl statisches Generieren als auch Server-Side-Rendering, sodass du pro Seite wählen kannst, wie Inhalte aufgebaut werden.
Astro ist auf content-getriebene Sites wie Unternehmenswebsites, Blogs und Portfolios ausgerichtet. Es sendet standardmäßig so wenig JavaScript wie möglich an den Browser, was oft zu noch schnelleren Ladezeiten als bei Next.js für diesen Site-Typ führt. Interaktive Elemente kannst du mit sogenannten „Islands“ hinzufügen, ohne den Rest der Seite schwerer zu machen.
Faustregel: Wähle Astro, wenn deine Site hauptsächlich aus Inhalten mit wenig Interaktion besteht, wähle Next.js, wenn du viel dynamische Funktionalität benötigst.
Headless WordPress einrichten
Im Folgenden ein praktischer Schritt-für-Schritt-Plan, um Headless WordPress mit Next.js oder Astro einzurichten.
Richte ein separates WordPress-Backend ein
Installiere WordPress auf einer Subdomain, zum Beispiel cms.deinedomain.de, und verwende es nur für die Content-Verwaltung. Über Plesk kannst du diese Subdomain einfach neben deiner Hauptdomain erstellen und verwalten.
Aktiviere die API
Die WordPress REST API ist standardmäßig aktiv. Möchtest du GraphQL nutzen (oft angenehmer für komplexere Abfragen), installiere ein Plugin, das GraphQL-Unterstützung zu WordPress hinzufügt.
Richte ein Next.js- oder Astro-Projekt ein
Erstelle ein neues Frontend-Projekt und baue Seiten, die Inhalte aus der WordPress-API abrufen. Richte Vorlagen für Seitentypen wie Beiträge, Seiten und eventuelle Custom Post Types ein.
Regle Vorschauen und Rebuild-Trigger
Sorge dafür, dass Redakteure eine Vorschau ihres Entwurfs sehen können, und richte einen Webhook ein, der das Frontend automatisch neu bauen lässt, sobald Inhalte veröffentlicht oder geändert werden.
Hoste beide Komponenten korrekt
Platziere das WordPress-Backend auf schnellem Hosting mit NVMe-Speicher und Plesk-Verwaltung, und hoste das Frontend in einer Umgebung, die für Node.js-Anwendungen oder statische Dateien geeignet ist. Richte für beide Komponenten kostenloses SSL und tägliche Backups ein, damit Inhalte und Code immer sicher sind.
Teste und richte DNS ein
Überprüfe, ob Formulare, Suchfunktionen und Bilder im neuen Frontend korrekt funktionieren. Weise anschließend die Hauptdomain dem Frontend und die Subdomain dem WordPress-Backend zu, und kontrolliere deine Domainnamen und DNS-Einstellungen.
Stößt du auf Konfigurationsfragen rund um Subdomains, SSL oder Servereinstellungen, findest du eine schrittweise Erklärung in der Wissensdatenbank. Erwägst du, für dieses Projekt zu einem anderen Hosting-Anbieter zu wechseln, lohnt es sich, vorab zu prüfen, wie der Wechsel zu Tandata abläuft, damit dein Backend ohne Ausfallzeit umzieht.
Häufig gestellte Fragen
Ist Headless WordPress für jede Website geeignet?
Nein. Für einfache Unternehmenswebsites oder Blogs ist klassisches WordPress oft schneller einzurichten und zu pflegen. Headless WordPress lohnt sich vor allem bei Sites mit hohen Geschwindigkeitsanforderungen, viel Traffic oder komplexer individueller Funktionalität.
Funktionieren WordPress-Plugins noch in einem Headless-Aufbau?
Plugins, die Inhalte oder Daten verwalten (wie SEO-Plugins oder Custom Fields), funktionieren weiterhin, da sie Daten zur API hinzufügen. Plugins, die Frontend-Ausgaben generieren, wie manche Formular- oder Slider-Plugins, musst du durch eine eigene Implementierung im Frontend ersetzen.
Brauche ich noch gewöhnliches Webhosting für WordPress?
Ja, das WordPress-Backend läuft weiterhin auf einem Webserver, genau wie bei einer klassischen Site. Schau bei Webhosting nach einem Paket mit ausreichender Leistung für deine Content-Verwaltung.
Kann ich E-Mail weiterhin auf derselben Domain nutzen?
Ja, E-Mail ist unabhängig davon, wie deine Website technisch aufgebaut ist. Regle dies über geschäftliche E-Mail, sodass dein Mailverkehr unabhängig von deiner Hosting- oder Frontend-Wahl bleibt.
Ist Headless WordPress teurer als klassisches WordPress?
Das hängt von der Komplexität des Projekts ab. Du zahlst möglicherweise für zwei Hosting-Umgebungen und mehr Entwicklungszeit, sparst aber oft bei der Wartung und kannst langfristig von besserer Leistung profitieren.
Fazit
Headless WordPress trennt Content-Verwaltung von Darstellung, sodass du mit Next.js oder Astro ein schnelles, sicheres und flexibles Frontend auf dem vertrauten WordPress-Backend aufbauen kannst. Es erfordert mehr technischen Aufwand als klassisches WordPress, bietet aber bei Geschwindigkeit und Designfreiheit klare Vorteile für Sites, die das benötigen.