Was ist Headless Commerce?
Im klassischen E-Commerce liefert das Shopsystem sowohl die Geschäftslogik (Backend) als auch die Darstellung (Frontend). Bei Headless Commerce werden diese beiden Schichten entkoppelt:
- Backend (Shopware 6): Verwaltet Produkte, Bestellungen, Kunden, Preise – alles über eine REST- oder Store-API
- Frontend (Next.js): Präsentation, User Interface, Performance-Optimierung – komplett unabhängig vom Backend
Vorteile der Entkopplung
- Technologie-Freiheit: Das Frontend kann mit jeder beliebigen Technologie gebaut werden
- Performance: Statische Seiten, Edge Caching und optimale Core Web Vitals
- Omnichannel: Dasselbe Backend kann Webshop, App, POS und Marktplätze bedienen
- Unabhängige Releases: Frontend und Backend können unabhängig voneinander deployt werden
Klingt perfekt? Die Realität ist wie immer etwas nuancierter.
Architektur: Shopware 6 API + Next.js
Die Architektur eines Headless-Setups mit Shopware 6 und Next.js sieht typischerweise so aus:
Technologie-Stack
- Shopware 6 als Commerce-Engine (Produkte, Warenkorb, Checkout, Payment)
- Store API für die Kommunikation zwischen Frontend und Backend
- Next.js 14+ mit App Router für das Frontend
- React Server Components für optimales Rendering
- Vercel oder Self-Hosted für das Frontend-Deployment
Datenfluss
Produktdaten und Kategorien werden beim Build oder per ISR (Incremental Static Regeneration) vorgerendert. Der Warenkorb und der Checkout-Prozess laufen clientseitig über die Store API. So erhalten Sie das Beste aus beiden Welten: blitzschnelle Seitenaufrufe für Produktseiten und dynamische Funktionalität für den Kaufprozess.
Caching-Strategie
- Statische Seiten: Kategorien und Produktseiten als Static Pages mit Revalidation alle 60 Sekunden
- Dynamische Daten: Warenkorb, Preise und Verfügbarkeit in Echtzeit über die API
- Edge Caching: CDN-Layer für globale Performance
Performance-Vorteile in der Praxis
Die Performance-Vorteile eines Headless-Setups sind in der Praxis deutlich messbar:
| Metrik | Klassisches Shopware | Headless (Next.js) |
|---|---|---|
| LCP (Largest Contentful Paint) | 2.5 – 4.5s | 0.8 – 1.5s |
| CLS (Cumulative Layout Shift) | 0.1 – 0.3 | < 0.05 |
| INP (Interaction to Next Paint) | 200 – 400ms | 50 – 150ms |
| Time to First Byte | 300 – 800ms | 50 – 150ms |
| Lighthouse Score | 60 – 80 | 90 – 100 |
Warum so viel schneller?
- Kein PHP-Rendering: Vorgerenderte HTML-Seiten werden direkt vom CDN ausgeliefert
- Optimierte Bundles: Next.js liefert nur den JavaScript-Code, der für die aktuelle Seite nötig ist
- Image Optimization: Automatische Bildoptimierung mit next/image (WebP, AVIF, responsive)
- Prefetching: Next.js lädt verlinkte Seiten automatisch im Hintergrund vor
Ergebnis: Bessere Core Web Vitals führen zu besseren Google-Rankings und höherer Conversion Rate.
Herausforderungen und Lösungen
Headless Commerce ist nicht nur Sonnenschein. Hier sind die größten Herausforderungen, die ich in Projekten erlebt habe:
1. Höherer initialer Aufwand
Das Frontend muss komplett neu entwickelt werden – es gibt kein fertiges Theme wie bei klassischem Shopware. Das bedeutet mehr Entwicklungszeit und höhere initiale Kosten.
Lösung: Komponentenbibliothek aufbauen, die in mehreren Projekten wiederverwendet werden kann.
2. Shopware Erlebniswelten fallen weg
Der visuelle Page Builder von Shopware funktioniert nicht im Headless-Modus. CMS-Inhalte müssen anders gelöst werden.
Lösung: Headless CMS wie Storyblok oder Contentful integrieren, oder die Shopware CMS-API nutzen und custom rendern.
3. Plugin-Kompatibilität
Viele Shopware-Plugins haben eine Frontend-Komponente, die in einem Headless-Setup nicht funktioniert. Nur die API-Seite der Plugins ist nutzbar.
Lösung: Vor Projektstart alle benötigten Plugins auf API-Kompatibilität prüfen.
4. Zwei Systeme warten
Statt einem System müssen Sie nun zwei pflegen: Shopware-Updates und Next.js-Updates, zwei Hosting-Umgebungen, zwei Deployment-Pipelines.
Lösung: CI/CD-Pipelines automatisieren, Monitoring für beide Systeme einrichten.
Für wen lohnt sich Headless?
Headless Commerce ist nicht für jeden Shop die richtige Wahl. Hier ist meine ehrliche Einschätzung:
Headless lohnt sich, wenn:
- Performance und Core Web Vitals geschäftskritisch sind
- Sie mehrere Frontends (Web, App, POS) mit einem Backend betreiben wollen
- Ihr Design stark von Standard-Shopware-Themes abweicht
- Sie ein erfahrenes Entwicklungsteam haben oder mit spezialisierten Entwicklern zusammenarbeiten
- Ihr Budget mindestens 15.000 EUR für die initiale Entwicklung umfasst
Klassisches Shopware reicht, wenn:
- Sie einen Standard-Shop mit überschaubarem Budget aufbauen
- Die Shopware Erlebniswelten für Ihren Content ausreichen
- Sie kein dediziertes Entwicklungsteam für die laufende Pflege haben
- Time-to-Market wichtiger ist als maximale Performance
Mein Tipp: Starten Sie nicht mit Headless, nur weil es modern klingt. Starten Sie mit Headless, weil Sie die konkreten Vorteile für Ihr Geschäftsmodell brauchen. Gerne berate ich Sie persönlich – mehr Informationen finden Sie auf meiner Headless Commerce Seite.
Interesse an einem ähnlichen Thema?
Ich unterstütze Sie bei Ihrem Web- oder E-Commerce-Projekt – von der Konzeption bis zum Go-Live.