Nosto & Shopify Hydrogen

Hydrogen is Shopify’s headless framework, originally launched in 2022. Since launching Hydrogen 1 on the React-based framework, Shopify began looking for ways to improve and after extensive feedback and testing, they decided that the opensource framework Remix (which they acquired shortly after launching Hydrogen 1) was the best way to do this and expand Hydrogen. Which leads us here: Hydrogen 2, making it easier than ever for merchants to separate front- and back-end, to build highly customized and performant storefronts on the Shopify platform. 

The latest version, Hydrogen 2, is built on a combination of React and Remix, and offers an improved developer experience, heightened performance, and a suite of new tools to unlock higher levels of productivity and resilience across the stack. You can get the low down on all that’s new with Hydrogen 2 in Shopify’s update.

Decoupling the front end of your store from the back-end gives merchants flexibility in design, optimized performance and reduced load times, as well as broader omnichannel personalizaton. 

Some of the pros to going headless include: 

1. Highly customizable

The most popular reason merchants decide to go headless is the flexibility it promises both in terms of both design and functionality. You essentially have free reign when crafting your customer experience and can build from the ground up to your exact needs/specifications, taking complete control of the content layer. Plus, with the front-end separated, it’s less risky to make changes without affecting the underlying technology that supports it. This also has benefits in connecting different types of back-end logic, like a separate CMS.

2. Site speed

Another commonly cited reason for going headless is the improvement it makes to site performance, which is one of the most significant factors in determining bounce rate (and also something noted by Google’s algorithm; better performance equals better SERPs’ performance). With the a latest iteration of Hydrogen being built on the Remix framework, a key benefit here is significantly reduced load times, equaling faster, smoother commerce experiences.

3. Broader omni-channel presence

Modern customers expect to interact with your brand across many digital touchpoints beyond your website: Progressive Web Apps (PWAs), mobile apps, marketplaces, billboards, POS, voice search, and more. Headless enables you to re-use your content, catalog and business logic across all these touchpoints through the likes of omnichannel capabilities, while delivering a broader, seamless user experience with fewer constraints.

Hydrogen is Shopify’s modern, React-based toolkit to accelerate headless development on Shopify. Hydrogen 2, the latest version that’s built using Remix, offers an improved developer experience (check out this post for details of what’s new), even better performance, and a suite of new tools to unlock higher levels of productivity and resilience across the stack. Shopify acquired Remix at the end of 2022. Remix is a server side framework that uses “nested routes” to load data in parallel and deliver HTML documents almost instantaneously. That means reduced load times and quicker commerce experiences for shoppers.

Dion Almaer, Shopify’s VP of engineering, had this to say: “Remix will tackle challenges that developers building on Hydrogen have encountered around data loading, routing, and error handling… Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time.”

There are some great resources and documentation provided by Shopify to help you get started. You can find them here:

• Hydrogen overview
• Hydrogen components, hooks, and utilities overview
• Build a Hydrogen storefront
• Hydrogen v2 developer preview: onboarding guide

Alternatively, in the next FAQ, you’ll see links to our GitHub repository with a live demo store and code samples.

We’d also recommend asking your agency for advice. And, if you’re on the lookout for a new agency to help you get started with Hydrogen 2, we’d be happy to make you a recommendation. Just reach out!

Yep! Our tech team’s created a designated GitHub repository where you can access a demo store showing Nosto on a Hydrogen 2 storefront, with accompanying code samples.

Business as usual! Merchants on Hydrogen 1 or 2 will get full support from Nosto, so you’ve nothing to worry about.