Exploring React Server Component Fundamentals

Rate this content
Bookmark

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.

Daishi Kato
Daishi Kato
21 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

Available in Español

1. Introduction to React Server Components

Short description:

Hello everyone! I'm very excited to give a talk this year about React Server components. I'll share what I've learned so far, explore the fundamentals of RSC, and discuss my project, Waku. RSC stands for React Server Component, and it's about using React in places different from the browser. The core of RSC is serialization, enabling React to work on separate memory spaces. Let's proceed with the demo using the canary channel of React and the package React-ServerDOM-webpack.

Hello everyone! I'm very excited to give a talk this year, especially because it's about my new project. It's about React Server components, which I've been learning and experimenting for several months.

Today, I'm going to share what I've learned so far. My name is Daishi Kato. I'm an open source developer, and some of my popular projects are Jotai and Zustand. You may know, but they are both for state management. They are like competitors, but it's actually good because they bring more feedback to us. Currently, Zustand is pulling ahead and Jotai is chasing. At React Day Berlin 2022, I spoke about Jotai. It's an honor to be here speaking again this year.

In the first part of this talk, we'll explore the fundamentals of RSC. I have a demo using just Node.js without any frameworks. It's not live coding, but I hope you'll find it enjoyable. If you're interested, you can try it on your own later. This demo is primarily for library authors or those who want to understand RSC's internal behaviors.

The second part we'll discuss my project, Waku. It's a React framework focusing on RSC. Let me start with an answer of mine. What is RSC? RSC stands for React Server Component. However, the server part in the name might be misleading. It's more about using React in places different from, say, the browser. And just a quick note, you can technically use RSC in browsers, too. Going deeper, what are the core of RSC? I believe the essence is serialization. Before RSC, React worked within a single memory space. But with RSC, React can now work on separate memory spaces. This could be between a server and a client, two servers or even within the browser's worker threads. Now, let's proceed with the demo. Let's begin by setting up a test project. For now, we'll use the canary channel of React until a stable version is out. The package React-ServerDOM-webpack is here to give us the RSC features.

2. Introduction to RSC and SSR

Short description:

We'll start with a simple example without RSC. It's traditional React, and it's totally unrelated to RSC. This JSX element isn't serializable. Let's look at the traditional server-side rendering with our next example. Server-side rendering or SSR is a process to generate HTML content on the server. SSR can technically run on browsers too. Now, let's examine the code. We utilize the RenderToPipeableStream function from react-dom-server. This function is available in the stable version of the react-dom package. Running this code will display the resulting HTML. In our next example, we'll see how RSC works in comparison to this SSR example. Let's explore how the serialization aspect of RSC performs. In this demo, we use the renderToPipableString() function from react-server.webpack/.server.

It's designed specifically for webpack because some of its features have a close relationship with bundlers. However, we don't use webpack in our demo anyway.

Now let's move on. We'll start with a simple example without RSC. Here's our first example. It's traditional React, and it's totally unrelated to RSC. Looking at the code, you'll find we are simply defining an AppComponent and displaying the result with console.log. When you run the code, it will display a JSON object. This is often referred to as a React element or a JSX element. What's key to note here is that this JSX element isn't serializable. For example, it contains a symbol for its special typo property. In this example, the type property is a function which is not serializable. We'll explore how RSC addresses this shortly, but before that, let's look at the traditional server-side rendering with our next example.

Server-side rendering or SSR is a process to generate HTML content on the server. It's important to note that SSR is different from RSC. While RSC may run on the server, it doesn't produce HTML. By the way, SSR can technically run on browsers too. Now, let's examine the code. We utilize the RenderToPipeableStream function from react-dom-server. This function is available in the stable version of the react-dom package. Since RenderToPipeableStream returns a stream, we can't simply use console.log. Instead, we direct it to Process.standard.out. Running this code will display the resulting HTML. SSR is commonly used during the initial page load to enhance user experience and search engine optimization. In our next example, we'll see how RSC works in comparison to this SSR example.

Now, let's explore how the serialization aspect of RSC performs. In this demo, we use the renderToPipableString() function from react-server.webpack/.server. Do note, this is available only in the Canary version. Except for importing the function from a different package, the rest remains the same as the previous example. Running this code gives us a JSON-like output.

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

Simplifying Server Components
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Top Content
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.
Server Components: The Epic Tale of Rendering UX
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
A Practical Guide for Migrating to Server Components
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.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
React Server Components
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

Workshops on related topic

Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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 Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
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!
Build a Custom Storefront on Shopify with Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
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.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
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.