Shopify’s Hydrogen, a New Take on React – InApps 2022

Shopify has launched a new React-based web development framework, called Hydrogen. It’s open source and available now as a developer preview. Hydrogen is similar to Next.js, perhaps the most popular React framework, only it was built especially for the needs of e-commerce developers. In another twist, Hydrogen was developed on the premise that “commerce needs to be dynamic” — which means the focus is on fast server-side rendering. This reverses the default React approach of client-side rendering.

I spoke with Shopify’s Principal Engineer, Ilya Grigorik, to find out why the company built a custom React framework for its e-commerce customers — and how it fits into the existing JavaScript framework ecosystem.

How Hydrogen Compares to Next.js and Jamstack

In an introductory article, Grigorik described Hydrogen as “a React-based framework optimized for commerce and specialized to be powered by Shopify APIs and infrastructure.” So I began by asking him why existing React frameworks — such as Next.js — were unable to meet their needs?

To answer this, he gave a long explanation of how React frameworks have bifurcated. He first talked about “traditional React,” where “everything is hydrated on the client, everything is done in the client, and you forfeit a lot of performance by doing so because you don’t leverage server-side rendering.” He then compared this to the more recent Jamstack approach, where it’s common to pre-build files and deliver them via edge networks. But this too wasn’t appropriate for Shopify, because “as a [Jamstack] developer, you’re into the really complicated world of frontend development, where all this JavaScript starts to add up and it becomes gnarly and really hard to manage.” He cited A/B testing, which is common in e-commerce, as one example of a developer task that can become overly complex in Jamstack.

“So, we saw a gap,” Grigorik continued, “when we surveyed the existing tools, where it’s really hard — not impossible, but really hard — to get server-side rendering and dynamic commerce working well together.”

Hydrogen, then, is closer to the Jamstack approach than traditional client-side React — except that it aims to make frontend development less complicated. As Grigorik put it, Shopify’s framework helps developers “unlock fast server-side rendering while still having the optionality of A/B testing — and all these things — in a coherent way.”

Why React and Not Web Components?

So if less complexity was required for Shopify developers, why not choose a framework based on web components — a growing web-native approach to creating components in web apps. As independent developer Jared White commented on Twitter, web components would “allow Hydrogen to be used with any JS view library” — not just React.

Grigorik replied that React was simply the most pragmatic choice for Shopify.

“We talked to our merchants, and they told us loud and clear that the majority of them were using React and have easy access to the developer ecosystem of React tools. So that was an obvious and right place to start. We worked together with the React core team to figure out what’s on the horizon, in terms of performance and capabilities, and how it can best apply to commerce. As a result, we’re able to leverage some of their upcoming technology — like React Server Components — and work with them to validate it and actually prove it out on Shopify.”

The Role of React Server Components

React Server Components (RSC) is an experimental feature introduced by the React team at the end of last year. Next.js also makes use of RSC, making it another point of similarity between the two frameworks. Vercel, the company behind Next.js, wrote earlier this year that React Server Components “allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.”

I asked Grigorik how the use of RSC in Hydrogen differs from its use in Next.js?

“We’re big fans of what they’re building,” he said, regarding Vercel and Next.js, “and in many ways the architecture is similar. But they are approaching it from another direction. Vercel is about: build it, push it to the edge, [and] then add layers of dynamic capabilities. We think that given the needs of commerce, we actually need to start with the inverse. Which is, assume everything is dynamic by default, and then expose the right APIs and capabilities to be static.”

Although “dynamic by default” is the position Hydrogen takes, that doesn’t mean there isn’t a place for rendering static files in the framework. Indeed, in his introductory article Grigorik wrote, “This is not a debate about dynamic vs. static. You need both.” He noted that “some, or perhaps even substantial parts of some storefronts” can be “cached and served from the edge” (the traditional Jamstack model).

The dynamic-first approach has proven to be the preferred one for Shopify customers, said Grigorik. However, he thinks the key is to give vendors the flexibility to scatter in React’s traditional client-side functionality as needed. Developers also have other options they can tweak, for instance choosing a specific timeframe for caching a certain page.

“Instead of pushing everything to the client, or requiring that you do everything on the server,” Grigorik said, “we’re saying, look, you have the full power of React. If you want to do things that React excels at on the client, be my guest. But at the same time, you have all the niceties of being able to write React code — JavaScript code — that runs on the server.”

React Community Reactions

Finally, since much of the React revolution was driven by client-side rendering and the minimizing of server-side rendering, I wondered how the React community has (ahem) reacted to Shopify’s reversal of this trend?

To answer this, Grigorik referred back to React Server Components, which Shopify has been working on for five months (three of those months in close collaboration with the React team).

“One advantage that we have at Shopify, even compared to let’s say Next.js, is that we’re starting anew. We don’t have an existing ecosystem of apps that we need to move over to this new world of React Server Components.”

Because Shopify customers that choose to use Hydrogen will build their storefronts afresh, using JavaScript, Shopify was “willing to make some more opinionated and forward-looking bets about technology choices,” said Grigorik. So it chose to build around React Server Components and create a “dynamic by default” framework.

Server-Side Is Back… or Is It?

It’ll be interesting to see whether Hydrogen leads to a groundswell of web developers going back to more of a server-side approach, after a number of years where client-side rendering via React was all the rage.

The React team, remember, still sees React Server Components as a work-in-progress. Next.js is certainly experimenting with it, but Shopify has gone even further in its commitment to the approach. It remains to be seen if this new, modern form of server-side rendering can work for a wider range of sites than just e-commerce.

List of Keywords users find our article on Google: