Shopify Plus vs Headless Next.js

Not automatically. Both can meet Google's 2.5 second bar for a good Largest Contentful Paint (the time until the main image or headline shows). On most slow Liquid stores the cause is app scripts and oversized images, not Liquid itself. Next.js can prerender pages and ship less JavaScript, but a careless headless build can be slower than a lean theme. Check your store's real-user data before deciding.

With Incremental Static Regeneration (ISR). The Next.js docs say ISR updates static content without rebuilding the entire site and serves prerendered pages for most requests. On a Shopify build we connect product and inventory webhooks to on-demand revalidation, so only the changed product or collection page is refreshed. Cart and checkout always read live data from the Storefront API.

Shopify's API limits page says buyer traffic to the Storefront API is not rate-limited; the limits target bots, crawlers and checkout abuse. The catch is identification. Server-side requests must send the Shopify-Storefront-Buyer-IP header, or Shopify cannot tell buyers apart and may throttle requests, weaken bot protection and break signed-in checkout. Tokenless requests also carry a query complexity cap of 1,000.

Product data, images and reviews are fetched on the server and sent as finished HTML, with fixed image sizes. Elements do not jump when a third-party script loads later, which is the usual cause of layout shift on Liquid stores running several apps. A Liquid theme can reach the same result if app blocks are trimmed and image dimensions are set in the theme code.

Yes, and Shopify says so itself: its headless docs state that a headless storefront costs more to build and run than a theme, and that the merchant needs developers to maintain it after launch. FactoryJet builds a custom theme in 3 to 5 weeks and a headless storefront in 8 to 14 weeks. We quote a fixed price in writing after a short scoping call.

Yes. The catalog, cart, checkout and customer accounts still come from Shopify, so the plan fee stays. On 22 Oct 2026 Shopify listed Plus at $2,300 a month on a 3-year term or $2,500 on a 1-year term, with a variable platform fee for more complex businesses. If you use a third-party payment gateway, Shopify adds 0.20% per transaction.

Usually two. A headless CMS (content management system) such as Sanity, Contentful or Builder.io, so marketers can edit pages without a developer, and frontend hosting such as Vercel or Cloudflare. Hydrogen storefronts can use Oxygen instead, which Shopify offers at no extra charge on paid plans. Check each vendor pricing page for your traffic level before you sign, because these sit outside your Shopify bill.

On a Liquid theme, marketers use the Shopify theme editor: JSON templates hold sections that can be added, removed and reordered without code. On a Next.js storefront, that editor no longer drives the page. Marketers work in a headless CMS instead, using only the blocks your developers built. New layouts need a developer, so plan the block library before launch.

Some of them. Product filters, mega menus, size charts and simple bundle pickers can become plain components in the Next.js code. Apps that hold data or run business logic, such as reviews, loyalty, subscriptions and search, stay in place, and the storefront calls their APIs. Before a migration, list every app and mark whether it has a headless API.

Checkout stays on Shopify. The Next.js app builds the cart through the Storefront API, then sends the shopper to the cart's Shopify checkout URL, where Shop Pay and your payment settings apply. Hydrogen's request handlers answer the /checkout and /api/cart routes for you. Shopify says advanced checkout customisation is available only on Plus, and it is done with Shopify's checkout tools, not in Next.js.

Apps that insert widgets through theme app extensions only work on Liquid themes. On a Next.js storefront each app must offer an API or JavaScript SDK, and a developer adds it as a component. Reviews, loyalty and subscription apps often support headless; many small widget apps do not. Ask each vendor before you commit to the rebuild.

Through Shopify's Customer Account API. It lets customers sign in and serves their orders, addresses and profile to your Next.js pages. The Headless or Hydrogen sales channel gives you a client ID, plus a client secret for code that runs on a server. Hydrogen ships a ready client for it in its customer-account entry point.

Yes. A configurator is an interactive app: it holds state, renders a 3D canvas with a library such as Three.js, and recalculates price as options change. React components in Next.js handle that natively. In Liquid you would bolt a separate JavaScript app onto a theme section. If the configurator is the only custom part, you can embed it in a Liquid theme and skip full headless.

Keep the same handles and the risk is small. Shopify documents /products/:handle as the standard product URL, and asks headless stores that change it to send a server-side 3XX redirect from that path. We build a one-to-one 301 map from every old URL to its new one, single hop. Plus stores can hold up to 20 million Shopify redirects. Hydrogen also checks the store URL redirects before showing a 404.

Hydrogen is Shopify's headless toolkit. Version 2026-10 handles the Shopify-specific parts that are easy to get wrong: the cart, variant selection, collection filtering, analytics, and the routes that apps and checkout depend on. It plugs into frameworks that run server code, including Next.js, React Router, Nuxt, Astro and SvelteKit, and leaves routing and UI to them.

Not any more. Up to Hydrogen 2026-04, Hydrogen was its own React Router based framework, now documented as Legacy Hydrogen. Shopify's release note says Hydrogen 2026-10 is now a library you add to the framework you already use, so it installs into a Next.js project, and Shopify points to Vercel Shop, a Next.js template, as a starting point. The real choices now are where to host and whether to use Hydrogen helpers or call the Storefront API directly.

Oxygen is Shopify's hosting for Hydrogen storefronts. Shopify's docs say it runs your storefront as a Web Worker, not a Node server, and expects a module Worker, one server bundle and a folder of client assets. The React Router starter deploys there, and Oxygen costs nothing extra on paid Shopify plans. For Next.js, Shopify's deploy guide points to Vercel, or to Node, Cloudflare Workers or Deno.

Every Oxygen deployment gets its own preview URL, so changes can be checked before going live. Shopify supports continuous deployment from GitHub, manual deploys from the Hydrogen CLI, and rollbacks that point the environment back to an earlier deployment. On the Basic plan or above you can share preview links with people who are not logged in, and Oxygen blocks search engines from indexing them.

Next.js is a framework built on React. Its GitHub project calls it "The React Framework" and it is MIT-licensed, so it is free to use. React gives you components. Next.js adds routing, server rendering, static generation with ISR, image handling and API routes, which are the parts a Shopify storefront needs to load fast and rank in search.

Stay on Liquid when your pages fit sections and blocks, your marketers edit the store daily in the theme editor, and you rely on apps that only ship theme app extensions. Also stay if you have no developer to own a separate frontend after launch. Shopify's own guidance is to go headless only when themes and apps cannot deliver what you need.

Shopify's docs list the cases: a storefront experience themes cannot support easily, a frontend stack that does not use Liquid, Shopify commerce added to infrastructure you already run, selling on channels Shopify does not support out of the box, and a CMS that drives content next to products. If none applies to you, a faster theme will usually pay back sooner.

A lean Online Store 2.0 theme with the app bloat removed, images sized properly, and small interactive pieces (a configurator, a quiz) built as embedded React islands. Marketers keep the theme editor and apps keep working. We recommend this first for most Plus stores, and move to Next.js only when a named requirement cannot be met inside the theme.

Yes. A common first step is a Next.js content hub or campaign site on its own subdomain, reading products from the Storefront API while the Liquid theme keeps running the main store. Shopify's Headless channel lets you create several storefronts, each with its own API tokens, so the pilot never touches theme code. Move product and collection pages once the pilot proves its value.

Book a 30-minute call with founder Bhavesh Barot. We look at your catalog, markets, app list and current speed data, then tell you whether to tune the theme, add a headless section, or rebuild in Next.js. FactoryJet is a registered Shopify Partner. You see a working demo on your own data before you sign, and you own the code.