Last updated: May 24, 2026 · 16 min read · By Joe McFerrin, CEO of IWD Agency
Headless commerce is no longer the exotic enterprise architecture it was in 2020. By 2026 it's a credible production architecture for any brand at 5M+ GMV. But the decision of which headless framework to build on has become significantly more complex than it was 3 years ago.
This guide is the framework comparison our team uses on every headless scoping call. It covers Hydrogen + Oxygen (Shopify's React framework), Next.js with App Router (platform-agnostic), and PWA Studio (Adobe Commerce's React framework). Plus the decision framework for picking by platform, team capability, and budget.
If you're earlier in the architecture decision — whether to go headless at all — pair this with our Composable Commerce vs Monolithic eCommerce guide.
The 30-Second Verdict
| Your situation | Recommended framework |
|---|---|
| Shopify Plus + want Shopify-native edge hosting | Hydrogen + Oxygen |
| Shopify Plus + want platform flexibility | Next.js + Storefront API |
| Adobe Commerce + Adobe-native tooling | PWA Studio |
| Adobe Commerce + best React ecosystem | Next.js + GraphQL |
| BigCommerce headless | Next.js + Stencil API |
| Multi-platform / composable / commercetools | Next.js (only viable option) |
| Sub-10M GMV brand | Probably skip headless — see our Composable vs Monolithic guide |
Cost reality: headless build = 1.5-2.5x cost of equivalent headed (themed) build. Adds 8-16 weeks to timeline. Justified when brand differentiation through frontend experience materially affects conversion or content velocity.
What "Headless" Actually Means in 2026
The terminology matured significantly. "Headless commerce" today means three different things depending on context:
- Decoupled frontend. Storefront runs as a separate React/Vue/Svelte app, talking to commerce platform via GraphQL or REST. Most common usage in 2026.
- Composable commerce. Multiple best-of-breed services (commercetools + Algolia + Sanity + Stripe) orchestrated by a custom frontend. MACH alliance principles.
- API-first commerce. The platform exposes everything via APIs but you might still use its themed storefront. Less common usage.
This guide focuses on #1 — decoupled frontends — because that's where the framework decision actually matters. For #2, see our Composable vs Monolithic guide.
Hydrogen + Oxygen (Shopify's Stack)
What it is: Hydrogen is Shopify's official React framework (built on Remix). Oxygen is Shopify's edge hosting platform optimized for Hydrogen. Together they're the most batteries-included headless option for Shopify Plus.
Strengths:
- Shopify-native primitives. Cart, checkout integration, product fetching, customer accounts — all designed for Shopify's data model.
- Edge hosting via Oxygen. Deploy to Shopify's global edge network without managing CDN/edge functions yourself.
- Strong React + Remix conventions. Form actions, loaders, nested layouts — modern React patterns baked in.
- Free Oxygen hosting included with Shopify Plus subscription.
- Active Shopify investment — Hydrogen is Shopify's strategic frontend bet.
Weaknesses:
- Shopify lock-in. Built specifically for Shopify; migrating away requires significant rebuild.
- Smaller community than Next.js. Stack Overflow + GitHub answers are thinner.
- Less flexible than raw React frameworks. Hydrogen makes opinionated choices that work for Shopify but don't transfer to other platforms.
- Remix learning curve — different mental model than Next.js if your team is Next-native.
Best for: Shopify Plus brands where Shopify is a multi-year commitment, the team wants Shopify-managed infrastructure, and the frontend doesn't need cross-platform portability.
Cost: $90K-250K for a Hydrogen build on top of a Shopify Plus backend. Oxygen hosting is included.
Next.js (Platform-Agnostic)
What it is: Vercel's React framework, the most popular React metaframework with by far the largest community. Works headless against any commerce backend that exposes a GraphQL or REST API — Shopify Plus, Adobe Commerce, BigCommerce, commercetools, Salesforce Commerce Cloud, anything custom.
Strengths:
- Universal React framework. Talent pool 5-10x larger than Hydrogen or PWA Studio combined.
- Platform-agnostic. Same Next.js codebase can theoretically swap commerce platforms with API adapter changes.
- Server Components + App Router. Modern React rendering patterns. Better SEO + performance characteristics in 2026 than 2023-era Next.js.
- Best ecosystem. Tailwind, Shadcn UI, every React component library, full TypeScript support, every deployment platform supports Next.
- Vercel deployment is excellent with edge functions, ISR, image optimization, etc.
Weaknesses:
- You build the commerce primitives yourself. Cart, checkout integration, product fetching — these come pre-built in Hydrogen/PWA Studio but you build them in Next.js. Net cost is similar but you're more responsible.
- Hosting requires decision. Vercel is great but expensive at scale. Netlify, Cloudflare Pages, AWS Amplify are alternatives. Pick deliberately.
- App Router learning curve. Server Components shift mental model significantly. Teams familiar with Pages Router need ramp time.
Best for: Most teams, most situations. Default pick when no specific reason to use Hydrogen or PWA Studio.
Cost: $90K-300K depending on platform integration depth. Hosting separate ($200-2000/mo at typical scale).
PWA Studio (Adobe Commerce's Stack)
What it is: Adobe's official React framework for Adobe Commerce. Built on top of Magento's GraphQL API. The Adobe Commerce-blessed path to headless.
Strengths:
- Adobe Commerce-native. Pre-built integration with Magento's full feature surface — B2B, page builder, customer accounts, complex checkout.
- Adobe support. Adobe Commerce paying customers get Adobe-level support for PWA Studio.
- Mature for Adobe Commerce. Most enterprise Adobe Commerce headless builds use PWA Studio.
Weaknesses:
- Smaller community than Next.js. Probably the smallest of the three frameworks here.
- Tighter coupling to Adobe Commerce. Like Hydrogen with Shopify, PWA Studio assumes you'll stay on Adobe.
- Slower release cadence. Adobe's pace on PWA Studio updates is slower than Vercel's on Next.js.
- Build complexity. PWA Studio is more involved to set up than Next.js or Hydrogen.
Best for: Adobe Commerce brands committed to the Adobe ecosystem, with Adobe support contracts, and a team comfortable with Magento's data model.
Cost: $150K-400K for PWA Studio build on Adobe Commerce. Hosting separate.
Head-to-Head Framework Comparison
| Dimension | Hydrogen | Next.js | PWA Studio |
|---|---|---|---|
| Commerce platform fit | Shopify | Any | Adobe Commerce |
| Build cost (typical) | $90-250K | $90-300K | $150-400K |
| Timeline (typical) | 16-24 weeks | 16-28 weeks | 22-36 weeks |
| Hosting | Oxygen (Shopify, free) | Vercel/Netlify/AWS | Self-hosted or Cloud |
| Performance ceiling | Excellent | Excellent | Good |
| SEO capability | Excellent | Excellent | Good |
| Community size | Medium (growing) | Massive | Small |
| Talent availability | Medium | Very high | Low |
| Cross-platform portability | None | High | None |
| Best-in-class examples | Allbirds, Sonos | Stripe, Notion, Vercel | Helly Hansen, Bremont |
Decision Framework
Pick the right headless framework for your situation
You're on Shopify Plus, committed long-term, want Shopify-managed everything
Hydrogen + Oxygen. Closest you can get to "Shopify but headless". Shopify invests heavily in this stack. Edge hosting included.
You're on Shopify Plus but want platform flexibility (might switch to BigCommerce or composable later)
Next.js + Shopify Storefront API. Same React talent works on either platform. Adapter pattern lets you swap backends.
You're on Adobe Commerce, want Adobe-native + Adobe support
PWA Studio. Despite weaknesses, it's the Adobe-blessed path with the deepest Adobe Commerce integration.
You're on Adobe Commerce but want the bigger React ecosystem
Next.js + Magento GraphQL API. More work but better long-term flexibility + larger talent pool. Many enterprise Adobe Commerce brands prefer this over PWA Studio in 2026.
You're on BigCommerce going headless
Next.js + BigCommerce Stencil API or Catalyst. BigCommerce's recent Catalyst framework is built on Next.js — official Next-based headless toolkit from BigCommerce.
You're going composable (commercetools, Spryker, custom MACH stack)
Next.js. No platform-specific framework applies. Next.js + custom adapters is the standard composable frontend.
You're sub-5M GMV and headless feels exciting
Don't go headless yet. Headless adds 8-16 weeks of build time and $50-150K of cost vs. equivalent themed build. Below 5M GMV, that capital is usually better invested in catalog, marketing, or product photography.
You're 25M+ GMV with deep brand differentiation through content
Headless is probably worth it. Frontend experience materially affects conversion at this scale. Pick framework by platform + team. Default to Next.js if no specific reason for Hydrogen or PWA Studio.
When Headless Actually Pays Off
Honest answer based on 50+ headless builds we've scoped or executed:
Headless DOES pay off when:
- Brand differentiation through frontend experience is a competitive advantage (e.g., editorial fashion brands, luxury, content-heavy lifestyle)
- Multi-region multi-language storefronts at scale require frontend flexibility
- Multiple "frontends" exist (commerce + content + community + mobile app sharing same backend)
- You need rendering performance that themed stores can't match (sub-1s page loads)
- Content velocity matters — marketing needs to ship landing pages, microsites, campaigns weekly without engineering involvement
Headless DOESN'T pay off when:
- You picked it because "it sounds modern" without specific use case
- Your team can't credibly maintain a separate frontend codebase post-launch
- Your storefront design is mostly conventional and themed equivalents would work
- You're below 5M GMV and 8-16 weeks of extra time-to-market would meaningfully delay revenue
- You don't have a content strategy that needs the velocity headless enables
Hosting Reality
Where headless lives is often more impactful than which framework you pick.
| Hosting | Best for | Cost (typical) |
|---|---|---|
| Oxygen (Shopify-managed) | Hydrogen builds | Free with Shopify Plus |
| Vercel | Next.js, easy DX | $200-2000/mo at scale |
| Netlify | Next.js, Astro, static | $100-1500/mo |
| Cloudflare Pages | Next.js, edge-first | $50-500/mo (significantly cheaper) |
| AWS Amplify / ECS | Custom infra, enterprise | $500-5000/mo + DevOps |
| Self-hosted | Adobe Commerce PWA Studio on prem | Variable + DevOps |
Cloudflare Pages is dramatically underpriced vs. Vercel for equivalent traffic at scale. Worth evaluating for 2026 deployments.
Common Headless Pitfalls
Pitfall #1 — Picking headless before validating the need
"Headless" became aspirational marketing copy in 2022-2023. Brands picked it without specific use cases. Result: $200K+ builds that solve no actual problem. Validate the use case (content velocity, brand differentiation, multi-frontend, performance ceiling) before scoping.
Pitfall #2 — Underestimating ongoing maintenance
Headless = two codebases (frontend + commerce backend) instead of one (themed). Ongoing maintenance scales accordingly. Budget 1.5x ongoing dev retainer compared to themed equivalent.
Pitfall #3 — Treating frontend as the whole project
Headless build still needs commerce backend configuration, integration work, content modeling, design system, accessibility, analytics, SEO, performance optimization. The "frontend" is maybe 40-50% of the total project.
Pitfall #4 — Picking framework on developer preference
The framework choice should follow platform + team + business needs, not "we already know Next.js." If you're on Shopify Plus, Hydrogen often wins on operational simplicity even if your team prefers Next. Have the honest conversation.
Pitfall #5 — Hosting cost surprise post-launch
Vercel pricing scales aggressively with bandwidth + function execution. At 100K monthly visitors, expect $500-2000/mo. At 1M+ visitors, $5000+/mo. Plan hosting cost into TCO during scoping, not after launch.
Frequently Asked Questions
Common questions about headless commerce in 2026
Is headless commerce still worth it in 2026?
Sometimes. The "headless everywhere" enthusiasm of 2022-2023 has tempered. Brands now go headless when there's a specific use case (content velocity, brand differentiation, multi-frontend, performance ceiling). At 5-25M GMV with conventional DTC, themed builds are usually the better TCO.
Which is better — Hydrogen or Next.js?
Hydrogen for Shopify-committed teams that want Shopify-managed infrastructure. Next.js for everyone else — bigger ecosystem, more flexible, platform-agnostic. The technical capabilities are roughly equivalent in 2026; the choice is about commitment to Shopify's ecosystem.
Can I run Hydrogen on something other than Oxygen?
Yes — but Shopify makes it harder. Hydrogen can deploy to Vercel, Netlify, Cloudflare, or anywhere Node.js runs. But Oxygen has Shopify-specific optimizations (edge caching of Shopify data, automatic SOC 2 compliance, etc.) that aren't available on other hosts. Most Hydrogen builds use Oxygen.
Is PWA Studio dying?
No, but Adobe's roadmap pace is slower than Shopify's. Adobe still ships PWA Studio updates and has paying enterprise customers on it. New Adobe Commerce headless builds in 2026 are split between PWA Studio (~40%) and Next.js with custom GraphQL adapters (~60%). PWA Studio is healthy; Next.js is gaining share.
How much more does headless cost vs. themed?
1.5-2.5x. A themed Shopify Plus build at $100K equals a Hydrogen build at $150-250K. Adobe Commerce themed at $150K equals PWA Studio at $250-400K. Add 8-16 weeks of timeline. Justified when use case is real; expensive overkill when picked for aesthetics.
What's the talent availability for each framework?
Next.js has 5-10x more available developers than Hydrogen or PWA Studio. Hydrogen is growing but still niche. PWA Studio is the smallest pool — finding a developer with 3+ years of PWA Studio experience is genuinely hard. Plan hiring accordingly.
Can my themed Shopify Plus store migrate to Hydrogen?
Yes — but it's a rebuild, not a migration. The backend Shopify Plus stays unchanged; the frontend is built fresh in Hydrogen. Typical timeline: 16-24 weeks. Cost: $150-250K. Worth it when the themed store has hit performance or flexibility ceilings.
Should I go composable instead of just headless?
Probably no. Composable adds vendor management complexity (commercetools + Algolia + Sanity + Stripe = 4 vendor contracts vs. 1 platform). For most 5-50M GMV brands, headless against a single commerce platform (Shopify Plus, Adobe Commerce, BigCommerce) gives 80% of composable's benefits at 30% of the complexity. See our Composable vs Monolithic guide.
What about Astro, Remix, SvelteKit?
Astro is gaining traction for content-heavy storefronts. Remix is the engine behind Hydrogen so brands using Hydrogen are indirectly on Remix. SvelteKit is solid technically but talent pool is too small for most brands. For commerce headless in 2026, the three frameworks covered in this guide (Hydrogen, Next.js, PWA Studio) cover 90% of production builds.
How long until I see ROI on headless?
12-24 months for most brands. Performance gains compound over time as Google's Core Web Vitals signal increases ranking. Conversion improvements from custom UX typically show 6-12 months post-launch. Brand differentiation effects are harder to measure but compound over 18-36 months. Don't expect immediate ROI — headless is a multi-year investment.
Related Reading
Composable Commerce vs Monolithic eCommerce · Shopify Plus vs Adobe Commerce 2026 · Best Shopify Agencies in 2026 · Best Adobe Commerce Agencies in 2026 · Shopify Plus Pricing 2026
If you're evaluating headless for your situation, book a 15-minute architecture assessment. Our team has shipped headless builds on Hydrogen, Next.js (against Shopify, Adobe Commerce, and BigCommerce backends), and PWA Studio — we'll walk through fit honestly including whether a themed build would be the better choice.