Headless E-Commerce: die Architektur wählen und die Folgen im Griff behalten
Headless ist weder ein Qualitätsmerkmal noch ein Ziel für sich. Wer sich dafür entscheidet, entkoppelt Frontend und Backend: Sie gewinnen Kontrolle über Kundenerlebnis und Release-Zyklen und übernehmen im Gegenzug mehr Verantwortung für Integration, Auslieferung und Betrieb. Dieser Leitfaden zeigt, wann sich das rechnet, wann nicht und worauf Sie bei der Auswahl einer Headless-Agentur oder Beratung achten sollten.
Fachliche Prüfung: monkydot Engineering
1. Zuerst die Begriffe auseinanderhalten
Headless Commerce trennt die Präsentationsschicht vom Commerce-Backend. Storefront, App, Kassensystem oder Kundenportal greifen über APIs auf Katalog, Preise, Warenkorb, Bestellungen und weitere Commerce-Funktionen zu. Über Modularität, Cloud-Tauglichkeit oder Betreibbarkeit des Gesamtsystems sagt diese Trennung allein noch nichts aus.
Composable Commerce geht einen Schritt weiter: Fachliche Fähigkeiten werden aus austauschbaren Komponenten zusammengesetzt. MACH ist ein Kriterienkatalog für Microservices, API-first, Cloud-native SaaS und Headless. Ein System kann also headless sein, ohne composable oder MACH-konform zu sein. Umgekehrt braucht ein guter Commerce-Stack nicht für jede Fähigkeit einen eigenen Anbieter.
| Begriff | Kernaussage | Was daraus nicht folgt |
|---|---|---|
| Headless | Frontend und Commerce-Backend sind über APIs entkoppelt. | Modularität, bessere Performance oder geringere Kosten ergeben sich daraus nicht von selbst. |
| Composable | Fachliche Fähigkeiten werden gezielt aus Komponenten kombiniert. | Nicht jede Komponente muss von einem anderen Anbieter kommen. |
| MACH | Technische Prinzipien für modulare, API-basierte Cloud-Systeme. | Sagt nichts darüber aus, ob der Funktionsumfang passt oder der Betrieb funktioniert. |
2. Was für Headless spricht und was dagegen
Headless lohnt sich, wenn die Standard-Storefront zum Engpass geworden ist. Typische Anzeichen sind: Mehrere Kanäle nutzen dieselbe Commerce-Logik, einzelne Märkte oder Kundensegmente brauchen deutlich unterschiedliche Journeys, Frontend und Backend müssen unabhängig voneinander ausgeliefert werden, oder die Templates der Plattform verhindern nachweislich wichtige Funktionen.
Schwach begründet ist die Entscheidung, wenn als Argument nur ein moderner Stack, Druck zum Replatforming oder ein anstehendes Redesign genannt wird. Ein neues Frontend bereinigt weder unklare Produktdaten noch instabile ERP-Prozesse, und es ersetzt keine fehlende Zuständigkeit für die Plattform.
- Gegenanzeige: Es gibt keine benannte Verantwortung für Produkt und Plattform.
- Gegenanzeige: Releases hängen dauerhaft von einem externen Team ab, ohne dass eine Übergabe geplant ist.
- Gegenanzeige: Die Anforderungen lassen sich weitgehend mit einer Standardplattform abdecken, und die Differenzierung ist gering.
- Gegenanzeige: ERP-, PIM- oder Preisprozesse sind ungeklärt und sollen durch das neue Frontend überdeckt werden.
| Situation | Tendenz | Prüffrage |
|---|---|---|
| Ein Kanal, Standardkatalog, Standard-Checkout | Eher gegen Headless | Welche konkrete Grenze der Plattform verhindert das Ziel? |
| Mehrere Storefronts oder Touchpoints | Eher für Headless | Welche Commerce-Funktionen müssen tatsächlich gemeinsam genutzt werden? |
| Kundenerlebnis ändert sich häufig | Für Headless, sofern ein Produktteam vorhanden ist | Kann das Team Frontend, APIs und Betrieb auf Dauer verantworten? |
| Instabile Stamm- und Bestandsdaten | Zuerst das Datenproblem lösen | Welches System ist für welche Datendomäne führend? |
| Hauptziel ist Kostensenkung | Nur auf Basis eines TCO-Modells | Sind Integration, Observability und Rufbereitschaft eingerechnet? |
3. Referenzarchitektur: erst Grenzen ziehen, dann Produkte wählen
Eine tragfähige Architektur beginnt bei Domänen und Datenflüssen, die Produktauswahl kommt danach. Typische Bausteine sind Storefront, Backend-for-Frontend, Commerce-Engine, CMS, Suche, PIM, ERP oder OMS, Payment Service Provider, Identity, Event-Infrastruktur und Observability. Nicht jedes Projekt braucht jeden dieser Bausteine als eigenes System.
Das Backend-for-Frontend kann Aggregation, Zugriffskontrolle und Caching für die jeweilige Storefront übernehmen. Es sollte aber nicht nach und nach zu einer zweiten Commerce-Engine werden. Für Preise, Reservierungen, Steuern und Bestellstatus muss jeweils klar sein, welches System fachlich das letzte Wort hat.
| Schicht | Verantwortung | Gehört nicht hierher |
|---|---|---|
| Storefront | Darstellung, Interaktion, lokale UI-Zustände | Logik für Vertragspreise oder die abschließende Prüfung der Bestellung |
| BFF/API-Gateway | Aggregation, Auth-Kontext, Rate Limits, Cache-Steuerung | Dauerhafte Stammdaten oder undokumentierte Geschäftslogik |
| Commerce-Engine | Warenkorb, Promotions, Bestellung, Commerce-Regeln | Redaktionelle Inhalte oder die Buchungslogik des ERP |
| ERP/PIM/OMS | Je nach Domäne führend für Stamm-, Bestands- oder Fulfillment-Daten | Darstellung für eine bestimmte Storefront |
4. SEO und Rendering: was jede Seite ausliefern muss
Google kann JavaScript rendern, verarbeitet Seiten aber in drei Phasen: Crawling, Rendering und Indexierung. Für umsatzrelevante Kategorie-, Produkt- und Contentseiten ist vollständiges HTML, serverseitig oder vorab gerendert, deshalb die sichere Ausgangsbasis. Davon profitieren auch Clients, die JavaScript gar nicht oder erst verzögert ausführen.
Über das Rendering entscheiden Sie je Seitentyp. Statische Inhalte lassen sich vorab erzeugen und gezielt revalidieren. Preise oder Verfügbarkeit können serverseitig dynamisch oder nachgelagert aktualisiert werden, solange die angezeigte Aussage dabei nicht irreführend wird. Reines Client-Side-Rendering verlagert Fehler in Browser, APIs und die Render-Warteschlange und macht die Fehlersuche deutlich aufwendiger.
- Je Seitentyp festlegen: Rendering-Modus, Cache-Key, Revalidierung und Fallback.
- Title, Meta Description, Canonical, hreflang und strukturierte Daten im ausgelieferten HTML prüfen.
- Echte Links mit href, stabile URLs und korrekte HTTP-Statuscodes verwenden.
- Für Produktvarianten, Filter und Pagination eine ausdrückliche Indexierungsstrategie festlegen.
- Core Web Vitals anhand von Felddaten überwachen; Labortests allein genügen nicht.
- Migrationen mit URL-Mapping, Redirect-Tests, Sitemap und Monitoring in der Search Console absichern.
5. Datenverträge für jede Domäne
Mit Headless steigt die Zahl der sichtbaren Systemgrenzen. Ohne klare Datenverträge tauchen je Kanal unterschiedliche Produktnamen, Preise oder Bestände auf. Legen Sie pro Domäne ein führendes System, kanonische Identifikatoren und die Bedeutung jedes Status fest. Eine SKU taugt nicht als Schlüssel, wenn sie im ERP wiederverwendet oder je Markt geändert wird.
APIs regeln synchrone Abfragen, Events melden eingetretene Zustandsänderungen. Beides braucht Versionierung, eine klare Zuständigkeit für das Schema, Rückwärtskompatibilität und einen Weg für Backfills. Ein Event-Strom bildet den Zustand nur dann vollständig ab, wenn der Empfänger verpasste Nachrichten nachträglich rekonstruieren kann.
| Datendomäne | Typisch führendes System | Was vereinbart sein muss |
|---|---|---|
| Produktinhalt | PIM oder Commerce | ID, Sprache, Veröffentlichungsstatus, Varianten |
| Preis | Commerce oder Pricing Service | Kunde, Markt, Währung, Steuerkontext, Gültigkeit |
| Bestand | ERP, WMS oder OMS | Standort, verfügbar, reserviert, Zeitpunkt |
| Bestellung | Commerce bis zur Übergabe, danach OMS/ERP | Statusmodell, Übergabepunkt, Korrelations-ID |
| Kunde/Identität | IdP, CRM oder Commerce | Subjekt-ID, Organisation, Einwilligung, Rollen |
6. Checkout: Konsistenz geht vor Eleganz
Der Checkout ist ein verteilter Geschäftsprozess. Adresse, Versandart, Steuer, Promotion, Bestand und Zahlung können sich zwischen Warenkorb und Bestellabschluss ändern. Deshalb muss der Server vor der Annahme der Bestellung alle entscheidenden Bedingungen erneut prüfen. Was der Browser anzeigt, ist kein Buchungsbeleg. Wenn Sie Headless-Checkout-Lösungen vergleichen, sollten genau diese Prüfungen und Fehlerfälle der Maßstab sein.
Legen Sie fest, wann Bestand reserviert wird, wie lange die Reservierung gilt und was bei einer fehlgeschlagenen Zahlung passiert. Für wiederholbare Schreiboperationen gehören Idempotency Keys dazu, damit Wiederholungsversuche nicht zu doppelten Bestellungen oder Doppelbelastungen führen. Callbacks des Payment Service Providers müssen authentifiziert sein, dürfen mehrfach ankommen und werden unabhängig vom Browser verarbeitet.
- Endpreis, Steuer, Versand und Bestand serverseitig bestätigen.
- Eindeutige Checkout- und Payment-IDs durch alle Systeme weitergeben.
- Ein Timeout ist ein unbekannter Ausgang und nicht automatisch ein Fehlschlag.
- Weiterleitung, Abbruch sowie verspäteten und doppelten Webhook testen.
- Eine Bestellung erst dann auf „bezahlt“ setzen, wenn die Zahlungsquelle das bestätigt.
- Für widersprüchliche Zustände von Zahlung und Bestellung eine manuelle Klärung vorsehen.
7. Sicherheit auf allen Ebenen
Durch die Entkopplung kommen zusätzliche APIs, Tokens, Webhooks und Administrationsoberflächen hinzu. Behandeln Sie den Browser grundsätzlich als nicht vertrauenswürdig. Berechtigungen werden an der fachlichen Ressource geprüft und nicht bloß am sichtbaren Menüpunkt. Ein angemeldeter Nutzer darf über erratbare IDs weder fremde Warenkörbe noch Organisationen, Preislisten oder Bestellungen abrufen können.
Den PCI-Umfang halten Sie klein, indem sensible Zahlungsdaten beim Payment Service Provider bleiben. Secrets gehören in einen Secret Store und weder in Frontend-Bundles noch in Build-Logs. Webhooks brauchen eine Signaturprüfung, Schutz vor Replay-Angriffen und eingeschränkte Berechtigungen. Als strukturierte Grundlage für Sicherheitsanforderungen und Abnahme eignet sich der OWASP ASVS.
- Berechtigungen auf Objekt- und Organisationsebene serverseitig testen.
- Kurzlebige Tokens, sichere Cookies und klare Wege zum Widerruf von Sessions verwenden.
- Rate Limits und Missbrauchsschutz für Login, Suche, Warenkorb und Checkout festlegen.
- Personenbezogene Daten in Logs, Traces und Analytics auf das Nötige beschränken.
- Abhängigkeiten, Images und IaC in der CI prüfen; jeder Befund bekommt einen Verantwortlichen und eine Frist.
- Zugriffe durch Admins, Support und Impersonation protokollieren und begrenzen.
8. Auslieferung: unabhängig releasen, gemeinsam testen
Unabhängige Deployments funktionieren nur mit stabilen Schnittstellenverträgen. Consumer-driven Contract Tests oder vergleichbare Schemaprüfungen verhindern, dass ein Backend-Release die Storefront unbemerkt beschädigt. Datenbankmigrationen müssen mit der alten und der neuen Anwendungsversion funktionieren, solange beide parallel laufen können.
Feature Flags trennen das Deployment von der Aktivierung. Jedes Flag braucht einen Verantwortlichen, ein Ablaufdatum und Monitoring, sonst bleibt es als dauerhafte Verzweigung im Code zurück. Bei riskanten Änderungen helfen Canary-Releases, synthetische Kaufpfade und schnelle Rollbacks mehr als aufwendig geplante Release-Termine.
| Kontrolle | Schützt vor | Mindestanforderung |
|---|---|---|
| Contract Tests | Inkompatiblen API-Änderungen | In der CI auf Provider- und Consumer-Seite |
| Preview-Umgebung | Fehlern in Content und UI | Produktionsnahe Datenstruktur, keine Kopie echter Daten |
| Feature Flags | Aktivierung im Big Bang | Verantwortlicher, Kill Switch, Löschdatum |
| Synthetischer Checkout | Unbemerktem Umsatzausfall | Regelmäßig, ohne echte Zahlung |
| Rollback/Forward Fix | Langen Störungen | Geprobt und mit der Datenmigration abgestimmt |
9. Der Betrieb gehört zur Architektur
Ein Headless-Stack kann in jedem Dashboard grün aussehen, während Kunden nicht bestellen können. Die technische Verfügbarkeit einzelner Dienste reicht als Kennzahl deshalb nicht aus. Überwachen Sie die Geschäftsabläufe: Ist das Produkt auffindbar, lässt sich der Preis berechnen, der Warenkorb ändern und der Checkout abschließen? Wird die Zahlung zugeordnet und der Auftrag exportiert?
Logs, Metriken und Traces brauchen gemeinsame Korrelations-IDs. Definieren Sie Service Level Objectives für kritische Journeys und alarmieren Sie auf Symptome, die Kunden bemerken, statt auf jede interne Schwankung. Runbooks sollten Abhängigkeiten, Diagnoseabfragen, Degradationsmodi und Eskalationswege enthalten.
- Ein Dashboard je kritischer Journey, zusätzlich zu den Dashboards je Infrastrukturkomponente.
- Trace-Kontext über Storefront, BFF, Commerce, Payment und Integrationen weitergeben.
- Queues auf das Alter der ältesten Nachricht, die Fehlerquote und Dead Letters überwachen.
- Degradationsmodi festlegen: Cache, Nur-Lese-Betrieb, Checkout-Sperre oder manuelle Auftragserfassung.
- Postmortems auf Verbesserungen am System ausrichten und Maßnahmen bis zum Abschluss nachverfolgen.
10. TCO: auch die verdeckten Kosten einrechnen
Eine SaaS-Lizenz lässt sich nicht sinnvoll mit einer Hosting-Rechnung vergleichen. Die TCO einer Headless-Lösung umfassen Produktentwicklung, Plattformbetrieb, Integrationen, Such- und CMS-Dienste, Observability, Security, Rufbereitschaft, Release-Management, Datenmigration und die Steuerung der Dienstleister. Auch Opportunitätskosten durch langsamere Änderungen oder Grenzen der Plattform gehören ins Modell.
Rechnen Sie mindestens drei realistische Szenarien durch: den Status quo verbessern, teilweise entkoppeln und vollständig replatformen. Arbeiten Sie mit Bandbreiten und dokumentierten Annahmen statt mit einer scheinbar exakten Zahl. Welcher Zeithorizont sinnvoll ist, hängt von Vertragslaufzeiten, Abschreibung und der erwarteten Änderungsrate ab.
| Kostenblock | Oft vergessen | Messgröße |
|---|---|---|
| Build | Migration, Parallelbetrieb, SEO-Abnahme | Interne und externe Personenmonate |
| Run | Rufbereitschaft, Incident-Arbeit, Upgrades | Monatliche Kosten plus Aufwand für Störungen |
| Change | Systemübergreifende Tests und Abstimmung mit Anbietern | Durchlaufzeit je Änderungsklasse |
| Risk | Lock-in, Wissen bei wenigen Personen, Ausfälle | Szenario und finanzielle Auswirkung |
| Exit | Datenexport, Vertragsende, erneutes Replatforming | Zeit, Gebühren, technische Hürden |
11. Headless-Agentur auswählen: woran Sie Kompetenz erkennen
Eine Headless-Commerce-Agentur sollte nicht nur eine Storefront bauen, sondern auch Systemgrenzen, Fehlerfälle und den Betrieb erklären können. Dasselbe gilt für eine Headless-E-Commerce-Beratung vor der Umsetzung. Fordern Sie ein Architekturdokument an, das Daten-Ownership, die Abläufe für Checkout und Auftragsexport, das Sicherheitsmodell, den Delivery-Prozess und die Grenzen des Supports beschreibt.
Bewerten Sie Angebote anhand eines bezahlten Discovery-Ergebnisses oder eines Thin Slice. Ein vertikaler Ausschnitt durch Produkt, Preis, Warenkorb, Bestellung und Observability zeigt Integrationsrisiken früher als ein isolierter Designprototyp.
| Prüfpunkt | Belastbarer Nachweis | Warnsignal |
|---|---|---|
| Ownership | RACI für Code, Cloud, Daten und Incidents | Nach dem Go-live ist alles Sache des Kunden |
| Architektur | Trade-offs und Gegenanzeigen sind dokumentiert | Nur Diagramme des Herstellers |
| Qualität | Automatisierte Vertrags-, E2E- und Security-Tests | QA erst am Sprintende |
| Betrieb | SLOs, Runbooks, Übergabe und Rufbereitschaft | Monitoring kommt später |
| Exit | Repository, IaC, Dokumentation und Datenzugang geklärt | Abhängigkeit von Konten der Agentur |
12. Einführung in Etappen
Beginnen Sie mit einer klar abgegrenzten Journey oder einem einzelnen Markt, bei dem sich Nutzen und Risiko messen lassen. Mit einer Strangler-Strategie setzen Sie neue Seiten oder Funktionen schrittweise vor die bestehende Plattform. Die Grenze muss dabei fachlich sauber gezogen sein. Zwei konkurrierende Warenkörbe oder zwei unterschiedliche Preisquellen schaffen mehr Risiko als Nutzen.
Legen Sie vor dem ersten Release den Rückfallweg, den Datenabgleich und die Kriterien für die Abschaltung des Altsystems fest. Parallelbetrieb ist ein Übergangszustand mit festem Enddatum. Jeder zusätzliche Synchronisationsweg erhöht die Zahl möglicher Widersprüche.
- Eine Baseline für Conversion-Funnel, Performance, Fehler und Betriebskosten erfassen.
- Einen Thin Slice mit echten Integrationen und produktionsnaher Last ausliefern.
- Zuerst interne Nutzer und begrenzten Traffic freischalten.
- Datenabweichungen automatisiert vergleichen und einordnen.
- Den Rollout nur erweitern, wenn die fachlichen und technischen Kriterien erfüllt sind.
- Alte Pfade, Flags und Synchronisationen nach der Stabilisierung entfernen.
13. Checkliste für Entscheidung und Abnahme
Belastbar ist die Entscheidung erst, wenn Fachbereich, Technik und Betrieb dieselben Annahmen mittragen. Offene Punkte sind dabei kein Problem, solange sie sichtbar sind, einen Termin haben und einer Person zugeordnet sind.
- Die Grenze des heutigen Systems ist mit konkreten Beispielen belegt.
- Headless, Composable und MACH werden nicht als Synonyme verwendet.
- Jede Datendomäne hat ein führendes System und einen Verantwortlichen.
- Rendering, Cache, SEO und Statuscodes sind je Seitentyp festgelegt.
- Wiederholungsversuche im Checkout, Webhooks, Reservierungen und unklare Zahlungsausgänge sind getestet.
- Berechtigungen werden je Ressource und Organisation serverseitig geprüft.
- API- und Event-Verträge sind versioniert und in der CI abgesichert.
- Kritische Journeys haben SLOs, Traces, Alarme und Runbooks.
- Die TCO umfassen Build, Run, Change, Risk und Exit.
- Die Übergabe durch den Partner umfasst Repository, IaC, Zugänge, Dokumentation und Betrieb.
- Rollout-Kriterien, Rückfallweg und Abschaltung des Altsystems sind vereinbart.
- Es gibt ein klares Abbruchkriterium für den Fall, dass Nutzen oder Betriebsfähigkeit nicht nachgewiesen werden.
Quellen und weiterführende Literatur
- Google Search Central: JavaScript SEO basics ↗
- Google Search Central: E-Commerce-Sitestruktur ↗
- web.dev: Rendering on the Web ↗
- web.dev: Web Vitals ↗
- Medusa Docs: Commerce Modules ↗
- Medusa Docs: Workflows ↗
- MACH Alliance ↗
- OWASP Application Security Verification Standard ↗
- Stripe Docs: Idempotent Requests ↗
- OpenTelemetry: Observability Primer ↗