Dynamic by Default: Shopify’s Hydrogen, a New Take on React
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.
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?
“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.
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.”
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.