Subsystem 01
Edge caching & routing
Serves cached HTML and stale-while-revalidate catalog payloads
Typical stack
Cloudflare Workers & CDN
Reference architecture
Edge-cached headless e-commerce storefront
Serve catalog pages from edge caches close to shoppers, while keeping prices and stock accurate at the moment of purchase.
Design constraints
What the design has to hold to
Targets for the scenario this reference is sized for. A real engagement starts by replacing them with your own numbers.
- 01LCP under 2.5 seconds at the 75th percentile on mobile, worldwide
- 02Live inventory check during checkout to prevent overselling
- 03Cache invalidation within seconds of a price or inventory change
- 0499.99% availability target through Black Friday and Cyber Monday peaks
Component topology
System components and technologies
Subsystems with separate responsibilities, clear contracts between them and storage that scales on its own. The stack named for each is typical, not mandatory.
Stack topology
Edge-cached headless e-commerce storefront
Illustrative reference architecture
- 01
Edge caching & routing
Serves cached HTML and stale-while-revalidate catalog payloads
Cloudflare Workers & CDN
- 02
Storefront application
Server-rendered views with optimistic cart updates
Next.js App Router
- 03
Commerce backend
Product catalog, orders and customer accounts
Shopify Storefront GraphQL / Commerce Layer
- 04
Live inventory & cart cache
Fast cart updates and short-lived inventory reservations
Upstash Redis / Cloudflare Durable Objects
Subsystem 02
Storefront application
Server-rendered views with optimistic cart updates
Typical stack
Next.js App Router
Subsystem 03
Commerce backend
Product catalog, orders and customer accounts
Typical stack
Shopify Storefront GraphQL / Commerce Layer
Subsystem 04
Live inventory & cart cache
Fast cart updates and short-lived inventory reservations
Typical stack
Upstash Redis / Cloudflare Durable Objects
Data lifecycle
End-to-end data flow
A shopper requests a product page; the nearest Cloudflare location serves pre-rendered Next.js HTML from cache.
A client-side hook fetches live stock status from edge Redis, so stock counts stay accurate.
Adding to cart makes a Cloudflare Durable Object reserve the inventory atomically for 15 minutes.
At checkout, the request goes to Shopify's checkout with the reserved cart token.
A Shopify webhook calls revalidateTag('product-123') when a price changes, so the next request rebuilds that page.
Reliability and resilience
Failure modes and how each is contained
Failure mode 01
Overselling during flash sales
Mitigation
Atomic Redis DECR checks before any order is forwarded to the payment gateway.
Failure mode 02
Stale prices at the edge
Mitigation
Tie cache tags to webhook invalidation, and re-check the final cart price against the origin before charging.
Failure mode 03
Commerce API outage
Mitigation
Keep serving cached catalog pages, pause add-to-cart with a clear message, and replay queued webhooks once the API recovers.
Questions
What teams ask about this design
Cloudflare Workers read geo headers and cookie preferences at the edge and serve the matching cached variant, with no client-side redirect.
Server Components keep most rendering on the server, so less JavaScript reaches the browser, and crawlers receive complete HTML. We measure field Core Web Vitals before and after rather than promising a score.
Planning a system like this?
Send us your requirements, expected load and budget. We'll reply within one business day with an honest read on the design, and on whether we're the right team to build it.