Choosing the frontend framework for a headless Shopify build used to be straightforward: Next.js won by default because Hydrogen was immature, the hosting story was awkward, and the ecosystem was thin. That advice is out of date. Hydrogen 2.0 shipped on Remix in 2023, Oxygen hosting matured through 2024, and by 2026 the two frameworks represent genuinely different trade-offs rather than one clear winner.

This comparison is written for technical leaders and founders making the call on a Shopify Plus headless build. We will cover what each framework actually does, where they diverge architecturally, performance and cost in practice, and the decision framework we use when advising clients on this specific choice. If you are still weighing whether to go headless in the first place, our headless commerce guide is the better starting point.

What Each Framework Actually Is

The two frameworks sit at slightly different points in the stack, and the comparison only makes sense once the boundaries are clear.

Shopify Hydrogen is a React-based framework, built on Remix, that Shopify develops and maintains specifically for Shopify storefronts. It ships with opinionated patterns for product data, cart state, SEO, server-side rendering, and caching, all wired to Shopify’s Storefront API. Hydrogen projects are designed to run on Oxygen — Shopify’s own serverless hosting platform built on Cloudflare Workers — though the framework can be self-hosted if required.

Next.js Commerce is a reference implementation maintained by Vercel that demonstrates how to build a commerce storefront on top of Next.js. It is not strictly a Shopify framework; Next.js Commerce supports Shopify, BigCommerce, Medusa, Saleor, and other backends through a provider abstraction. The framework is more general-purpose, and the trade-off is that Shopify-specific conveniences need to be built or extended rather than assumed.

The distinction matters. Hydrogen is commerce-first and Shopify-first by design. Next.js is a general-purpose React framework with a commerce starter, and the adapter layer between your code and Shopify is thinner — which is both an advantage and a burden, depending on what you are trying to build.

Architectural Differences That Actually Matter

Most comparisons between the two focus on bundle sizes and Lighthouse scores. Those numbers converge once both frameworks are built properly. The architectural differences that persist in production are more interesting.

Data fetching and caching

Hydrogen has first-class primitives for Shopify’s Storefront API. Product queries, collection queries, and cart mutations have dedicated hooks and caching strategies that understand Shopify’s data shapes. Cache invalidation is handled through Shopify’s webhooks and cache tag APIs, which are pre-wired into Hydrogen’s cache layer.

Next.js Commerce uses Next.js’s generic data fetching — fetch with cache tags, React Server Components, and revalidate options. The developer has to build the Shopify integration explicitly, either using the Shopify Storefront API client directly or through a wrapper. This gives more flexibility but also more surface area for bugs, particularly around cache invalidation for product and inventory updates.

In a pure Shopify build, Hydrogen’s tighter integration genuinely saves engineering time. In a build that combines Shopify with other data sources, the generic approach of Next.js is the better fit.

Rendering strategy

Both frameworks support server-side rendering, static generation with revalidation, and streaming. The defaults differ.

Hydrogen, built on Remix, defaults to server-first rendering with progressive enhancement. Loaders run on the server, data is streamed to the client, and client-side JavaScript takes over for interactivity. This model is well suited to commerce pages, where the primary content is server-rendered product data and the interactivity (add to cart, variant selection) is focused and progressive.

Next.js, particularly with the App Router, defaults to React Server Components with selective client components. The mental model is slightly different — “which components run on the server and which on the client” — and offers more granular control over what ships to the browser. For complex UIs blending server-rendered content with rich client-side state, the RSC model has advantages.

Neither model is strictly better. They reflect different opinions about where the complexity should live.

Storefront API vs Admin API

Both frameworks use Shopify’s Storefront API for customer-facing data. Neither has special capability around the Admin API, which is used for merchant tooling and server-side automation. If your build requires significant Admin API work — custom inventory logic, order orchestration, B2B price list manipulation — that code sits outside the frontend framework in either case, typically in a Shopify app or a separate backend service.

Checkout

Shopify’s checkout is not customisable outside of what checkout extensibility and Shopify Functions allow on Shopify Plus. Both Hydrogen and Next.js Commerce hand off to Shopify’s native checkout for the final transaction. There is no framework-level difference in checkout experience because neither framework owns the checkout.

What Hydrogen provides cleanly is the transition: cart state managed in the storefront, seamless handoff to Shopify checkout, and return to a branded thank-you page. Next.js Commerce can do the same, but the handoff code is something the developer writes explicitly rather than inherits from the framework.

Performance in Practice

When built properly, the two frameworks hit similar Core Web Vitals in production. Real-world numbers from mid-market Shopify Plus storefronts on both frameworks in 2025-2026 cluster around:

  • Largest Contentful Paint: 1.4 to 1.8 seconds on 4G mobile
  • Interaction to Next Paint: 100 to 180 milliseconds
  • Cumulative Layout Shift: 0.02 to 0.08
  • Time to First Byte: 150 to 400 milliseconds depending on edge location

The performance differences within each framework — between a well-built Hydrogen site and a poorly-built one — dwarf the differences between frameworks. This is the single most underrated fact about the choice: the framework does not build itself. Both frameworks will perform badly if the team building on them writes inefficient queries, ships too much client-side JavaScript, or misconfigures caching.

Hydrogen’s performance advantage comes from Oxygen: geographic proximity to Shopify’s infrastructure reduces TTFB for commerce API calls. Next.js Commerce on Vercel or Cloudflare matches this for most traffic because Shopify’s Storefront API is globally distributed and the framework hosting is also edge-deployed. For UK-focused stores, the TTFB difference is small and often imperceptible to end users.

