Hydrogen vs. Remix vs. Next.js for a Shopify headless storefront

Shopify's headless commerce ecosystem has three credible React framework options in 2026: Hydrogen 2, bare Remix (or React Router 7 which merged with Remix), and Next.js. All three can build a full-featured Shopify storefront. All three talk to the Storefront API. But they differ significantly in hosting, DX, caching strategy, community size, and how much Shopify-specific glue code you write yourself. Here's the comparison you need before you start a new project.

Caching: where the real performance difference lives

Shopify's Storefront API is fast, but every uncached request adds 50–200ms of latency. At scale, uncached product page requests can account for 40% of a site's total load time. This is where the frameworks diverge most sharply in practice.

Hydrogen's CacheLong and CacheShort strategies are wired directly to Cloudflare's CDN via Cache-Control headers and Oxygen's edge caching layer. A collection page with CacheLong() will be served from the nearest Cloudflare PoP in under 5ms after the first request. The storefront.query() call includes a built-in SWR (stale-while-revalidate) option. This is truly zero-config edge caching.

Next.js App Router with unstable_cache or fetch caching gives you similar control, but the semantics differ by host. On Vercel, the Data Cache layer caches fetch responses between function invocations. On self-hosted Next.js, you need to configure caching explicitly using headers or a Redis adapter. The App Router's Route Segment Config (export const revalidate = 3600) sets ISR revalidation time at the page level, which works well for product pages that change infrequently.

When Next.js wins even for Shopify

There are legitimate cases where Next.js is the better choice even for a Shopify-only storefront. If you're building a content-heavy site that mixes Shopify product data with Sanity or Contentful CMS data at the component level, React Server Components let you compose data from multiple sources in a single component tree without waterfalls. Hydrogen doesn't support RSC yet.

The third-party integrations argument also favors Next.js. Practically every SaaS product that integrates with a React framework (Algolia, Contentful, Storyblok, Datadog RUM, Segment) publishes a Next.js SDK. Many of these don't publish a Hydrogen-specific integration, meaning you need to adapt them yourself. For an enterprise client who needs specific tooling like Storyblok's visual editor, Next.js is the path of least resistance.

Developer experience in practice

Day-to-day development velocity matters as much as architectural correctness. With Hydrogen, running shopify hydrogen dev gives you a local dev server with HMR, a direct connection to your Shopify store, and the @shopify/hydrogen-codegen watcher generating TypeScript types from your queries as you write them. Adding a new product field to your homepage query is a two-step process: add the field to the query, and the type updates immediately in your editor.

With Next.js, setting up graphql-codegen pointing at Shopify's Storefront API schema is a 15-minute configuration task but only needs to be done once. After that the DX is similar. The main daily difference is that Hydrogen's storefront.query() is promise-based and integrated with Remix's loader model, while Next.js uses the fetch() override or dedicated data-fetching libraries. Neither is objectively superior — they're different conventions.

One area where Hydrogen genuinely wins on DX is the Shopify CLI integration. shopify hydrogen setup --vite configures Vite, shopify hydrogen setup --i18n adds internationalization scaffolding, and shopify hydrogen check runs a linter that catches Hydrogen-specific patterns like missing cache strategies on storefront queries. These are purpose-built tools for the Shopify use case that Next.js doesn't have equivalents for.

Internationalization and Shopify Markets

If your storefront serves multiple countries with Shopify Markets — different currencies, languages, or pricing per region — Hydrogen has the deepest native support. The createStorefrontClient() function accepts a language and country parameter that passes the @inContext directive on every Storefront API query automatically. You get localized product titles, prices in the correct currency, and country-specific availability without any extra work.

Next.js supports internationalization via i18n routing (with next-intl or next-translate), but the Shopify Markets @inContext directive must be added manually to every query. There's no automated mechanism to detect the visitor's market and pass it to the Storefront API. You build this middleware yourself — typically detecting country from the Accept-Language header or a geo-IP lookup, then passing it to a request-scoped storefront client. Hydrogen does this for you.

The bottom line by scenario

• New DTC storefront for a Shopify merchant, single region: Hydrogen 2 on Oxygen. Fastest time to production, best Shopify integration.
• Content-heavy brand site with Shopify as one of several data sources: Next.js App Router. RSC lets you compose Shopify and CMS data at the component level.
• Enterprise storefront with Shopify Markets and heavy server-side personalization: Hydrogen 2. The Markets and B2B integrations save weeks of custom work.
• Team with existing Next.js expertise, tight deadline, needs specific Next.js ecosystem plugins: Next.js. Don't relearn a framework under deadline.
• Proof of concept or learning project: Hydrogen. The scaffold is the most opinionated and the Shopify docs for Hydrogen are excellent.