Shopify Hydrogen Off Oxygen: Deploying Headless Commerce to Vercel and Cloudflare (2026)

For years Hydrogen and Oxygen were a single decision. You built a storefront on Hydrogen and you deployed it to Oxygen, and the tight coupling was part of the pitch: free hosting, tuned for Hydrogen, one vendor. At Editions Spring 2026 Shopify previewed the move that breaks the coupling, and it changes how you should think about a headless Shopify Plus build. Here is what the untethering actually gives you, what it takes away, and how to decide.

What Changed, Precisely

Three shifts landed together and only make sense as a set. First, Hydrogen moved onto React Router 7, so its routing, middleware, and data loading are now the same primitives any modern React app uses rather than a bespoke Hydrogen dialect. Second, Shopify replaced the old monolithic starter template with composable recipes, smaller building blocks you add as needed instead of adopting a whole scaffold. Third, and the reason this post exists, Shopify previewed running those building blocks inside other frameworks, Next.js, Astro, SvelteKit, Nuxt, and deploying to Vercel, Cloudflare, or Netlify rather than only to Oxygen.

Read together, these turn Hydrogen from a framework you commit to into a library you compose with. The commerce logic, cart, product data, the Storefront API client, becomes a set of parts you can mount inside a stack your team already runs. The official direction is documented on the Hydrogen developer site, and the framework agnostic runtime this implies is the same rebuild we walked through in the framework agnostic Hydrogen runtime piece. If your team standardized on Next.js everywhere else, you no longer have to run a second framework and a second deployment target just to get Shopify's commerce primitives.

What Ports Cleanly and What Does Not

The commerce building blocks port. Cart state, Storefront API queries, the product and collection data model, the checkout handoff: these are framework agnostic by design and are the whole point of the change. What does not port automatically is everything Oxygen did for you without an invoice.

The row that catches teams out is caching. Oxygen handled a lot of edge caching for personalized storefronts quietly, and off Oxygen that becomes your problem to design, including the hard part, getting cache keys and vary logic right so you do not serve one customer's personalized page to another. We covered exactly that failure mode in the edge caching and cache key vary guide, and it is the single most common way a self hosted headless storefront ships a correctness bug. Moving off Oxygen does not add that risk out of nowhere, it just moves the responsibility from Shopify to you.

The Decision: When to Leave Oxygen

Leave Oxygen when portability solves a real problem you already have. The strongest case is organizational: your team runs Next.js on Vercel for everything, you have CI, observability, and on call built around that platform, and running a separate Hydrogen on Oxygen deployment is the odd one out that nobody wants to own. Bringing commerce into the stack you already operate reduces the number of platforms your team has to be expert in, and that consolidation is worth real money in a large organization. The second case is capability: you need something a specific host does well, a particular edge feature, a compliance boundary, a data residency requirement, that Oxygen does not give you. The third is negotiating leverage, plain and simple; a portable storefront is not locked to one host.

Stay on Oxygen when the coupling is doing you favors you would otherwise have to pay for. If you do not already run a strong edge platform, Oxygen's free, tuned hosting and its managed caching are a genuine subsidy, and rebuilding that yourself on Vercel or Cloudflare costs both money and engineering time. If your roadmap leans into Shopify's agentic commerce features, Storefront MCP and AI shopping discovery, those land first and most completely on Oxygen, so leaving early means chasing parity. The honest framing is that Oxygen was never only a constraint, it was also a bundle of managed infrastructure, and the untethering lets you unbundle it, which is only a win if you actually want to run the parts yourself. For a straight framework comparison underneath this decision, the Hydrogen framework vs core on Next.js breakdown is the companion read.

FAQ

Can I run Hydrogen on Next.js and deploy to Vercel now? That is the direction Shopify previewed at Editions Spring 2026: Hydrogen's commerce building blocks running inside Next.js, Astro, SvelteKit, or Nuxt, deployed to Vercel, Cloudflare, or Netlify. Treat specifics as evolving and check the Hydrogen developer site for current support before committing a build.

Do I lose free hosting if I leave Oxygen? Yes. Oxygen hosting is free with Shopify Plus. On another platform you pay that platform's compute and bandwidth, and you take on the edge and caching configuration Oxygen managed for you.

Is React Router 7 required for this? Hydrogen's move to React Router 7 is what makes its routing and middleware standard React primitives, which is what enables the portability. It is part of the same shift, not a separate opt in.

What is the biggest risk moving off Oxygen? Caching correctness for personalized storefronts. Oxygen handled a lot of edge caching for you; off Oxygen you own cache keys and vary logic, and getting them wrong can leak one customer's personalized page to another.

When This Applies to Your Stack

The untethering is good news for teams that already operate a strong web platform and want commerce to live inside it, and a trap for teams that read portable as free. If you run Next.js on Vercel with mature CI and observability, pulling Hydrogen's building blocks into that stack removes a whole parallel deployment and is worth doing. If you do not, Oxygen is quietly subsidizing your hosting, caching, and agentic commerce features, and you should count that subsidy before you walk away from it.

Deciding where a headless Shopify Plus storefront should be built and hosted is exactly the kind of architecture call that is cheap to get right up front and expensive to reverse. Contra Collective does headless commerce and platform migration work for enterprise Shopify Plus brands, and the deployment target is one of the first decisions we help teams make deliberately rather than by default.