The meaningful performance lever on either framework is image optimisation and how carefully the team manages the page weight. Shopify’s image CDN works identically from both frameworks; the framework cannot compensate for a 2MB hero image.

Hosting and Operational Cost

This is where the practical trade-off lives.

Hydrogen on Oxygen

Oxygen is included in Shopify Plus. Hosting, CDN, edge functions, and deployment pipelines are all provided by Shopify. There is no separate hosting bill, no AWS account to manage, no deployment infrastructure to build. Deploys are triggered from GitHub or manually through the Shopify CLI. Environments (staging, production) are managed through Shopify.

For a Shopify Plus merchant, this is meaningful. A typical Next.js Commerce build on Vercel Pro or similar runs £200 to £5,000 per month depending on traffic and features, plus engineering time on deploy configuration, monitoring, and infrastructure. Oxygen absorbs all of that into the existing Plus subscription.

Next.js Commerce on Vercel

Vercel provides a polished deployment experience, excellent preview environments, and strong observability tooling. The trade-off is cost that scales with traffic and a separate vendor relationship on top of Shopify.

Vercel Pro starts at £20 per month per developer, but production traffic pushes the bill into Enterprise territory quickly. A mid-market storefront doing several million monthly page views can run £3,000 to £10,000 per month on Vercel Enterprise plus bandwidth overages. Self-hosting on Cloudflare Workers, AWS, or Netlify reduces the cost but increases the engineering overhead.

Self-hosting either framework

Both Hydrogen and Next.js can be self-hosted on Cloudflare Workers, AWS Lambda, or a Node.js server. The hosting cost drops but the operational cost rises — someone on the team has to own deployment, monitoring, alerting, and incident response.

Most mid-market Shopify Plus merchants find the operational cost of self-hosting outweighs the hosting savings until traffic pushes the managed-platform bill well into five figures monthly. Below that threshold, Oxygen or Vercel pay for themselves in time not spent on infrastructure.

Developer Experience

Framework choice also shapes hiring and team dynamics.

Hydrogen has a smaller but growing pool of developers with production experience. Remix knowledge transfers. Shopify’s documentation has improved significantly since 2023, and the templates (Hydrogen Skeleton, Demo Store) offer opinionated starting points. The trade-off is that Hydrogen is less universally known than Next.js; hiring a Hydrogen-specialist contractor is harder than hiring a generic Next.js developer.

Next.js is the default frontend framework for a large fraction of the React developer market. Hiring is straightforward. Community resources, tutorials, Stack Overflow answers, and third-party libraries are abundant. The trade-off is that a generic Next.js developer will not know Shopify’s API nuances, caching patterns, or commerce data shapes — they have to learn them, and the framework does not teach them.

A team with strong Remix or Shopify experience will build faster on Hydrogen. A team with strong generic React or Next.js experience will build faster on Next.js. There is no third answer.

When to Pick Hydrogen

Hydrogen is the better choice when:

  • The site is commerce-first, with product listings, product detail pages, cart, search, and account as the primary surface
  • You are on Shopify Plus and want to minimise the hosting bill and operational surface
  • The team has Remix or Shopify-specific experience, or is willing to invest in learning Shopify’s patterns
  • The CMS and content requirements fit into a standard headless CMS alongside Hydrogen (Sanity, Contentful, Storyblok)
  • Time-to-market matters and the opinionated Hydrogen patterns accelerate the build

When to Pick Next.js Commerce

Next.js Commerce is the better choice when:

  • The site blends commerce with substantial non-Shopify content, marketing pages, or functionality
  • Multiple backends need to be integrated — Shopify plus a subscriptions engine, a marketplace, a custom product configurator
  • The team already has deep Next.js and App Router experience and no Shopify specialism
  • Flexibility and framework neutrality matter more than Shopify-specific conveniences
  • The build timeline allows for the additional Shopify integration work that Hydrogen gives you out of the box

A Shorter Answer

For most mid-market Shopify Plus merchants building a new headless storefront in 2026, Hydrogen on Oxygen is now the default recommendation. It was not in 2023; it is now. The framework has matured, the hosting story is clean, and the total cost of ownership for a commerce-first build is lower than Next.js Commerce on Vercel.

Next.js Commerce remains the better choice when the site is as much content and editorial as it is commerce, when multiple backends are involved, or when the team’s existing React expertise points strongly in that direction.

The wrong reason to pick either framework is “we already use it for our marketing site.” The technical requirements of a high-performance commerce frontend are distinct from a marketing site, and forcing the same stack to serve both often produces a worse result than choosing separately.

Getting the Decision Right

The framework choice is one of the first big decisions on a headless Shopify Plus build, and it sets constraints that are difficult to change later. A badly-matched framework adds months of remediation work; a well-matched one compounds velocity across the lifespan of the store.

We build Shopify Plus storefronts on both Hydrogen and Next.js through our Shopify Plus services and advise on the framework choice as part of technical due diligence. For the wider context on the Shopify Plus platform itself, our Shopify Plus guide covers the business case. For a cleaner read on whether headless is right for you in the first place, start with headless commerce explained or composable commerce explained.

If you want a second opinion on a framework decision already in motion, get in touch. Thirty minutes of conversation usually saves weeks of wrong-direction engineering.