Headless WordPress: CMS und Frontend entkoppelt

Was ist Headless WordPress?

Bei einer Headless-Architektur wird das Content-Management-System vom Frontend getrennt. WordPress dient nur noch als Backend zur Verwaltung von Inhalten und liefert diese über die REST API oder GraphQL aus. Das Frontend wird mit modernen Frameworks wie React, Vue.js oder Next.js gebaut und ruft die Inhalte über diese APIs ab. Diese Trennung bietet erhebliche Vorteile bei Performance, Sicherheit und Flexibilität.

Vorteile einer Headless-Architektur

Performance-Vorteile

Statisch generierte Seiten mit Next.js oder Gatsby laden deutlich schneller als klassische WordPress-Seiten. Das Frontend kann auf einem CDN weltweit verteilt werden, während WordPress nur bei Content-Updates aktiv wird. Typische Ladezeiten sinken von 2-4 Sekunden auf unter 1 Sekunde. Diese Verbesserung wirkt sich direkt auf SEO-Rankings und Conversion-Raten aus.

Sicherheitsvorteile

Bei Headless WordPress ist das Backend vom öffentlichen Internet getrennt. Besucher interagieren nur mit dem statischen Frontend, WordPress läuft isoliert. Häufige Angriffsvektoren wie Plugin-Schwachstellen oder Brute-Force-Attacken auf wp-login.php werden dadurch erheblich reduziert. Das WordPress-Backend kann hinter einer Firewall oder in einem privaten Netzwerk betrieben werden.

Flexibilität im Frontend

Mit einem entkoppelten Frontend haben Entwickler volle Kontrolle über die Gestaltung und Funktionalität. Statt mit WordPress-Themes und deren Einschränkungen zu kämpfen, können moderne UI-Komponenten, Animationen und interaktive Elemente frei implementiert werden. Derselbe WordPress-Content kann auch für mobile Apps, Smart-TV-Anwendungen oder digitale Displays verwendet werden.

WordPress REST API vs. WPGraphQL

WordPress bietet zwei Möglichkeiten, Inhalte über eine API bereitzustellen: die eingebaute REST API und das Plugin WPGraphQL. Beide haben ihre Stärken.

Kriterium	REST API	WPGraphQL
Installation	Bereits integriert	Plugin erforderlich
Abfrage-Flexibilität	Feste Endpunkte	Flexible Abfragen
Overfetching	Häufig	Selten (nur benötigte Felder)
Mehrere Ressourcen	Mehrere Requests nötig	Ein Request möglich
Caching	Einfacher (HTTP-Caching)	Komplexer
Tooling	Standard HTTP-Tools	GraphQL-spezifische Tools

Frontend-Frameworks für Headless WordPress

Next.js: Die populärste Wahl

Next.js von Vercel ist das meistgenutzte Framework für Headless WordPress. Es bietet Server-Side Rendering (SSR), Static Site Generation (SSG) und Incremental Static Regeneration (ISR). Mit ISR können Seiten statisch generiert und bei Bedarf im Hintergrund aktualisiert werden. Das ergibt die beste Kombination aus Performance und Aktualität.

Ein einfaches Beispiel für das Abrufen von WordPress-Posts mit Next.js:

// app/blog/page.tsx
async function getPosts() {
  const res = await fetch(
    'https://your-wordpress.com/wp-json/wp/v2/posts',
    { next: { revalidate: 3600 } } // ISR: Revalidierung alle Stunde
  );
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <div className="blog-listing">
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </div>
  );
}

Nuxt.js: Die Vue-Alternative

Für Teams mit Vue.js-Erfahrung ist Nuxt.js die ideale Wahl. Es bietet ähnliche Funktionen wie Next.js und kann WordPress-Inhalte über die REST API oder mit dem Modul nuxt-graphql-client über GraphQL abrufen. Die Entwicklererfahrung ist exzellent und die Performance vergleichbar mit Next.js.

Astro: Der neue Stern

Astro ist ein relativ neues Framework, das für Content-Websites optimiert ist. Es generiert standardmäßig statisches HTML ohne JavaScript und lädt interaktive Komponenten nur bei Bedarf. Für content-lastige Websites mit minimaler Interaktivität bietet Astro die beste Performance. Es kann Komponenten aus React, Vue oder Svelte einbinden.

WordPress für Headless vorbereiten

Um WordPress optimal als Headless-Backend zu nutzen, sind einige Anpassungen empfehlenswert. Die folgenden Plugins und Konfigurationen bilden eine solide Grundlage.

Empfohlene Plugins

Plugin	Funktion
WPGraphQL	GraphQL-API für WordPress
WPGraphQL for ACF	Custom Fields in GraphQL
Advanced Custom Fields (ACF)	Flexible Content-Felder
Yoast SEO	SEO-Metadaten über API
WP Webhooks	Build-Trigger bei Content-Änderungen
Application Passwords	Sichere API-Authentifizierung

CORS konfigurieren

Damit das Frontend auf die WordPress-API zugreifen kann, müssen CORS-Header gesetzt werden. Fügen Sie folgendes in die functions.php ein:

// functions.php
add_action('rest_api_init', function() {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function($value) {
        $origin = get_http_origin();
        $allowed_origins = [
            'https://your-frontend.com',
            'http://localhost:3000'
        ];

        if (in_array($origin, $allowed_origins)) {
            header('Access-Control-Allow-Origin: ' . esc_url_raw($origin));
            header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Allow-Headers: Authorization, Content-Type');
        }

        return $value;
    });
}, 15);

Deployment und Hosting

Bei Headless WordPress werden Backend und Frontend separat gehostet. Für das WordPress-Backend eignen sich klassische WordPress-Hoster oder Managed-Lösungen. Das Frontend kann auf spezialisierten Plattformen deployt werden.

Komponente	Empfohlene Plattformen	Kosten
WordPress Backend	WP Engine, Kinsta, Cloudways	20-50 EUR/Monat
Next.js Frontend	Vercel, Netlify, AWS Amplify	0-20 EUR/Monat
Nuxt.js Frontend	Netlify, Vercel, Cloudflare Pages	0-20 EUR/Monat
Astro Frontend	Cloudflare Pages, Netlify, Vercel	0-10 EUR/Monat

Wann lohnt sich Headless WordPress?

Headless WordPress ist nicht für jedes Projekt die richtige Wahl. Die erhöhte Komplexität muss durch entsprechende Vorteile gerechtfertigt sein.

Ideale Anwendungsfälle

Klassisches WordPress bevorzugen bei: