As e-commerce continues to evolve, businesses are increasingly seeking faster, more flexible solutions to stay ahead of the competition. Combine this with a more competitive marketplace and greater demand to create experiential brand interactions, and the need for new approaches to websites and apps is obvious.

With the integration of Remix into the Shopify Hydrogen v2, the barriers that used to exist for Shopify merchants to move to composable/headless architectures are rapidly disappearing. With a thoughtful approach to this new technology and with well-planned development, there’s the potential to make the most of a move in technology that will be significant for those brave enough to take the leap.

In this post, we look at Shopify’s push to provide better tools for headless web builds through the shift of Hydrogen, Shopifys headless web frontend to now be based on Remix, improving significantly on Hydrogen v1, which missed the mark by some distance (frankly, it was atrocious).

This reinforces our view on Shopify's accelerating push towards headless commerce and their focus on this moving forward, combine the innovation with the main shopify.com domain which has recently moved to headless, using Remix for the front-end. The signals seem to point towards a more future-friendly headless (MACH) tech stack and Shopify’s commitment to growth with Hydrogen.

Understanding Shopify Hydrogen

What is Shopify Hydrogen?

Hydrogen is Shopify’s React based framework for building custom storefronts. It provides developers with the tools to create unique, high-performance e-commerce experiences using Shopify’s Storefront API. Unlike traditional setups (e.g. Shopify Liquid), Hydrogen is built specifically for headless commerce, meaning it decouples the front-end from the backend, giving developers the freedom to craft more experiential storefronts.

Why headless commerce?

The headless model separates the front-end presentation layer from the back-end systems, enabling greater flexibility. This allows businesses to use any front-end technology while still leveraging Shopify's powerful back-end e-commerce capabilities. Hydrogen fits perfectly into this model, designed to be optimised for fast loading times, scalability, and deep integration with Shopify's API.

The evolution of Shopify Hydrogen

Before Shopify existed, e-commerce businesses had a lot of work to get their online store up and running (especially for those who didn’t know coding). Shopify launched its first open-source template language, Shopify Liquid in 2006, which was designed to help developers build and customise themes for Shopify stores. Liquid allows dynamic content rendering by using placeholders and logic in templates.

Shopify, initially popular with small and medium businesses, progressed into being used by larger companies. Some of the world’s biggest brands use it for its simplicity and dependability. In 2014, the company took further steps to cater to this demand with the launch of Shopify Plus.

Although Shopify Liquid worked well for most storefronts, it had some drawbacks. As Liquid is a template language, developers struggled to deliver dynamic, fast and responsive user experiences expected in today’s modern web. It has somewhat limited customisation options that led developers to add custom scripts, which often conflicted with theme code.

To solve this problem and to adapt to the demands of increasingly more web-savvy online shoppers, in early 2021, Shopify launched its first headless e-commerce framework, Shopify Hydrogen. It started with an empty GitHub repository called Shopify/Hydrogen. The first version of Hydrogen wasn’t great, but in 2022, Shopify Introduced Hydrogen v2 (based on Remix), which signalled a turning point in the evolution of Shopify's headless e-commerce development.

Challenges and limitations of Hydrogen v1

While Hydrogen v1 delivered improved flexibility compared to Liquid, some challenges remained, especially for merchants aiming for large-scale operations. Performance issues arose when handling high volumes of traffic or complex storefronts. Also, smaller teams unfamiliar with React or headless development found the learning curve steep. There was a need for more streamlined data fetching, routing, and caching, which are critical for optimising speed and user experience in high-traffic e-commerce situations.

The arrival of Remix in the mix: enhancing Hydrogen v2

Remix, the driving force behind v2 is a full-stack web framework known for its focus on optimising user experience, performance, and developer efficiency. It handles data fetching, routing, and server-side rendering (SSR) in a more efficient and streamlined manner than many traditional frameworks. The framework is designed with a philosophy of progressive enhancement, allowing applications to work seamlessly under various conditions—whether with or without JavaScript. Remix combines the best of both worlds by rendering pages on the server and hydrating them on the client. This approach provides a seamless user experience while improving performance and SEO.

Key features of Remix as a frontend framework

