React Server Components - Under the Hood

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

A look behind the scenes of how React server components work.

In this session we'll take a look at React server components looking at:

  • - the basic concepts behind them
  • - the type of data communicated between the client and server
  • - how this data is built
  • - a look at what's running on the server side
  • - what this might mean for future projects

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

The primary advantage of React Server Components is their ability to directly interact with server-side resources like databases and microservices, which can lead to improved performance and reduced client-side load.

Hybrid components in React can be used both on the client and the server. They combine the characteristics of both client and server components but cannot use state, hooks, or direct database interactions.

The experimental concurrent mode in React 18 allows updates to be deferred, preventing them from appearing on the screen until they are completely ready, thus improving the user experience by making rendering more efficient.

React Server Components can significantly benefit large-scale web projects by reducing the load on the client-side, streamlining interactions with back-end services, and potentially improving page load times and responsiveness.

The useServerResponse hook in React is used to handle responses from the server. It typically involves fetching data using an in-memory cache, which helps manage state and server interactions more efficiently.

In index.client.js, key components include creating a root element using create-root from React's experimental concurrent mode, and wrapping content components with suspense and error boundary for robust error handling and loading states.

Challenges include managing the separation of client and server components, ensuring efficient data serialization and transfer, and handling dependencies and interactions between mixed component types effectively.

React Server Components are service-side components with direct access to the database and microservices, but they do not have access to state or effects. They perform a cold start every time, similar to PHP.

Lee Rowlands
Lee Rowlands
19 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This talk provides an overview of React Server Components. It explores rendering the root element, using react-read-in-a-tree to read the webpack manifest, and performing work and JSON serialization. The talk also discusses the drain handler and client-side components, as well as challenges and future improvements in React Server Components.

1. Introduction to React Server Components

Short description:

Hello and welcome to my session, React Server Components Under the Hood. I've been doing web development now for about 20 years. Today, we're talking about React server components and I'm going to give a very brief overview to start with. We'll start by reading the RFC. The TLDR of it is there are service side components, client only components, and hybrid components. Let's jump into my IDE and start having a look at this. We're going to start by having a look at index.client.js. We create a root element using the create-root from the experimental concurrent mode, and then we render the element to it.

Hello and welcome to my session, React Server Components Under the Hood. My name is Lee Rawlins and you can find me on most places on the internet as le-rawlins. I've been doing web development now for about 20 years. I'm based out of Australia and it's a beautiful spring day here. Obviously, this is a prerecord. Most of that time I've been working with PHP, but more and more I've been working with JavaScript.

During the day, I work for a company called Previous Next and we look after some of Australia's largest websites. Some of our sites do 80 million page views a month, so we're talking about some significantly challenging projects. If you're looking for something interesting and you're based in the Australian time zone, we're hiring, so hit us up on our careers page.

Today, we're talking about React server components and I'm going to give a very brief overview to start with, but this is an advanced conference so I'm going to go down the rabbit hole and hopefully I'm picking up from the ad session just before mine. Where to start with React server components? We'll start by reading the RFC. This goes into details about what server components are, what you can use them for, what advantages they provide, and the problems that they're trying to solve. It's also a nice video walk-through from the React team. The TLDR of it is there are service side components which have direct access to the database, micro services, etc. But as a result, they have no access to state or effects. It's a cold start every time just like PHP. There are client only components and these are just what we've always called React components. They have all the different use state hooks, etc. But they can't have children that are server components, which kind of makes sense. And then we have hybrid components which can be used on the client and the server, and of course they have the shortcomings of both of them. So you can't use state or hooks or anything, but you also can't use database. And these are basically just pure components that props in and muck up out. So we're going to go down the rabbit hole here. I'm going to switch to the IDE and we're going to start having a look at this. So let's jump into my IDE and I'll just put it into presentation mode so you can read it. So we're going to start by having a look at index.client.js. So we start off here by creating a root element, and this is using the create-root from the experimental concurrent mode, which is coming in React 18. Concurrent mode allows deferring updates from appearing on the screen until they're ready. And if you're interested more in concurrent mode, have a look at Cracking the Concurrent Mode by Sadanich Yadav later this afternoon. But basically, we create this root and then we render the element to it.

2. Rendering the Root Element

Short description:

We're rendering the root element with a suspense wrapper, an error boundary, and a content component. The content component provides a context provider for the global state. We use useServerResponse to get a response and render the read root. useServerResponse utilizes the experimental suspense cache to create a fetch by serializing the application state to JSON. On the server side, when hitting the React endpoint, the location is passed back into a JSON object and react-read-in-a-tree is called with the props.

So the element we're rendering this root, let's have a look at that. We've got a suspense wrapper around an error boundary around a content component. The content component itself has a context provider that's providing effectively a router with a selection ID, is editing, and search text, in fact, basically the global state. We're getting a response using useServerResponse and we're rendering the read root in the middle of that.

