React Server Components

Rate this content
Bookmark

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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

React server components are a way to render components exclusively on the server, optimizing the amount of JavaScript shipped to the client. They allow for server-side rendering of components that do not require client-side interactivity, thus reducing the overall bundle size and improving performance.

React server components improve performance by reducing the JavaScript bundle size shipped to the client. By handling more rendering on the server side, only necessary interactive elements are shipped to the client, which minimizes the amount of data and processing needed on the client side.

Yes, React server components can be integrated with frameworks like Next.js, which handles much of the complexity involved in server-side rendering and component management, providing a more streamlined implementation process.

Implementing React server components in production can be challenging due to the need for architectural changes, especially if transitioning from a different setup. Deployment complexities and managing server actions can also pose difficulties.

Server components offer several benefits over traditional client-side rendering including faster initial load times since the HTML is generated on the server, reduced client-side computation needs, and better handling of data fetching which can lead to an improved overall user experience.

Debugging React server components typically involves using development tools provided by frameworks like Next.js, which offer built-in error handling and debugging aids. Developers can also use node-based tools to monitor and debug server-side rendering processes.

Tejas Kumar
Tejas Kumar
27 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.
Available in Español: Componentes de Servidor React

1. Introduction to React Server Components

Short description:

This conference is extremely special to me because I live in Berlin. I've spoken at many conferences around the world, but in Berlin, this is number two. I'm here to talk about React server components in depth. How many of you are using React server components? That's why I'm here.

♪ Listen, I, okay, this is... Phew, man, I've never been introduced like that. Thank you, thank you, thank you, brother. That was tremendous. Look, this conference is extremely special to me because I live here. Berlin, I call it home. I've lived here for eight years and it's an absolute honor and privilege to be able to be here and talk to you today in my home city.

This year, I've spoken at somewhere upwards of 30 conferences all around the world, but in Berlin, this is number two. And it's extremely special to me to see all of you here from Belgium, from the Netherlands, all these places coming here, not just to watch me, but to celebrate React together, right? And that is a special thing. So I just want to really quick give it up for you for coming, for Git Nation. Amazing. Incredible.

I feel like I have an intro slide, but apparently I don't need it thanks to Nathaniel. My name is Tejas, pronounced like contagious. I'm not, don't worry. And over the years, I've worked in tech now for many, many years. 20 plus, I lost count. And over the years, I've had the privilege of working with and at a number of various teams that I'm really thankful for. And really, it comes out of that that I want to share these things with you today, okay? Today, I'm a consultant. I help developer-focused companies do DevRel. And if you need help with that, I'm happy to chat after. But that's not what we're here to talk about today. Today, we're here to talk about React server components. We're going to talk about it in some depth. We have 20 minutes, so we'll see how far we get. The last time I gave this talk, it was 45 minutes, even though it was in a 20-minute slot. And then the GitNation folks were like, never again. In fact, it was the last talk and it went over time, so now they're like, we'll give you the first talk, so you can't go over time. Anyway, how many of you are using React server components? Okay, that's, I'd say, 1% if that of the room, which is fine. I mean, it's new, and that's why I'm here.

2. Mechanism of React Server Components

Short description:

What I want to talk to you about is the mechanism of React server components. I'm not going to talk to you about how to use it. We'll cover server components from the theory side, look at the problems they solve, and how you can implement server component rendering-ish in practice. Let's get started talking about server components and how React enables web applications to react well and fast.

What I want to talk to you about is the mechanism of React server components. So I'm not going to talk to you about how to use it. The prevalent way of how to use it is to actually just use Next.js or a framework that handles the complexity for you. I think this is relatively straightforward. You can find it, Tobias from Marcelo is here, he'll probably talk to you about it, et cetera. What I want to teach you is the mechanism, how they work. Because I have a problem accepting high-level black box abstractions as an engineer.

Anyone, am I alone in this? Anyone else? Yeah, okay, most people. And so if you tell me, just use Next.js, and it's figured out for you, I'm like, okay, that's awesome, thank you, Next.js team, but how does it work so I understand the underlying mechanism? Okay? And so that's what we're here to talk about today.

In our time together, we will not cover two things. We're not going to cover the basics of React, I assume you know this. And if you don't, we can chat separately, but I have 20 minutes here. And we will not cover server actions because at the time of giving the talk, a lot of the React-specific stuff with server actions is in Canary, meaning it's pre-release, it's not production-ready. You can use server actions in Next.js, but again, I'm not ready to talk about that in a React capacity. What we will talk about is server components from the theory side. We'll look at the problems they solve, and then we'll look at how you can implement server component rendering-ish in practice. We'll look at the boundaries between server components, client components, what they mean and how they fit together.

Okay, with that, I have 15 minutes left. Wow. With that, let's get started talking about server components. Actually, let's zoom out a little bit and talk about React. I recently had the privilege of writing a book on React, and so I'm thinking, like, first principles style. React, by its name, is a piece of software that enables web applications to what? To React, to user interact. That's the whole point. And you might think, okay, so I click a button and React does stuff. Exactly. But it's not just about reacting. It's about reacting well. It's about reacting fast. It's about when some expensive CPU work is happening, right? You're rendering a big list, and then a user enters a keystroke in an input.

QnA

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
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
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.
And Now You Understand React Server Components
React Summit 2024React Summit 2024
27 min
And Now You Understand React Server Components
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
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
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Top Content
Watch video: Server Components: The Epic Tale of Rendering UX
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.

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
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
React Summit US 2023React Summit US 2023
160 min
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
React Summit US 2023React Summit US 2023
104 min
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.
Building Reusable Server Components in NextJS
React Summit US 2023React Summit US 2023
88 min
Building Reusable Server Components in NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 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
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.