COMPOSABLE COMMERCE ENGINEERING
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH-Architektur für maximale Performance, Flexibilität und Ownership — ein modernes Commerce-Betriebssystem, das Frontend und Backend sauber trennt.
Headless bedeutet nicht mehr nur 'das Frontend abkoppeln'; es ist eine composable Operation, in der nach MACH-Prinzipien (Microservices + API-first + Cloud-native + Headless) Frontend, Commerce Engine, CMS, Search, Payment und Identity best-in-class ausgewählt und auf der Edge komponiert werden.
Der E-Commerce 2026 steht unter drei Belastungen: monolithische Theme-Systeme stoßen an die Grenzen von Geschwindigkeit und Flexibilität, Edge Runtimes (Cloudflare Workers, Vercel Edge, Shopify Oxygen) sind zur primären Auslieferungsschicht geworden, und React Server Components + streaming SSR haben TTFB von Sekunden auf wenige hundert Millisekunden gesenkt. Die meisten Marken glauben immer noch, 'Hydrogen = nur Shopify', und bewerten Stacks wie commercetools / BigCommerce / Saleor in Kombination mit Next.js + Sanity / Contentful + Algolia gar nicht. Die Headless-Operation von Roibase ruht auf sechs Prinzipien.
METHODIK
Composable-Commerce-Operation in 6 Schichten
Assess → Architect → Compose → Migrate → Launch → Observe. Jede Schicht wird mit Deliverable + ADR + SLA übergeben.
01
ASSESS
Bewertung des bestehenden Stacks (Monolith/Themes, Apps, CDN), Performance-Baseline, SEO-Risiken, Betriebskosten und Teamkapazität.
02
ARCHITECT
MACH-Architektur, Vendor-Shortlist (Engine/CMS/Search/Payment/Identity), Edge-Strategie, ADR-Dokumente, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), Integration der composable Backends, GraphQL Gateway, Event Bus (Webhook + Queue), Feature Flags.
04
MIGRATE
Daten-ETL (Catalog/Customer/Order/Content), 301-Mapping + hreflang + Sitemap, Staging-Parität, feature-complete Smoke Test.
05
LAUNCH
Canary Rollout, Launch mit Feature Flags, RUM + Sentry, BFCM-ready Stress Test, Weekend On-call + War Room.
06
OBSERVE
SLO/SLI-Tracking, monatliches Performance-QBR, SEO-Ranking-Monitoring, Cost Review, ADR-Updates, Runbook + Schulung + Handoff.
— VERGLEICH
Monolithisches Theme vs. Template-only Headless vs. Roibase Composable Commerce
Die Unterschiede der drei Ansätze in Performance, Flexibilität, Vendor-Lock-in, SEO und TCO.
| Dimension | Monolithisches Theme | Template-only Headless | Roibase Composable Commerce |
|---|---|---|---|
| Architektur | Einzelner Monolith | Template + einzelnes Backend | MACH + composable + Edge |
| Vendor-Flexibilität | Plattform-Lock-in | Engine-Lock-in | Best-of-breed-Auswahl (pro Schicht) |
| Edge Runtime | Keine | Teilweise | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2,5–4,5 s | 2,0–2,8 s | < 1,5 s Baseline + RUM |
| Content + CMS | Plattform-CMS (eingeschränkt) | Einzelnes CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native Suche | Elasticsearch/Algolia Einstieg | Algolia/Typesense/Coveo + KI-Relevance |
| SEO | Theme-abhängig | SPA-risikobehaftet | SSR + Schema + 301 + hreflang-Engineering |
| TCO im 24. Monat | Niedrig, aber technische Schulden | Mittel + Single-Vendor-Risiko | Mittel + Ownership + Flexibilität + Geschwindigkeit |
PROOF
Outcomes, measured
75p mobil; nach Headless-Migration + Edge Runtime.
6-Monats-Durchschnitt nach Performance + streaming SSR + Edge Cache.
Im 12. Monat nach SEO-Preservation + Schema + hreflang + grünen Core Web Vitals.
Globale CDN auf Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Nach Strategie aus ISR + partial prerendering + Edge Cache.
Engine + CMS + Search + Identity — jede separat iterierbar.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + Edge-Deployment (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server Components + streaming + partial prerendering (Next 15) + Turbopack; Vercel Edge Deployment + ISR + SWR.
Composable Commerce Engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; best-fit Engine-Auswahl + GraphQL + Webhook + event-getriebene Flows.
Headless-CMS-Integration
Sanity, Contentful, Storyblok, Hygraph, Strapi; Content-Modell, Preview Mode, Editorial Workflow + Live Preview.
Search + Merchandising
Algolia / Typesense / Coveo / MeiliSearch; Instant Search, federierte Suche, KI-basiertes Relevance Tuning, Merchandising Rules.
Edge Caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, Edge Middleware.
Core-Web-Vitals-Engineering
Budget LCP < 1,5 s / INP < 200 ms / CLS < 0,05; Font Preload + Image Optimization + Critical CSS + Bundle Splitting + RUM.
Identity + Payment + Subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; Passkey + SCA + 3DS2 + Apple/Google Pay.
Migrations-Playbook
Von Magento / WooCommerce / Legacy-Shopify / BigCommerce nach Headless; 301-Mapping, Feature-Parität, Staging/Canary, Go-Live-Weekend.
A/B + Feature Flags + Observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; Canary Rollout + Rollback + SLO/SLI-Metric-Tree.
— NUTZEN
Die konkrete Wirkung auf Ihre Commerce-Infrastruktur
Wenn Edge Runtime + composable + Performance + SEO-Preservation + Observability zusammenspielen, hängt der ROI nicht mehr an einer einzigen Kennzahl.
Deutlich höhere Geschwindigkeit
Streaming SSR + Edge Runtime + RSC halbieren den LCP und bringen Mobile-Conversion sowie Core Web Vitals ins Grüne.
Conversion wächst
Speed + Personalisierung + flexiblere UX senken Funnel-Drops und die Warenkorb-Abbruchrate.
SEO-Ranking bleibt stabil und wächst
Durch SSR + schema.org + 301 + hreflang + Sitemap-Engineering bleibt der Migrationsdip auf 2–3 Wochen begrenzt, danach Ranking-Anstieg.
Vendor-Flexibilität öffnet sich
Engine / CMS / Search / Identity lassen sich in jeder Schicht austauschen; Vendor-Lock-in und jährlicher Preisdruck nehmen ab.
Produktgeschwindigkeit steigt
Mit Feature Flags + Canary + ISR lassen sich neue Features nicht täglich, sondern stündlich ausrollen; die Experimentiergeschwindigkeit steigt.
Betriebskosten sinken
Composable Services ersetzen auf den Monolithen gestapelte Apps; Edge Cache reduziert Origin-Last, die Infrastrukturkosten werden optimiert.
LIEFERUMFANG
Was Sie bei jedem Headless-Engagement erhalten
Feste Liefer-Liste im Paket Setup + 6 Monate Betrieb; keine versteckten Zusatzkosten.
Headless-Feasibility- + ROI-Report
Audit des bestehenden Stacks, TCO-Modell, Performance-Baseline, SEO-Risiken, Bewertung der Teamkapazität; 50–80 Seiten.
MACH-Architektur + ADR-Dokumente
Entscheidungen zu Engine + CMS + Search + Payment + Identity + Edge + CI/CD, jeweils begründet als ADRs.
Framework-Auswahl + POC
Entscheidungsmatrix Hydrogen / Next.js / Remix / Nuxt + 2–3 Wochen POC + Performance-Benchmark-Report.
Composable-Backend-Setup
Integration von commercetools / Saleor / BC / Shopify Storefront API + GraphQL Gateway + Webhook + Event Bus.
Headless-CMS-Schema
Sanity / Contentful / Storyblok Content-Modell, Preview Mode, Editorial Workflow + Live Preview.
Search + Merchandising
Setup von Algolia / Typesense / Coveo + Index-Schema + KI-Relevance-Tuning + Merchandising Rules.
Edge-Runtime- + Cache-Strategie
Deployment auf Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + Edge Middleware.
Identity + Payment + Subscription
Integration von Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Passkey + SCA + 3DS2-konforme Flows.
SEO-Preservation-Paket
301-Mapping, Canonicals, schema.org, hreflang, Sitemap, robots, ITA (International Targeting); Ranking-Monitoring-Dashboard.
Feature-Flag- + A/B-Infrastruktur
GrowthBook / Statsig / LaunchDarkly + Canary + Kill Switch + Experiment-Metric-Tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; Incident-Runbook.
Runbook + Schulung + 3 Monate Support
Runbook für Architecture + Deploy + Rollback + Monitoring, Team-Schulungen, 90 Tage Support + On-call.
— LEISTUNGSUMFANG
Was wir leisten — und was wir nicht leisten
Der Scope für Composable Commerce ist schriftlich fixiert; Überraschungen und Nachberechnungen sind ausgeschlossen.
Wir leisten
- MACH + Composable-Commerce-Architektur + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- Sanity / Contentful / Storyblok Headless CMS
- Algolia / Typesense / Coveo Search + Merchandising
- Edge Runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO Preservation (301 / Schema / hreflang / Sitemap)
- Feature Flags + Canary + Rollback + Observability
- Integration von Identity + Payment + Subscription
- Core-Web-Vitals-Engineering + RUM
- Runbook + Schulung + 90 Tage Support + On-call
Wir leisten nicht
- Entwicklung monolithischer Magento-/WooCommerce-Themes (nur Migration)
- Kernentwicklung von ERP / OMS / WMS (wir integrieren)
- Bewirtschaftung von Werbebudgets (Acquisition-Einheit als separates Engagement)
- Physische Logistik / Lager / Customs-Betrieb
- Kreditkartenverarbeitung / PCI-Scope-Ownership (bleibt beim Payment-Vendor)
- Banking- / KYC- / AML-Regulatorik (mit Partnerfirmen)
- Outsourcing des Kundenservice (wir richten Tools ein, der Betrieb bleibt beim Kunden)
- Fake Reviews / Bot-Traffic / künstliche Speed-Manipulation
HOW WE WORK
12–16 Wochen Setup + Migration, danach monatlicher Betrieb
Woche 1–2: Assess + Feasibility
Audit des bestehenden Stacks, Performance-Baseline, SEO-Risiken, TCO-Modell, Teamkapazität + ADR-Entwurf.
Woche 3–4: Architect + Vendor-RFP/POC
MACH-Architektur, Shortlist für Engine/CMS/Search/Payment/Identity + RFP + 2–3 Wochen POC.
Woche 5–6: Compose + Framework-Setup
Setup von Hydrogen / Next.js, Integration von Storefront API / Commerce Engine, GraphQL Gateway, Edge-Runtime-Deployment.
Woche 7: CMS + Search + Merchandising
Sanity- / Contentful-Content-Modell, Algolia- / Typesense-Index + Relevance Tuning, Merchandising Rules.
Woche 8: Identity + Payment + Subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + Passkey + Accelerated Checkout.
Woche 9–10: Daten-ETL + 301-Mapping
ETL für Catalog / Customer / Order / Content, URL-Mapping, 301-Plan, hreflang + Sitemap + Schema.
Woche 11–12: Staging + Canary + BFCM-Stress
Staging-Parität, Smoke Test, Canary Rollout, Launch mit Feature Flags, BFCM-Stress-Test + War-Room-Plan.
Ab Woche 13: Go-live + Observe + QBR + Support
Go-Live-Weekend-Playbook, RUM + Sentry + SLO/SLI, monatliches QBR, Runbook + Schulung + 3 Monate Support.
— TOOLKIT
Unsere Tools — vendor-agnostisch, aber mit klarer Auswahl
Wir wählen pro Kunde das passende Tool; unsere Unabhängigkeit wahren wir, indem wir keine Provisionen annehmen.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSAR
Grundbegriffe des Composable Commerce
Die gemeinsame Sprache für Engineering-, Produkt-, Operations- und Marketing-Teams.
- MACH
- Abkürzung für Microservices + API-first + Cloud-native + Headless; das Framework der Composable-Commerce-Architektur, definiert durch die MACH Alliance.
- Composable Commerce
- Eine Commerce-Architektur, in der statt einer einzelnen monolithischen Plattform für jede Funktion ein Best-of-breed-Vendor ausgewählt und komponiert wird; Engine + CMS + Search + Payment + Identity sind separate Services.
- Headless
- Die Trennung der Schicht zwischen Frontend (Presentation) und Backend (Commerce Engine / CMS) über APIs; dadurch kann das Frontend in beliebigen Frameworks und Runtimes laufen.
- React Server Components (RSC)
- Mit React 18+ eingeführtes Component-Modell, das auf dem Server gerendert wird und keinerlei JavaScript an den Client sendet; Next.js App Router und Shopify Hydrogen nutzen es nativ und senken Bundle- und Hydration-Kosten.
- Streaming SSR
- Ein Rendermodus, bei dem das HTML einer Seite nicht in einem Stück, sondern ab den ersten fertigen Teilen im Stream vom Server zum Client gesendet wird; TTFB und LCP sinken.
- Edge Runtime
- Eine Runtime, in der Code auf dem geografisch nächsten CDN-Node zum Nutzer ausgeführt wird; Cloudflare Workers, Vercel Edge und Shopify Oxygen sind die bekanntesten Beispiele. Minimale Latenz, globale Konsistenz.
- ISR (Incremental Static Regeneration)
- Die periodische oder Trigger-basierte Regenerierung statisch gebauter Seiten im Hintergrund; vereint statische Geschwindigkeit mit frischen Daten.
- Stale-While-Revalidate (SWR)
- HTTP-Cache-Strategie; dem Nutzer wird sofort Stale-Content gezeigt, während im Hintergrund die frische Version abgerufen wird. Balance aus Speed und Freshness.
- Storefront API
- Shopifys öffentliche GraphQL-API; ermöglicht Headless / Custom Frontends / Mobile Apps den Zugriff auf Produkt-, Collection-, Cart- und Checkout-Daten.
- commercetools
- Eine Composable-Commerce-Engine; API-first + MACH-konform, eine der am häufigsten genutzten Engines für Enterprise-B2B- und B2C-Szenarien. Inklusive commercetools Frontend + Studio-Ökosystem.
- ADR (Architecture Decision Record)
- Ein Dokumentationsformat, das Kontext, Optionen, Ergebnis und Tradeoffs einer Software-Architekturentscheidung schriftlich festhält; Standard für Vendor-Entscheidungen in Composable Stacks.
- Feature Flag
- Ein Feature-Schalter, der unabhängig vom Deploy zur Laufzeit ein- oder ausgeschaltet werden kann; wird für Canary Releases, A/B-Tests und Kill-Switch-Szenarien eingesetzt; zentrale Tools sind GrowthBook/Statsig/LaunchDarkly.
- SSR (Server-Side Rendering)
- HTML auf dem Server rendern und fertig an den Browser ausliefern. Schlägt CSR bei SEO und LCP; Standardmodus von Frameworks wie Nuxt 3, Next.js, Remix. Im Skalieren braucht es Edge-Caching und eine durchdachte Hydration-Strategie.
- CSR (Client-Side Rendering)
- Auslieferung einer fast leeren HTML-Hülle + JS-Bundle und Rendering im Browser. Typische SPA-Variante; First Paint ist langsam, SEO braucht zusätzliches Route-Prerendering. LCP bricht bei schwachem Netz oder Low-End-Geräten stark ein.
- Edge Functions
- Leichtgewichtige Compute-Schicht direkt im CDN (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Geo-Routing, A/B-Test-Bucketing, Header-Manipulation und Auth in Millisekunden, ohne zum Origin zurückzukehren; nahezu kein Cold Start.
- CDN (Content Delivery Network)
- Netzwerk, das statische (und zunehmend dynamische) Inhalte auf geografisch verteilten Edge-Nodes cached. Senkt TTFB und LCP, schützt den Origin vor DDoS und Lastspitzen. Cloudflare, Fastly, Akamai, AWS CloudFront — Pflichtbestand jedes modernen Stacks.
— ENTSCHEIDUNGSBAUM
Ist eine Composable-Commerce-Operation für Sie passend?
Beantworten Sie 4 Fragen mit Ja/Nein — und erhalten Sie eine klare Empfehlung.
01 / 04
Beträgt Ihr jährlicher GMV mindestens 2 Mio. $ oder betreiben Sie aktiv B2B?
Mindestschwelle für den ROI einer MACH- + Composable-Investition; kleinere Shops erzielen mit OS 2.0 schneller ROI.
— LET'S BEGIN
Was bremst die Frontend-Geschwindigkeit Ihres E-Commerce — fast jede Woche aufs Neue?
Wir scannen Ihre bestehende Website und erstellen Web Vitals, Cache-Strategie, SEO-Risikokarte und Headless-ROI-Modell.