So let's have a little bit of a look at useServerResponse. This is using an in-memory cache from another experimental React API, which is the experimental suspense cache. It's creating a fetch by serializing the parameters or the state of the application to JSON and passing that as a query string. So let's load the page and put our debugger on and see what's happening on the server side when we hit that React endpoint. So I've got the app running here and I reload. And that drops me into a file called api.server.js, and this is basically a simple express app. It's got some endpoints that it's listing on, and the one we're interested in obviously is slash React. So that's just the thin wrapper around send response, and send response, all it's doing is passing out that location that's coming in in the query string back into a JSON object and calling react-read-in-a-tree with those props.

3. Exploring react-read-in-a-tree

Short description:

Let's jump into react-read-in-a-tree, which waits for webpack to finish bundling and then reads back the webpack manifest. The root app, app.server.js, contains a mix of client and server components, as well as hybrid components. The edit button sets the context or changes the location, and the note list queries the database and outputs a side-by-note component for each entry. In React rendered tree, the pop-to-node writable creates a request from the model, pushing the root segment onto segments. Start work attempts to render the segment using the React dispatcher from React shared internals.

So let's jump into react-read-in-a-tree. The first thing react-read-in-a-tree here is wait for webpack, and what that's basically doing is making sure that bundling has finished, and once that's finished it can then read back the webpack manifest, and it passes that out to JSON and calls pipe-to-node writeable with the element created for the root of the app.

So let's pause again, leave our debugger running, and let's have a look at what this root app does. So the component itself is app.server.js. So this is effectively the shell that's coming back from the server. We've got the main element, we've got a sidebar with a logo and a title. There's a search and edit button, and there's the list of notes. And then the right hand side, the main part of the page, has got a selected note that you can edit. So the things to note here, and no pun intended, this is the Notes app, but we've got a mix of client and server components here, as well as some hybrids. So the note itself is the server component, the note list is also a server component, we've got edit button and search field, which are client components, and then we've got two hybrid components that have been used as the fallbacks for the suspense wrapper, so a skeleton of the note and a skeleton of the list.

So let's have a look at that edit button to start with. So let's go to that. This is just a thin wrapper around basically setting the context or changing the location. It's using, again, the experimental in current mode to start transitions so that you're not seeing a loading page while it's loading. Let's then have a look at the note list. So this is where the server-side component is querying from the database and then for each one is outputting a side-by-note component which is also a hybrid component. So if we backtrack back to React rendered tree, here, now let's have a look at what it's doing. I might just run the debugger through until we get to there. So again there's this wait for webpack, this pop-to-node writable and let's have a look at what that's doing. So that's coming from the React server DOM webpack module. First thing it does is, let's have pop-to-node writable, create a request from the model. So the model that's passed in here is the app element, destination is the response and webpack map is the past current manifest. It sets up a train handler, so we'll come back to that, and it calls start work. So let's unpack create request first. So it's basically a plain JavaScript object with some arrays here to keep track of module chunks, JSON chunks, and error chunks. We'll come back to this later, but the main piece of work that's happening here is it's pushing the root segment onto segments, and if we look back to what that is, it's actually a segment based around the model, which is the root of the app. So this leaves us with start work. If we jump back there, what's start work doing? Well, it's wrapped around this perform work, and the perform work basically gets the React dispatcher and attempts to render that segment. Now one thing I've found interesting here is we have a look at where this React current dispatcher comes from. It's coming from React shared internals, and if I have a look at the break point there, this is actually coming from React secret internals.

4. Exploring Perform Work and JSON Serialization

Short description:

Do not use or you will be fired. Let's have a look at what that perform work was doing. The retry segment is responsible for resolving elements from the past segment. It turns the React element into a tuple format. The serialized representation of the element tree contains special nomenclature. The resolve model to JSON function converts elements into a similar format. The sidebar note list component renders multiple components, including the client sidebar note. The at five references in the JSON are replaced with client-side elements. The start flowing function flushes the completed chunks.

Do not use or you will be fired. I found that amusing. I don't know what that says about whether that's going to change in the future, but yeah, let's have a look at what that perform work was doing. So yeah, it's a reference to retry segment, which tries to render that element.

So if we have a look at this, this retry segment is responsible for resolving elements that are from the past segment, and a lot of the work happens in attempt resolve element. And this basically is attempting to translate the element into an array that we can serialize and send back as JSON. It can deal with HTML, it can deal with fragments, it can deal with server components, client components, react demos, but the net result here is it turns this React element into some sort of tuple with like the symbol, the element, its key and its props. And once it has been reduced to this format, it can be processed as a model chunk by process model chunk.

So let's jump to that. So basically we're given here the model and it's turned into a string and serialized. So if I just let the debugger run through, we might have a look at the format of the content here. So let's open this up. So as we can see here, it starts with the type of the element here. We've got the element name itself and then we've got the element's props and then one of those props is children, and then it repeats itself. So this is effectively the serialized representation of the element tree. And we've got some special nomenclature in here that the client can understand to work out what sort of element we're dealing with here. Let's have a little bit of a look at how this resolve model to JSON works, which is what generates this JSON. Basically, anything that's already been converted into that tuple format we talked about seems to be sent as is, but everything else is converted into a similar format. It seems that it has guards around things that can't serialize the JSON, so it can't serialize classes, it can serialize just plain old JavaScript objects, it can't serialize functions, event handlers, all the things that don't make sense represented as a string. If we run this through again until we get to where it's rendering the sidebar list, where we've got multiple components, we can see here the UL. This is rendering the sidebar note list, so we might just open up that note list component and have a look at what it's made up of.

