Subsystem 01
Frontend storefront
Server Components rendering product pages with minimal client JavaScript
Typical stack
Next.js App Router
Reference architecture
Headless Shopify storefront on the Next.js App Router
A headless Shopify storefront on Next.js: server-rendered product pages, fast faceted search and Shopify's own checkout, with the theme layer replaced by your design system.
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
- 02Faceted search that stays fast across 50,000+ SKUs
- 03Checkout handed to Shopify with the cart preserved
- 04Product edits revalidated by webhook within seconds
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
Headless Shopify storefront on the Next.js App Router
Illustrative reference architecture
- 01
Frontend storefront
Server Components rendering product pages with minimal client JavaScript
Next.js App Router
- 02
Commerce backend
Product catalog, inventory, discounts and payments
Shopify Storefront GraphQL API
- 03
Faceted search engine
Typo-tolerant product and category search with facets
Algolia / Typesense
- 04
Edge hosting
Edge caching, image optimization and webhook handling
Vercel / Cloudflare
Subsystem 02
Commerce backend
Product catalog, inventory, discounts and payments
Typical stack
Shopify Storefront GraphQL API
Subsystem 03
Faceted search engine
Typo-tolerant product and category search with facets
Typical stack
Algolia / Typesense
Subsystem 04
Edge hosting
Edge caching, image optimization and webhook handling
Typical stack
Vercel / Cloudflare
Data lifecycle
End-to-end data flow
A shopper opens a category; Next.js streams server-rendered product cards with responsive AVIF images.
The search bar queries Typesense directly from the browser with a search-only key, returning typo-tolerant matches as the shopper types.
'Add to bag' updates the cart drawer optimistically while the Shopify Cart API records the item.
'Checkout' redirects to Shopify checkout on the brand's checkout domain with the cart attached.
When a merchandiser edits a price in Shopify Admin, a webhook triggers revalidateTag('products').
Reliability and resilience
Failure modes and how each is contained
Failure mode 01
Shopify API rate limits during flash sales
Mitigation
Cache public catalog data at the edge and call Shopify only for cart and checkout mutations.
Failure mode 02
Search index out of sync with inventory
Mitigation
Subscribe to inventory_levels/update webhooks and push stock changes to the search index as they happen.
Failure mode 03
Theme app extensions that don't render headless
Mitigation
Replace third-party app scripts with native React components that call the app's backend APIs.
Questions
What teams ask about this design
Going headless removes the limits of the Liquid theme layer, gives you full control of the frontend and its performance budget, and lets the storefront share a design system with your other apps. It also adds a frontend you have to host and maintain, so it pays off mainly for larger catalogs and custom experiences.
Yes. Checkout stays on Shopify, which is PCI DSS compliant, and supports Shop Pay, Apple Pay and your installed payment gateways.
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.