Vercel and Shopify Are Rebuilding Hydrogen What It Means for Headless Commerce

Why Hydrogen Needed a Rewrite

Hydrogen made headless Shopify storefronts easy to ship, but it wasn't portable. It locked teams into a specific runtime and forced everyone to write the same glue code over and over.

At Vercel Ship 26 in New York, Vercel and Shopify announced they are rebuilding Hydrogen from the ground up as a shared bet on a more open web. The new version is open source and runtime agnostic — it runs anywhere JavaScript runs. You can build with Svelte, Nuxt, Next.js, or bring your own custom framework.

The architecture is split into three layers: core, client, and server. Each layer solves a specific class of repetition that commerce developers have been duplicating for years.

According to the original Vercel announcement, this is a long-term bet on framework neutrality rather than a single-vendor template.

The Core Layer: Stop Rewriting Shopify API Glue

The core layer is the JavaScript we all used to write for the Shopify API and never shared. Take formatMoney — the open web already solved most of this with Intl.NumberFormat:

const price = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).format(19.99);
// "$19.99"

But the Shopify API doesn't hand you a number. It responds with a custom type, MoneyV2, and the amount is a signed decimal number serialized as a string. That's where Hydrogen's core comes in:

import { formatMoney, type MoneyV2 } from "@shopify/hydrogen";

export function formatPrice(money: MoneyV2, locale = "en-US") {
  return formatMoney(money, { locale }).toString();
  // $19.99
}

The result is the same, but you're not writing or maintaining the glue code anymore. When the API changes, the upgrade is trivial. Centralize the core and you fix each bug once, ship improvements to everyone, and get back to building.

The Client Layer: Cart State in a Single Import

Rendering what the core returns involves the same repeated decisions. Cart state is the obvious one. Anyone who's built a commerce app has written a version of this:

import { createContext, useContext, useState, useCallback } from "react";

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [cart, setCart] = useState(null);

  const addLine = useCallback(async (variantId, quantity) => {
    // custom code that we all wrote ourselves
  }, []);
  const updateLine = useCallback(async (variantId, quantity) => {
    // custom code that we all wrote ourselves
  }, []);
  const removeLine = useCallback(async (variantId, quantity) => {
    // custom code that we all wrote ourselves
  }, []);

  // applyDiscount, note, currency, error state, cross-tab sync, refetch on focus, etc.

  return (
    <CartContext.Provider value={{ cart, addLine, updateLine, removeLine }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

Different code every time, all chasing the same thing. With the new Hydrogen client layer, this becomes one import:

import { createCartComponents } from "@shopify/hydrogen/react";

const { useCartForm } = createCartComponents();

function AddToCartButton({ variantId }) {
  const { formProps, register } = useCartForm();

  return (
    <form {...formProps}>
      <input type="hidden" {...register("variantId", variantId)} />
      <button type="submit">Add to cart</button>
    </form>
  );
}

Centralize this and you get best practices for free. It's available for React today on the Hydrogen preview branch, with more frameworks coming.

The Server Layer: Full-Stack Without Lock-In

Developers need full-stack access to build storefronts that scale without sacrificing performance. Static content should serve instantly from a CDN while dynamic data like inventory streams in.

The open-source community solved this with frameworks like Next.js, Nuxt, and SvelteKit — full-stack capabilities with no lock-in to a proprietary runtime. Hydrogen now plugs into those frameworks instead of replacing them:

import { PRODUCT_QUERY } from "@/lib/gql";
import { storefrontConfig } from "@/lib/config";
import { cacheTag } from "next/cache";
import { createStorefrontClient } from "@shopify/hydrogen";

// A cacheable function for product data that can be revalidated on demand
// (상황에 따라 재검증 가능한 상품 데이터 캐시 함수)
export async function getProductData({ handle }) {
  "use cache";
  cacheTag(handle);

  const client = createStorefrontClient({
    type: "private_shared_rate_limit",
    config: storefrontConfig,
  });

  const { data } = await client.graphql(PRODUCT_QUERY, {
    variables: { handle },
  });

  return data;
}

Shopify already supports these frameworks through its Headless sales channel, but until now every team wrote their own bindings to the same API contract. At this layer, the fix is guidance, not more code. Humans and agents both need to know how to use what these frameworks already do.

That guidance ships as documentation, templates, and skills — including structured agent skills for i18n, markets, and menu wiring.

Layer-by-Layer Comparison

Caveats and Limitations

• Preview branch only (React). The client layer is not yet stable across all frameworks. Nuxt and Svelte support is on the roadmap, not shipped.
• Vercel Shop convergence pending. Vercel's own vercel.shop template will be folded into Hydrogen once it stabilizes — meaning the current vercel.shop patterns are transitional.
• Cache Components interactions. Under Next.js 16 cacheComponents: true, naive i18n wiring (e.g., swapping next/link for next-intl's Link) breaks prerendering. The guidance explicitly warns against this — you trade a few middleware redirects for a clean prerender.
• Agent skills are opinionated. The bundled i18n skill assumes localePrefix: "always" and no Shopify Markets integration; if you need region-aware pricing/inventory, you must use a different skill.
• Not a silver bullet for migration. Existing Hydrogen apps will need a migration plan — the three-layer split changes imports and file layout significantly.

What to Learn Next

1. Next.js App Router fundamentals — root params, cacheComponents, instant samples. The Hydrogen server layer leans hard on these.
2. next-intl routing patterns — locale-prefixed URLs, per-locale message catalogs, and how to avoid forcing dynamic rendering in cached trees.
3. GraphQL with type-safe clients — the Hydrogen createStorefrontClient pattern is a good template for any typed API layer.
4. Agent skills as a delivery format — the enable-i18n skill pattern (frontmatter + step-by-step + verification) is a reusable model for shipping internal guidance to AI coding agents.

For a deeper dive into how large platforms manage data at scale, see this breakdown on how Netflix manages millions of data assets with data projects. And if you're tracking the AI-agent tooling side of Vercel, check out Grok Build 0.1 on Vercel AI Gateway.

The Bottom Line

Vercel and Shopify are betting that headless commerce shouldn't require rewriting the same glue code in every project. The three-layer split — core, client, server — is a clean architectural answer to a decade of copy-paste.

The real test isn't the announcement; it's whether the framework-agnostic promise holds once Nuxt and Svelte support ships. For now, React teams on the Hydrogen preview branch get the biggest immediate win: cart state as a single import, and a type-safe Shopify client that survives API changes.

Try it, fork it, and shape what comes next — the repo is open on GitHub.