React Server Components

The React Team recently announced new work they are doing on React Server Components, a new way of rendering React components. The goal is to create smaller bundle sizes, speed up render time, and prevent network “waterfall”. RSCs differ from Server Side Rendering as we’ll see.

What are React Server Components?

The introduction of RSC splits React components into three categories.

  • Server Components
  • Client Components
  • Shared Components

Server Components specifically are denoted by a .server.js extension and follow these criteria per the React Team’s RFC. The most notable among these are that Server Components can access server-side data sources, such as databases, files systems, or (micro)services resulting in faster reads and rendering.

How is this different from SSR (Server Side Rendering)?

The rendering of Server Components differs from SSR in that they are not rendered as HTML, but as special format that’s streamed into the client. This format is similar to JSON but currently has no standard protocol. A response would look something like this

M1: { 
  "id": "./src/SearchField.client.js", 
  "chunks": ["client5"], 
  "name": "" 

This allows the Server Components to be re-fetched to re-render data, unlike SSR which only speeds up the initial rendering.

This also reduces client-server network waterfall by handling data loading in the server, fetching the minimal amount of data needed from within the component.

Other types of components

RSC introduces two other categories, Client Components and Shared Components.

Client Components are the traditional components used in the client with React, denoted by a .client.js extension. They can be rendered by Server Components, though they cannot render Server Components and do not access data sources such as databases or file systems.

Shared Components are components that can be used on the client and server. They must all the constraints for both client and server components, as outlined here. They are denoted by a standard .js extension.


React Server Components are an exciting development and may change how developers write React in the future. React Server Components will be rolled out in the future on an experimental basis, integrating first with SSR frameworks like Next.js.

You can find out more by reading the RFC and cloning the demo project. You can also watch the demo video with Dan Abramov and Lauren Tan here

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published.

Related Blog Posts
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]