Hydrogen: An Early Look at Server Components in the Wild

Rate this content
Bookmark

Shopify's Hydrogen framework has been released with an early version of React's server components. In this talk I will discuss: * What is Hydrogen? * What are server component and how are we using them? * How are they different than client and shared components? * How are server side rendering and server components different? * I'll also show examples in the wild After the talk I hope the attendees will understand the Hydrogen framework and React server components better.

7 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.

Available in Español

1. Introduction to Hydrogen and Server Components

Short description:

I'm here to talk about Hydrogen and an early look at server components. We use React 18, server components, and Vita. We have big merchants using them in production sites. Hydrogen allows you to build a headless storefront quickly. Rendering React used to be simple, but now we have server-side rendering and hydration.

Hello. Hi, everybody. I was not sure. I made so many slides, I had to delete so many to make it a lightning talk.

Anyway, I'm here to talk about Hydrogen and an early look at server components. This is me. I work at Shopify. I am part of the maintainers of this framework, which is made for headless storefronts. What's interesting about the framework is that we use React 18. We use server components and Vita. I want to talk about some of our experiences with server components in the wild. For some references, we already have some big merchants using them in production sites. Allbirds, this is merchants that already get billions. This is another one made with hydrogen. Denim tears. Atoms.

What is curious with hydrogen is that we give components so that you can build really fast this headless storefront. And for example, this one was built with one developer, three months. And in average, it takes around 12 months to do this. So I think that's pretty great. And, yeah. So they are all with server components in the wild.

I wanted to talk about rendering React. It used to be, at the beginning, we used to just have the components. And then we just bundle all together. And then send it to the browser. And then the person sees this white screen for a while until everything gets rendered. At some point, we complicated things, or I don't know, made it more interesting having server-side rendering and hydration. And I guess now what happens is we send a server-rendered version of the site, and then the client bundle. And then we hydrate it.

2. Introduction to React 18 and Server Components

Short description:

And then it becomes interactive, but still kind of awkward. We use React 18, which gives you three components: server, client, and shared. The cool thing about server components is that you don't add anything to the bundle. We still need interactivity, so we use server components for specific tasks. However, not all libraries are compatible, and data fetching can slow down the site. React provides suspense to handle heavy components.

And then it becomes interactive, but still kind of awkward. And I guess what we would like to have, especially for commerce sites, is something more like this, right? It opens, and I can buy immediately.

So right, that's why we are using React 18. React 18 gives you three components now. The server ones. Client and shared. And the client components is what we kind of already do, right? We use state, and we do this, I don't know, these functions. And they get sent to the browser. They get rendered there. Except with all the iteration stuff that I talked about that is, you know, all the magic. The new ones are server components, and these are very interesting because you do the same thing as client components. But the end result is that this is HTML that gets sent directly. And the final one is shared components. Which is something that could be in the client, or in the server as well. But I think the main thing I want to talk about is client and server components.

The cool thing about server components is that you don't add anything to the bundle. So you just send HTML directly. The way we use them in Hydrogen is we build them normally, like any other component, but we also do queries to the database. And then we put them in the components, and the end result is just send HTML directly to the browser. So why don't we use server components for everything? Because we still need interactivity. If I want to buy a different amount of products, I want to be able to choose that and do a server render. Because of that, it's maybe too much. Just some of our learnings has been that, as we roll out server components, not all libraries out there are compatible. So that's one issue that we've had. So sometimes you have to mingle around to try to make them work. A second learning is that, as soon as we gave server components to people, they started to do a lot of data fetching. This could take long, and then people are like, OK, is the server components supposed to make my site faster, but actually slower? But it's because we are data fetching a lot of stuff. So something that Reacting is giving is suspense. So what you would do is wrap this component that's very heavy in suspense, and the result is, for example, in this example here, everything is rendered, but that little part that might be a bit heavy gets later rendered and served. They are still hard to debug.

3. Server Components and the Future of Headless

Short description:

When something goes wrong with server components, there's a lack of tooling. However, server components offer great encapsulation and allow for fast rendering via HTML. The future of headless is exciting with new technologies like Edgeworkers and hosting platforms like Oxygen. Server rendering will become more prevalent. Visit addogen.new to try a demo shop with server components. We are hiring at Shopify. Thank you!

Like when something goes wrong with server components, we don't know how to take a look. There's still not enough tooling around, so that's something where it would be nice to invest in, but still, the good thing about server components is that encapsulation is really great. I can still do the same as with client components and have like, something like this, and be able to just render things fast and via HTML and use them directly.

So I guess the future of headless, I think, is exciting. We are having new things like Edgeworkers, where we can have renders really close to the user. So we can do server rendering really fast, and we have now a lot of hosting platforms like Oxygen, which is something that we have in Shopify. And because of that, we are starting to see Lighthouse cores that look like this, even with e-commerce sites that are highly dynamic and could have a lot of intricacies. Right.

So, conclusion, for me, is that server rendering will happen more. And, yeah, if you want to check it out, you can go to this website, addogen.new, and you can actually play with a demo shop that we did, and play with server components. And we are hiring at Shopify. So, yeah, that's it for me. That's all. Thank you. Thanks. It was a pleasure.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.