Headless Drupal mit Astro: Das Beste aus zwei Welten

Ich liebe Drupal. Es ist robust, sicher und modelliert komplexe Daten wie kein anderes CMS. Aber sind wir ehrlich: Das Theming in Drupal (Twig) fühlt sich im Jahr 2025 manchmal etwas… altbacken an.

Hier kommt Astro ins Spiel.

Seit ich meine eigene Website (diese hier!) auf Astro umgestellt habe, während Drupal im Hintergrund als “Content Repository” läuft, habe ich das Gefühl, endlich den perfekten Stack gefunden zu haben. Hier ist warum.

Das Problem mit “Monolithic” Drupal

Klassisches Drupal rendert HTML auf dem Server. Das ist solide, aber:

1. Frontend-Innovation: Moderne Frameworks wie React, Vue oder Svelte entwickeln sich rasend schnell. Drupal-Themes hinken oft hinterher.
2. Performance: Selbst mit Cache braucht Drupal Server-Ressourcen für jeden Request (außer bei reinem Static Cache).
3. Security: Das Frontend und Backend sind eng gekoppelt. Ein Angriff auf die Darstellungsebene könnte theoretisch das Backend treffen.

Die Lösung: Decoupled (Headless)

Wir trennen die Verantwortlichkeiten:

• Drupal (Backend): Verwaltet Inhalte, Nutzer, Rechte und Datenstrukturen. Es liefert kein HTML, sondern nur JSON.
• Astro (Frontend): Holt sich das JSON und baut daraus blitzschnelles HTML.

Warum ausgerechnet Astro?

Es gibt viele Frontend-Frameworks (Next.js, Nuxt, Remix). Warum Astro?

1. Zero JavaScript by Default

Astro schickt standardmäßig kein JavaScript an den Browser, nur HTML und CSS. Das macht die Seite rasend schnell. Interaktivität (z.B. ein React-Carousel) wird nur dort geladen, wo sie nötig ist (“Islands Architecture”).

2. Framework Agnostic

Ich kann in Astro eine Komponente in React schreiben, die nächste in Vue und die übernächste in Svelte. Oder einfach alles in reinem HTML/CSS.

3. Server-First Mentalität

Astro denkt wie ein PHP-Entwickler. Es rendert auf dem Server (oder im Build-Step). Das macht den Umstieg für Drupal-Devs viel einfacher als zu einer reinen Client-Side SPA (Single Page Application).

Wie funktioniert die Integration?

Es ist überraschend einfach.

Schritt 1: Drupal vorbereiten

Aktiviere das JSON:API Modul (im Core). Das war’s. Deine Inhalte sind jetzt unter /jsonapi/node/article erreichbar.

Schritt 2: Daten in Astro fetchen

In einer Astro-Page (src/pages/blog/[slug].astro) sieht das so aus:

---
// Server-Side Code (läuft beim Build)
const { slug } = Astro.params;
const response = await fetch(`https://mein-drupal.de/jsonapi/node/article?filter[field_slug]=${slug}`);
const data = await response.json();
const article = data.data[0];
---

<h1>{article.attributes.title}</h1>
<div set:html={article.attributes.body.value} />

Kein komplexes Routing-Setup, kein State-Management-Wahnsinn. Einfach Fetch und Render.

Die Vorteile für meine Kunden

Wenn ich Kunden diesen Stack vorschlage, sind die Argumente klar:

1. Unschlagbare Performance: Google Core Web Vitals sind fast immer grün (90-100 Punkte). Das ist gut für SEO und die User Experience.
2. Sicherheit: Das Drupal-Backend kann hinter einer Firewall liegen oder komplett vom öffentlichen Netz getrennt sein (bei Static Site Generation). Der Angriffsvektor schrumpft massiv.
3. Zukunftssicherheit: Wenn wir in 3 Jahren das Frontend neu machen wollen, bleibt das Drupal-Backend unberührt. Die Daten sind sauber getrennt.

Fazit

Die Kombination aus Drupal (für die Power im Backend) und Astro (für die Speed im Frontend) ist für mich aktuell unschlagbar. Es verbindet die Stabilität von Enterprise-Software mit der Leichtigkeit des modernen Webs.

Wer Drupal nur als monolithisches System nutzt, verpasst das Beste, was das CMS heute zu bieten hat: Die beste Content-API der Welt zu sein.

Interesse an einer Headless-Architektur? Ich helfe Ihnen gerne bei der Konzeption und Umsetzung Ihrer Decoupled Drupal Strategie. Kontakt aufnehmen