• Nested Routing: Allows for complex UI hierarchies with child routes nested within parent routes.
• Data Loading: Integrates data loading into the routing system, tying the UI and its data needs closely together.
• Error Handling: Provides a structured way to handle errors at both the route and application levels.
• Optimistic UIs: Empowers developers to build interfaces that react instantly to user actions, offering a more responsive experience.
• Server-Rendered Applications: It is crafted for server-side rendering, providing a robust foundation for SEO-friendly and performant websites.
• Optimized Data Fetching: Remix simplifies data fetching with nested routing, allowing developers to load data in parallel at multiple levels of the component tree.
• Enhanced Loading States: The framework manages loading states effortlessly, contributing to a smoother user experience.

Differences from Traditional Approaches:

• Unified routing and data fetching lead to a streamlined development process.
• Data requirements are co-located with the UI components, reducing the need to manage separate data fetching logic.

Why Remix and Hydrogen are a perfect match

Shopify Hydrogen was initially introduced as a framework for building custom, high-performance storefronts, but it has taken a significant leap with its evolution into Hydrogen v2. This latest iteration with its integration with Remix, an innovative toolkit for building better user experiences on the web. This collaboration brings a wealth of enhancements to Hydrogen v2, carefully crafted to augment the development process and shopping experience.

The decision to move Hydrogen v2to be based on Remix was most likely driven by the framework’s ability to tackle some of Hydrogen v1’s performance limitations. Remix’s advanced data handling, built-in caching strategies, and optimised server-side rendering capabilities complement Hydrogen’s headless architecture, making the duo a perfect match. This union allows for faster, more scalable storefronts, improved developer experience, and better overall performance. Shopify Hydrogen partnered with Remix in v2 to deliver optimum flexibility to the developers. With the integration of Remix, merchants can now improve their SEO strategies and better target content to specific regions. This flexibility also extends to managing complex business flows and boosting site visibility. 

Remix leverages React server components, enriching Hydrogen's already robust set of capabilities. By integrating Remix, Hydrogen v2 offers developers easier data fetching and improved route handling, thus streamlining the creation of custom storefronts. The synergy between Hydrogen and Remix optimises developer experience by simplifying complexities and reducing development time with pre-built components that are ready to deploy for dynamic online stores.

Here's a quick overview of enhancements Remix brings to Hydrogen v2

• Progressive Enhancement: Ensures a smoother user experience with quick loading times and dynamic interactions.
• Development Server Improvements: Enhances testing efficiency for a better developer experience.
• Advanced Features: Incorporates features from the Remix toolkit that are tailored for a headless commerce solution.
• Simplified Developer Workflow: Reduces the need for custom code, thanks to Shopify's pre-built React components.

Hydrogen with Remix is a potent combination for Shopify Plus merchants who aim to create unique headless stores without compromising on performance and flexibility.

Key features and benefits of Hydrogen v2

Hydrogen v2 with Remix offers a range of new features and benefits, including:

• Data Loading: Remix's built-in data loading mechanisms make it easy to fetch data from APIs and other sources.
• Forms: Remix provides a streamlined approach to handling forms, including validation, submission, and error handling.
• Error Boundaries: Hydrogen v2's error boundaries help to gracefully handle errors and prevent application crashes.
• Server-Side Rendering (SSR): Remix's server-side rendering capabilities improve SEO and initial page load times.
• Code Splitting: Hydrogen v2 supports code splitting, which can help to reduce initial page load times and improve overall application performance.
• Data Fetching: It provides a way to fetch data on the server before sending it to the client, ensuring that users get fully rendered pages quickly.
• Nested Routes: Remix allows for nested routing, making it easy to manage and render different parts of a page without reloading the entire site.
• Optimized for Performance: It minimises JavaScript sent to the browser and uses modern techniques to ensure fast, smooth interactions.
• Easy Access to Data: You can now access the data users need via the new Storefront API client, which simplifies the querying process.
• Speed Optimization: Hydrogen's headless nature allows it to be optimised for speed via SSR and GraphQL technologies, making it a perfect match for handling large traffic volumes.
• Super-Fast Load Time: The adoption of Remix with Hydrogen v2 has quickened the page load time with advanced caching strategies, offering a notable boost to site performance for e-commerce applications.
• Contributes to a Greener Web: By developing streamlined, efficient designs reduces server load and energy consumption, resulting in greener web solutions. By optimising performance and minimising resource use, Remix helps create faster, more eco-friendly eCommerce sites that contribute to a reduced carbon footprint. The lighter front-end structures of these headless architectures are more environmentally friendly, leading to greener web solutions.
• Better SEO: Hydrogen v2023.10 enabled numerous developers to experience improvements assisting with SEO, such as Schema markup, PageSpeed, and site structure. When combined with a CMS such as Sanity, this has amazing potential for better content management and modelling.
• Automation: The automation feature simplifies the update of environment variables and reduces the need for manual intervention.
• Simplified Data Loading: As Hydrogen v2 is built on top of Remix, it simplifies data loading and efficient state management framework through its co-location capabilities.
• Improved Routing Capabilities: Routing is a core feature of any web application, and Remix has considerably improved upon Hydrogen's routing system. The Remix routing system is based on a more intuitive configuration with features like the root route, which can be used for layout consistency across an application, and a catch-all route ($), which is beneficial for managing unique page requirements like 404 errors.

