COMPOSABLE COMMERCE ENGINEERING
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH architecture for maximum performance, flexibility and ownership — a modern commerce operating system that decouples frontend from backend.
Headless is no longer just 'separating the frontend'; it's a composable operation where — under MACH (Microservices + API-first + Cloud-native + Headless) principles — frontend + commerce engine + CMS + search + payment + identity are each chosen best-in-class and composed at the edge.
2026 e-commerce is under three pressures: monolithic theme systems have hit the speed + flexibility ceiling, edge runtimes (Cloudflare Workers, Vercel Edge, Shopify Oxygen) have become the primary delivery layer, and React Server Components + streaming SSR have cut TTFB from seconds to hundreds of milliseconds. Most brands still think 'Hydrogen = Shopify only' and never evaluate a commercetools / BigCommerce / Saleor composable engine + Next.js + Sanity / Contentful + Algolia stack. Roibase's headless operation is built on six principles.
METHODOLOGY
6-layer composable commerce operation
Assess -> Architect -> Compose -> Migrate -> Launch -> Observe. Every layer ships with deliverables + ADR + SLA.
01
ASSESS
Current stack (monolith/themes, apps, CDN), performance baseline, SEO risk, operational cost, team capacity assessment.
02
ARCHITECT
MACH architecture, vendor shortlist (engine/CMS/search/payment/identity), edge strategy, ADR documents, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), composable backend integration, GraphQL gateway, event bus (webhook + queue), feature flags.
04
MIGRATE
Data ETL (catalog/customer/order/content), 301 mapping + hreflang + sitemap, staging parity, feature-complete smoke tests.
05
LAUNCH
Canary rollout, feature-flagged launch, RUM + Sentry, BFCM-ready stress test, weekend on-call + war room.
06
OBSERVE
SLO/SLI tracking, monthly performance QBR, SEO rank monitoring, cost review, ADR updates, runbook + training + handoff.
— COMPARISON
Monolithic theme vs template-only headless vs Roibase composable commerce
How the three approaches compare on performance, flexibility, vendor lock-in, SEO and TCO.
| Dimension | Monolithic theme | Template-only headless | Roibase composable commerce |
|---|---|---|---|
| Architecture | Single monolith | Template + single backend | MACH + composable + edge |
| Vendor flexibility | Platform lock-in | Engine lock-in | Best-of-breed selection (per layer) |
| Edge runtime | None | Partial | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2.5-4.5s | 2.0-2.8s | < 1.5s baseline + RUM |
| Content + CMS | Platform CMS (limited) | Single CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native search | Elasticsearch/Algolia starter | Algolia/Typesense/Coveo + AI relevance |
| SEO | Theme-dependent | Risky on SPA | SSR + schema + 301 + hreflang engineering |
| TCO at month 24 | Low but technical debt | Medium + single-vendor risk | Medium + ownership + flexibility + speed |
PROOF
Outcomes, measured
75th percentile mobile; after headless migration + edge runtime.
6-month average after performance + streaming SSR + edge cache.
Month 12, after SEO preservation + schema + hreflang + green Core Web Vitals.
Cloudflare Workers / Vercel Edge / Shopify Oxygen global CDN.
After ISR + partial prerendering + edge cache strategy.
Engine + CMS + search + identity — each iterates separately.
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 deploy (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 selection + GraphQL + webhook + event-driven flows.
Headless CMS integration
Sanity, Contentful, Storyblok, Hygraph, Strapi; content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch; instant search, federated search, AI 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
LCP < 1.5s / INP < 200ms / CLS < 0.05 budget; 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.
Migration playbook
Magento / WooCommerce / legacy Shopify / BigCommerce to headless; 301 mapping, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + SLO/SLI metric tree.
— BENEFITS
The concrete change in your commerce infrastructure
When edge runtime + composable + performance + SEO preservation + observability come together, ROI stops depending on a single metric.
Speed rises dramatically
Streaming SSR + edge runtime + RSC cut LCP by more than half; mobile conversion and Core Web Vitals turn green.
Conversion grows
Speed + personalization + more flexible UX reduce funnel drop and cart abandonment.
SEO rank is preserved and grows
SSR + schema.org + 301 + hreflang + sitemap engineering limit the migration dip to 2-3 weeks, followed by rank gains.
Vendor flexibility opens up
Engine / CMS / search / identity can be swapped at every layer; vendor lock-in + annual price pressure shrink.
Product velocity grows
With feature flags + canary + ISR, new features ship hourly instead of daily; experiment velocity increases.
Operational cost drops
Apps patched onto a monolith give way to composable services; edge cache lowers origin load and infra cost is optimized.
DELIVERABLES
What you get in every headless engagement
A fixed deliverables list in the setup + 6-month operation package; no surprise add-on invoices.
Headless feasibility + ROI report
Current stack audit, TCO model, performance baseline, SEO risk, team capacity assessment; 50-80 pages.
MACH architecture + ADR documents
Engine + CMS + search + payment + identity + edge + CI/CD vendor decisions, each with a reasoned ADR.
Framework selection + POC
Hydrogen / Next.js / Remix / Nuxt decision matrix + 2-3 week POC + performance benchmark report.
Composable backend setup
commercetools / Saleor / BC / Shopify Storefront API integration + GraphQL gateway + webhook + event bus.
Headless CMS schema
Sanity / Contentful / Storyblok content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo setup + index schema + AI relevance tuning + merchandising rules.
Edge runtime + cache strategy
Cloudflare Workers / Vercel Edge / Oxygen deploy + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen integration + passkey + SCA + 3DS2-compliant flow.
SEO preservation package
301 mapping, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); rank monitoring dashboard.
Feature flag + A/B infrastructure
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; incident runbook.
Runbook + training + 3 months of support
Architecture + deploy + rollback + monitoring runbook, team training sessions, 90 days of support + on-call.
— SCOPE
What we do and don't do
Composable commerce scope written down; prevents surprises and follow-on invoices.
We do
- MACH + composable commerce architecture + 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 flag + canary + rollback + observability
- Identity + payment + subscription integration
- Core Web Vitals engineering + RUM
- Runbook + training + 90 days of support + on-call
We don't do
- Monolithic Magento / WooCommerce theme development (migration only)
- ERP / OMS / WMS core development (we integrate)
- Running ad budgets (Acquisition is a separate engagement)
- Physical logistics / warehousing / customs operations
- Card processing / PCI scope ownership (stays with the payment vendor)
- Banking / KYC / AML regulatory processes (via partner firms)
- Customer service outsourcing (we install the tooling, you operate)
- Fake reviews / bot traffic / artificial speed manipulation
HOW WE WORK
12-16 weeks of setup + migration, then monthly operation
Week 1-2: assess + feasibility
Current stack audit, performance baseline, SEO risk, TCO model, team capacity + draft ADR.
Week 3-4: architect + vendor RFP/POC
MACH architecture, engine/CMS/search/payment/identity shortlist + RFP + 2-3 week POC.
Week 5-6: compose + framework setup
Hydrogen / Next.js setup, Storefront API / commerce engine integration, GraphQL gateway, edge runtime deploy.
Week 7: CMS + search + merchandising
Sanity / Contentful content model, Algolia / Typesense index + relevance tuning, merchandising rules.
Week 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Week 9-10: data ETL + 301 mapping
Catalog / customer / order / content ETL, URL mapping, 301 plan, hreflang + sitemap + schema.
Week 11-12: staging + canary + BFCM stress
Staging parity, smoke test, canary rollout, feature-flagged launch, BFCM stress test + war-room plan.
Week 13+: go-live + observe + QBR + support
Go-live weekend playbook, RUM + Sentry + SLO/SLI, monthly QBR, runbook + training + 3 months of support.
— TOOLKIT
Tools we use — vendor-agnostic but deliberate
We pick what fits each client; we keep our independence by refusing commissions.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSARY
Core concepts of composable commerce
A shared language for your engineering, product, operations and marketing teams.
- MACH
- Acronym for Microservices + API-first + Cloud-native + Headless; the framework for composable commerce architecture, defined by the MACH Alliance.
- Composable Commerce
- A commerce architecture composed of best-of-breed vendors per function instead of a single monolithic platform; engine + CMS + search + payment + identity as separate services.
- Headless
- Decoupling the frontend (presentation) from the backend (commerce engine / CMS) through APIs; lets the frontend run on any framework + runtime.
- React Server Components (RSC)
- A React 18+ component model rendered on the server that ships no JS to the client; Next.js App Router + Shopify Hydrogen use it natively, lowering bundle + hydration cost.
- Streaming SSR
- A render mode where the page's HTML is streamed from server to client piece by piece as it becomes ready, rather than all at once; TTFB and LCP drop.
- Edge Runtime
- A runtime that executes code on the CDN node geographically closest to the user; Cloudflare Workers, Vercel Edge and Shopify Oxygen are the main examples. Minimizes latency with global consistency.
- ISR (Incremental Static Regeneration)
- Rebuilding statically built pages in the background at intervals or via triggers; combines static speed with fresh data.
- Stale-While-Revalidate (SWR)
- An HTTP cache strategy that serves stale content instantly while fetching a fresh version in the background. A balance of speed + freshness.
- Storefront API
- Shopify's public GraphQL API; lets headless / custom frontends / mobile apps access product + collection + cart + checkout data.
- commercetools
- A composable commerce engine; API-first + MACH compliant, and one of the most widely used engines in enterprise B2B + B2C scenarios. commercetools Frontend + Studio ecosystem available.
- ADR (Architecture Decision Record)
- A documentation format that captures the context, options, decision and trade-offs of a software architecture choice; standard for vendor decisions in a composable stack.
- Feature Flag
- A runtime toggle independent of deploys; used for canary releases, A/B tests and kill-switch scenarios; GrowthBook/Statsig/LaunchDarkly are the main tools.
- SSR (Server-Side Rendering)
- Rendering HTML on the server and shipping it ready-to-paint to the browser. Beats CSR on SEO and LCP; the default mode of frameworks like Nuxt 3, Next.js and Remix. At scale it needs edge caching and a thoughtful hydration strategy.
- CSR (Client-Side Rendering)
- Shipping a near-empty HTML shell + JS bundle and rendering in the browser. Typical mode for SPAs; first paint is slow and SEO needs additional route prerendering. LCP degrades sharply on poor networks or low-end devices.
- Edge Functions
- A lightweight compute layer running inside the CDN itself (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Performs geo-routing, A/B test bucketing, header manipulation and auth in milliseconds without going back to the origin; near-zero cold start.
- CDN (Content Delivery Network)
- A network that caches static (and increasingly dynamic) content on geographically distributed edge nodes. Lowers TTFB and LCP, shields origin from DDoS and traffic spikes. Cloudflare, Fastly, Akamai, AWS CloudFront — table stakes for any modern stack.
— DECISION TREE
Is composable commerce right for you?
Answer 4 yes/no questions for a clear outcome.
01 / 04
Is your annual GMV $2M+, or do you have active B2B operations?
The minimum threshold for MACH + composable ROI; smaller stores tend to see faster ROI from OS 2.0.
— LET'S BEGIN
What is limiting your e-commerce frontend speed almost every week?
We scan your current site and produce Web Vitals, cache strategy, SEO risk map and a headless ROI model.