Headless Shopify Development
As eCommerce has become engrained in our day-to-day life, building an eCommerce experience that stands apart from the rest has become a key part in building a platform that won’t hold your brand back.
When flexibility, customization, and performance are at the forefront, it makes sense to look into headless eCommerce solutions, but with all the recent developments in the space, it can be hard to decide the right direction. We’ll break down a few of our top options below:
Working with Next.js
Background
Next.js is a mature platform from Vercel that has become the de-facto platform for building full—stack React applications. Now on Version 13, their team has iterated and executed rapidly with a focus on developer experience at the forefront.
Next.js provides an open platform for any direction you want to take it – build APIs, build static sites, or build server-side apps with complex caching policies, Next.js makes it all easily possible. Next.js has a tight integration with the React team and the Vercel platform, so they often release cutting-edge, experimental features in tandem.
eCommerce
Next.js’s reputation as "The React Framework” also led it to become a favorite for building rich, interactive eCommerce experiences for the web. Paired with the Shopify Storefront API and a headless CMS like Sanity, sites built on Next.js have been able to harness the rich community and ecosystem of tooling built around Next.js and React.
Next.js makes it easy to generate static sites, or for large sites when quicker updates are necessary, Incremental Static Regeneration can be used to invalidate a single page in the cache rather than rebuilding the whole app. And as of v13, Next.js also provides an intelligently cached server-side rendering solution for faster first page loads.
Next.js’s reputation as the “everything framework” also led it to become a favorite for building rich, interactive eCommerce experiences for the web.
A New Challenger: Shopify Hydrogen
Background
Hydrogen is the new(-ish) headless framework from the Shopify team – version 2 of Hydrogen was a complete rewrite based on Remix, which Shopify acquired in 2022. Hydrogen is purposely built with Shopify in mind, and has tight integrations with Shopify via React Context Providers.
Pros and Cons
As the newer of the two, there are a few drawbacks to Hydrogen at the moment. With a smaller community, Hydrogen lacks the ergonomic development experience of Next.js, and can sometimes leave you with undecipherable error messages. It also lacks some plugins and extensions that have been built for Next.js in the React ecosystem. We expect these things to be solved over time as Shopify refines the experience with the future of Shopify.
However, being built internally by Shopify comes with some benefits. Alongside Hydrogen, Shopify also launched Oxygen, their own (free!) hosting platform that tales the place of Vercel in this case. This means no costs associated with build time or bandwidth, and a hosting experience tailored specifically to Hydrogen. Hydrogen was also built to solve the age-old problem of configuration of convention – headless environments have historically been too unique and disparate, making it difficult to build apps for headless stores, or recommend any consistent standards for building and maintaining store.
Hydrogen was also built to solve the age-old problem of configuration of convention – headless environments have historically been too unique and disparate
When Shopify Themes Might Make Sense
Headless stores are not for every brand – unless a specific reason (e.g. page routing, custom shopping experiences) necessitates headless, it often doesn’t make sense for brands with <$1 million in annual sales. There is typically an additional maintenance cost, so it’s important to be realistic about the investment required for building and maintaining a headless site for the long term.
And though we love being able to harness the power of React to build rich shopping experiences, Shopify themes have become significantly more robust and customizable lately with the addition of Metaobjects and Sections Everywhere. Shopify themes also generally allow closer integration with Shopify Apps (for better or worse).
We Can Help You Decide the Right Platform for Your Brand
It’s a good problem to have when we have too many good tools to build eCommerce sites. Weighing the needs of your brand between customizability, following convention, and resources will help you understand which of these might be the right one for your next headless site.
Need advice or development help with your headless eCommerce builds? Reach out via email or get in touch.