The recent moves by Shopify Hydrogen to incorporate Remix principles mark a promising evolution in Headless commerce. With Remix’s focus on server-side rendering, initial page loading times are drastically reduced as the server handles the heavy lifting (as page load times are a factor considered by search engines for rankings).

The following table details the positive outcomes of Remix in Shopify Hydrogen v2 for e-commerce storefronts:

One thing to note is that when using external hosting, access to Shopify's native support is not as good, and the setup loses some integration advantages. To get around this issue, you can go for Shopify Hydrogen combined with Shopify’s own hosting, Oxygen.

Comparison to previous versions of Hydrogen

Shopify Hydrogen has evolved since its inception to offer a robust framework for building custom storefronts. With the advent of Hydrogen v2, which now incorporates Remix—an acclaimed framework by Ryan Florence and Michael Jackson—significant enhancements have been made compared to its predecessors.

Hydrogen v1 primarily focused on providing a set of pre-built React components for rapid storefront development. Honestly, it was terrible. However, v2 has taken a leap by improving the development process through the introduction of React server components and leveraging the Storefront API to provide a richer headless commerce experience.

Key improvements in Hydrogen v2 with Remix include:

1. Developer experience: With Remix, the developer experience is streamlined, offering new capabilities like nested routing, data loading, and caching patterns that simplify the development server setup and reduce custom code.
2. Performance: Server components mitigate the payload delivered to the browser, ensuring that only the minimal necessary code is sent. This leads to faster page loads, thus improving the shopping experience.
3. Features: Hydrogen v2 boasts new features like progressive enhancement, which allows developers to augment the user experience layer by layer based on the user's browser capabilities.

How Remix in Hydrogen v2 impacts merchants

Faster time to market

With Remix simplifying the development process, merchants using Hydrogen v2 can bring their custom storefronts to market more quickly. Whether working with a large development team or a smaller setup, Remix’s developer-friendly features make it easier to build fast, scalable sites with less effort.

Enhanced user experience

The performance improvements brought by Remix directly impact the user experience. Faster load times, more responsive pages, and seamless navigation contribute to a more engaging and enjoyable shopping experience for customers. This is crucial for reducing bounce rates and improving conversions.

Future-proofing storefronts

As Remix and Hydrogen continue to evolve, merchants can rest assured that their storefronts can scale with their business. Hydrogen v2’s architecture allows for easy updates and improvements, ensuring that businesses can keep up with the ever-changing demands of the e-commerce landscape. Combined with the future friendly aspects of decoupled architectures, where single elements are easier to change without affecting other parts of the system, for example changing the CMS.

Developer benefits: why Remix matters

Reduced complexity

For developers, Remix in Hydrogen v2 reduces much of the complexity that existed in Hydrogen v1. The framework simplifies routing, data fetching, and caching, freeing up developers to focus on crafting unique, high-quality user experiences without worrying about performance bottlenecks.

More efficient development workflow

Remix enhances the development workflow with built-in tools and features that streamline common tasks like state management and server-side rendering. Developers can now spend less time managing boilerplate code and more time delivering value to the end-user.

Modular and flexible architecture

Hydrogen v2’s integration with Remix makes it easier for developers to adopt a modular approach. Pre-built components can be reused, or completely custom solutions can be crafted with Remix’s flexible structure. This gives developers the freedom to create tailor-made solutions without starting from scratch.

Get the full potential of Shopify Hydrogen with Oxygen

Shopify Oxygen is a hosting solution that provides fast, scalable, and secure delivery for headless storefronts built with Shopify Hydrogen.

Shopify Oxygen, used with Shopify Hydrogen, offers easy hosting of storefronts directly with Shopify, so you don’t need extra hosting services. This makes the tech setup simpler and improves ongoing management.

