React Server Components and Shopify Hydrogen [Ilya Grigorik]

Listen to the Changelog https://changelog.com/podcast/469 (40mins in)

React Distros: tweet, blog

Try it out: https://hydrogen.new/

Transcript

when we looked at the available set of tools in the React ecosystem, we felt like the existing crop of frameworks, and particularly ones for commerce, don’t solve the right problems, or maybe don’t stack the right decisions to enable this dynamic commerce experience that we’ve been talking about.

There’s a host of really good tools for statically generated pages, but if you really wanna build a fast, server-side-rendered, React-powered experience, you have to hire some really smart people to make that work. And that gets very expensive very quickly. So most teams fail. They end up with subpar experiences, and we thought we could help. So this is why we entered into this space and said – it’s not like we’ve invented server-side streaming.

JEROD SANTO

Right.

ILYA GRIGORIK

I think I was with you guys on this show ten years ago, talking about streaming in HTTP servers.

ADAM STACOVIAK

Yeah.

ILYA GRIGORIK

So this is not new technology, but it’s a new stack. It’s a different stack, it’s a different set of choices. So now the question is “Well, I do want to use React on the server and client. How do I do that, while still delivering a really fast server-side streaming solution that is not blocking on data requests, such that I can enable the clients to quickly render at least like a visual shell of the page, provide some loading indicators, and speak to that user experience aspect of speed, not just the technical metric of speed?” Like, did you get the fast time to first byte?

JEROD SANTO

Yeah.

ADAM STACOVIAK

I can imagine us being two years down the road, having you back on, Ilya… So we’re at the opening gates of a new thing for you. You’ve put six months into this, you’ve worked closely with the React core team, so you’ve had very knowledgeable people involved with this project on how React works. But I can just imagine, to Jerod’s question, like “Why did you choose React over Vue, Svelte, and does it lock out other frameworks?”, I can imagine this as the beginning. And like any beginnings, you start from somewhere.

ILYA GRIGORIK

I think that’s exactly right. We took a pragmatic choice. So if you look at Oxygen - as I said, it’s a thing that accepts an HTTP request and spits out an HTTP response. It doesn’t matter what JavaScript code runs inside. So any server-side JavaScript is fair game. On top of that we have GraphQL, which is framework-agnostic, of course… And now it’s a question of “How do you make the right architecture decisions on the server? How you compose the response such that you don’t end up blocking the response for too long?”

[36:12] So let’s say you need to fetch product data, query some product description data, maybe figure out card discounts… Can you do those things in parallel, as opposed to sequentially and blocking, and stream that such that the user has a good user experience?” So that’s a set of choices that you have to make, and that’s a problem that we’re solving with Hydrogen.

...