React Server Components, the most recent paradigm shift was introduced by the React team. React components can now run exclusively on the server!

So, my goal for this blog is to help understand the basics of React Server Components. what it is, how it functions, what the advantages are, and how it relates to other things like client-side and server-side rendering.

A Quick Overview of Server-Side Rendering

It's helpful to understand Server Side Rendering (SSR) to put React Server Components in perspective.

In React applications that use a client-side rendering strategy, the user would receive an HTML file.

<html>
  <body>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
  </body>
</html>

Everything we need to mount and run the application is included in the bundle.js script. React launches into action after the JS has been downloaded and parsed, summoning all of the DOM nodes for our whole application and storing it in that empty <div id="root">

The issue with this strategy is that all of that work requires time. At the same time, the user is gazing at a white, blank screen.

Server Side Rendering was designed to improve this experience. Instead of sending an empty HTML file, the server will render our application to generate the actual HTML. Now the user receives a fully formed HTML document.

But we still require React to run on the client to handle any interactivity, that HTML file will still contain the <script> tag. However, we set React up to operate slightly differently within the browser; rather than creating every DOM node from scratch, it uses the HTML that already exists. We call this process hydration.

Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers.

SSR in a nutshell. A server generates the initial HTML so that users don't have to stare at an empty white page while the JS bundles are downloaded and parsed. Client-side React then picks up where server-side React left off, adopting the DOM and adding interactivity with hydration.

Let's take a really common use case where we need to make a database query to render some information on the page.

1. First Paint — The user is no longer staring at a blank white screen. The general layout has been rendered, but the content is still missing. This is called FCP (First Contentful Paint).

2. Page Interactive — React has been downloaded, and our application has been hydrated. Interactive elements are now fully responsive. This is called TTI (Time To Interactive).

3. Content Paint — The page now includes the data from the database and renders it in the UI. This is called LCP (Largest Contentful Paint).

When I look at the above SSR graph, I can't help but notice that the request starts on the server. Instead of requiring a second round-trip network request, why don't we do the database work during that initial request?

Instead of bouncing back and forth between the client and server, can we do our database query as part of the initial request, sending the fully populated UI straight to the user? This is now possible using React Server Components.

React Server Components

With React Server Components, we can create components that run exclusively on the server. This allows us to do things like write database queries right inside our React components!

The key thing to understand is Server Components never re-render. They run once on the server to generate the UI. The rendered value is sent to the client and locked in place.

Many React APIs are incompatible with Server Components. For example, we can't use state, because state can change, but Server Components can't re-render. And we can't use effects because effects only run after the render, on the client, and Server Components never make it to the client.

In the React Server Components paradigm, the “traditional” React components we're familiar with are called Client Components

Client Components render on both the client and the server.

Server Component renders only on the server.

Compatible Environments

Currently, there's only one way to start using React Server Components, and that's with Next.js 13+, using their brand-new re-architected “App Router”.