Hydrogen’s React-based framework helps build highly customisable and fast e-commerce sites, with lots of options for personalisation and third-party integrations. Using Shopify Oxygen for hosting ensures smooth deployment and management of these storefronts, providing a powerful and efficient way to create scalable online stores with less effort.

First, to get the most out of Shopify’s full headless approach, you need to understand the three pillars of the stack:

Oxygen hosting keeps Hydrogen storefronts fast, scalable, and secure. Together, they help developers build Headless stores that offer great shopping experiences and boost conversion rates. Hydrogen sets up the framework, and Oxygen ensures fast, global delivery. This combination makes it easier for developers to create quick and responsive online solutions.

You can also read the full tutorial at Shopify Hydrogen docs to get started with Oxygen hosting.

Example of success with Shopify Hydrogen

Tremaine Emory's vision for Denim Tears was a website that not only showcased the brand's products but also immersed visitors in a rich storytelling experience. This meant creating a platform that was visually appealing, easy to navigate, and capable of delivering a dynamic, interactive experience.

A headless approach:

Kamp Grizzly's solution was to adopt a headless architecture using Shopify's Hydrogen and Oxygen frameworks. This approach decouples the front-end (the part of the website that users see) from the backend (where the data and logic reside).

• Hydrogen: This framework provides a set of React components and tools for building high-performance frontend experiences. It's particularly well-suited for creating interactive and dynamic websites.
• Oxygen: A platform for hosting Hydrogen stores. Oxygen makes it easier to manage and deploy by removing the need for server infrastructure maintenance.

Key benefits of a headless approach:

• Improved performance: Hydrogen's components and features, combined with server-side rendering, help to deliver a faster and more responsive website experience.
• Enhanced flexibility: The headless architecture allows for greater flexibility in terms of design, development, and content management. Denim Tears can easily experiment with new features and layouts without affecting the core functionality of their website.
• Simplified content management: Oxygen provides a user-friendly interface for managing content, making it easy for Denim Tears to update their website without requiring extensive technical knowledge.

By leveraging Hydrogen and Oxygen, Kamp Grizzly was able to create a website that perfectly aligns with Tremaine Emory's vision. The site is visually stunning, immersive, and easy to navigate. Denim Tears now has full control over its content, allowing it to adapt to changing trends and market demands quickly.

Additional considerations:

• Custom CMS: The use of a custom CMS like Sanity gives Denim Tears even greater flexibility and control over its website's content and structure.
• Rich media integration: A headless approach makes it easier to integrate rich media elements like videos, animations, and interactive components into the website.
• Scalability: Headless architectures are often more scalable than traditional monolithic websites, making them better equipped to handle increased traffic and growth.

(Read the entire case study here.)

The future for Shopify Hydrogen

Hydrogen v2, powered by Remix, is just the beginning. We expect Shopify to continue evolving the framework, introducing new features and capabilities to enhance the developer and merchant experience further. We can expect deeper integration with Shopify’s ecosystem, more advanced performance optimisations, more add-ons becoming available, and additional tools to simplify storefront management.

Shopify Hydrogen 2.0 is set to evolve with several exciting updates:

• Expect faster page loads and improved user experience through ongoing optimisations.
• More advanced customisation options will be available, allowing for more unique and tailored online stores.
• Future updates will offer better integration with popular third-party tools and services.
• Developers will get better tools and resources to streamline their work and build innovative solutions.
• Improvements will improve mobile responsiveness and optimise mobile app development.
• New features will provide deeper insights into store performance, customer behaviour, and marketing effectiveness.
• Content (and website) management will continue to improve, probably through integration with CMSes such as Sanity.io

You can also look at the Hydrogen change log for regular updates on progression and features.

With the performance and flexibility that Remix brings to Hydrogen v2, now is the perfect time for developers to dive in. Whether you’re building a small storefront or a massive e-commerce platform, Hydrogen v2 offers the tools needed to deliver fast, scalable, and future-proof solutions.

Our thoughts

We think that Shopify Hydrogen v2 is a significant step forward for creating impressive online stores. It can enhance the shopping experience for customers, increase conversion rates, and elevate online businesses. As a pioneer in headless technology, we’re delighted that Shopify is embracing headless stores and moving towards a more headless/composable future. Instead of seeing headless development as a threat, Shopify has adopted it, showing its forward-thinking attitude by incorporating this new trend into its offerings. The integration with Remix was an incredibly smart move!

You can get in touch with us for any queries regarding Shopify Hydrogen.