As we saw before, it's got a sidebar note inside it, but if we have a look in the sidebar note itself, it in turn renders a client sidebar note. So if we have a look at the client sidebar note, we can see it has properties like ID, title, et cetera. If we look back at this JSON that's being output, we can see in here that there's a lot of these at five references. So previously, we were looking at a JSON, we could see in there, there was like div, et cetera, things that we could rationalize down to HTML elements. But now we're seeing this at five and we can see the ID and the title properties that match up with these properties over here, as well as the expanded children. And so these at fives placeholders in the JSON that's sent back, and the client will then replace these slots with the client side elements. So wrapping things up on the server side, the only thing left is that start flowing, which we had before for the drain handler. If I jump back to that. So this createDrainHandler here, it's a wrap around start flowing, and what start flowing does is flush the completed chunks.

5. Exploring Drain Handler and Client-Side Components

Short description:

The drain handler in the compression middleware flushes all the chunks, including module chunks, client-side components, JSON chunks, and error chunks. The create-from-fetch function in client-side JavaScript creates a response and starts reading from the stream. The JSON chunks are loaded first, followed by the client components. React lazy loads chunks prefixed with AT and creates elements using React create element.

So the drain handler is an event that occurs in the compression middleware, which is wrapped around the outside of the Express Server. And so when it's ready to send, it just flushes all the chunks, and that just goes through and emits the module chunks first. So that's each of the client side components, and so any new components from Webpack that need to be loaded, the JSON chunks which we looked at, and also any error chunks if something went wrong.

So let's just take a pause and restart the server without debug on. And while that's restarting, let's have a look at client-side components again. So we'll jump all the way back to that client cache, and jump into this new server response. So that's running, I'll just minimize that away, and let's have a look at this create-from-fetch. So we're back in the client-side JavaScript now. create-from-fetch has got two functions here. It creates a response, and it starts reading from the stream. Let's have a look at create-response first. And not surprisingly it's creating something to pass that JSON back out, and the guts of it looks to be here with this pass model string and pass model tuple.

So let's move to the browser, and let's put our debugger on those methods. So I'm going to open this up in my debugger, and I click load. I've got some preset breakpoints here, and I'm going to reload the app. So we can see that we've got JSON pass coming in here, and so the first things that are coming back from those chunks are the components, the client components. So this has got the chunk names here from Webpack as well, so that we can load in those imports. Let's run through. So that was the client search button, now we've got the client edit button. I've got the SOAD BAR NOTE client component. And then we get to our actual JSON that we sent back across the wire. We can see in here again, we've got these references to the AT5, and basically what will happen is we'll end up in the ones that are prefixed with the AT. React takes care to lazy load those chunks and inject them back in. And then for the tuples, if we have a look at this one here, we've got the symbol was React element, the element itself is p, and then we've got the element properties. So for each one of those items in the JSON, React create element is being called, and creating elements and putting them where they need to be. So let's stop that and jump back to my slides.

So I guess the question after looking at this is, what's next? And, well, when is this production ready? And the best place to answer that is to see the open areas of research in the RFC. And it's not a short list. You know, one of the things you probably noticed before that the Express app was passing a hardcoded location param. So there's some work to do to make that generic, and that's identified on their list, they've got that listed there as a routing.

6. Challenges and Future Improvements

Short description:

They're working on solving the hardcoded endpoint issue by focusing on frameworks first. Improving developer tooling, especially for identifying components rendered on the front end and back end, is a priority. The wait for Webpack in the bundling process needs improvement. Re-rendering the entire app for each server request is a challenge that will be resolved.

So that hardcoded endpoint is something that they're hoping to solve by coming up with solutions for frameworks first, and then lessons learned in those frameworks can be things that are applied more generally. They also want to do some work to improve developer tooling. You know, React in the browser has got an excellent extension for helping you debug what's happening. But when you've got some components being rendered on the front end and some components being rendered on the back end, you know, being able to identify that in the tree is going to be critical.

Bundling. The wait for Webpack bit feels a bit eek. You know, what it's basically doing is waiting until, you know, it can see index.js written to disk, and then it knows that Webpack's finished, and then it knows it can read that JSON. So it feels like there's a bit of work to do there. And then pagination and partials. One thing you've probably noticed from the fact that we're sending back the global context to the app is that we're re-rendering the whole app every time a request goes back to the server. So this obviously less than ideal. So I think that's one of the things that will be resolved.

So yeah, I hope you enjoyed that. Thanks for sticking out to the end. It was really interesting topic to learn about, and I enjoyed getting my hands dirty with the debugger there. If you've got any questions, feel free to reach out to me. As I said, the username's L.A. Rowland. I'll be on the GitNation Discord. I'm also on Jamstack, Slack, and you can reach me on Twitter if needs to.

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 2023React Advanced 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.
A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.