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.

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

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
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.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
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.
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.

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.