Introducing React Server Components

Introduction

At the end of December 2020, the React development team announced an experimental feature called “React Server Components”. Basically, it enables us to render React components on the server to improve the overall performance of an app.

It’s like a better way of doing server-side rendering.

Commonly, we use the

useEffect

hook to fetch data from the server but the problem with this method is that it is not very efficient in terms of speed.

For example, we usually retrieve data from a server by calling an API like this.

useEffect(() => {

 axios.get("Type Your API URL Here")

 .then((response) => {

  setData(response.data);

 })

 .catch((error) => {

  console.log(error);

 });

}, []);

This code works correctly, but it has some issues like increased bundle size.

The React Server Component solves the issue of bundle size. It is a significant problem because a bigger bundle takes more time to download from the server and in turn affects the performance of the app.

Initially, React Server Components are announced for JavaScript frameworks like Gatsby.js and Next.js. But, if you work on some other Server Side Environment like Python or Java then you have to wait. In the future, the React team may announce support for these languages too.

It’s completely up to you whether to learn this new feature or not. For now, it will not break your existing apps. As it is still in the research phase, so it will evolve over time. The main reason behind introducing React Server Components is to get early feedback from the React community.

Anyways, in this article, I’m going to explain to you the following three topics regarding React Server Components. It will help you get familiar with this upcoming React feature.

Why use React Server Components?
How React Server Components work?
Difference Between Server-Side Rendering and React Server Components?

Why use React Server Components?

According to an official announcement from the React team, in React Server Components we move our components from the client-side to the server-side. It helps us solve two big issues.

Bundle size.
Data fetching performance.

React Server Components are rendered on the server-side. So, it does not affect the bundle size of the client even if your React app imports new packages.

The second point is that it increases your data fetching speed because React Server Components are on the server-side which enables us to fetch data quickly from the database.

How React Server Components Work?

React team provides you a demo app through which you can test this new experimental feature. Simply download it from GitHub and run it locally on your computer.

I will explain to you the concepts of React Server Components with the help of this demo app.

After cloning the GitHub repo, open the src folder. Here, you will see a lot of files. You can distinguish between the server-side files and client-side files with the help of their extension. Server-side files have a server.js extension. Whereas, client-side files have a client.js extension.

When you run the application, you will see that app.server.js is imported in the api.server.js script. Also, notice that the code of server.js is not included in the client-side React bundle which is built using the scripts/build.js script.

It simply means that React Server Components does not affect the bundle size.

Now, open the NoteList.server.js file. You will see that it contains a database query. Meaning that React Server Components have complete access to the database. You can directly perform queries that are way faster than calling an API using the

useEffect

hook.

const notes = db.query(

  \`select * from notes where title ilike \$1 order by id desc\`,

  ['%' + searchText + '%']

 ).rows;

Difference Between Server-Side Rendering and React Server Components?

Server-Side Rendering (SSR) helps us render components on the server and then pass them to the browser. Web browsers receive this data in the form of an HTML document. This document contains a reference to React.

On the other hand, React Server Components does not get data in the form of HTML or JSON but as a Stream of information like this.

M2:{"id":"./src/EditButton.client.js","chunks":["client5"],"name":""}

It looks like JSON, but it is not JSON. At the moment, there is no standard protocol for the stream. So, it may change in the future.

Basically, the stream of data is passed through JavaScript and then converted into UI.

The main advantage of React Server Components is that we can re-fetch them multiple times. On the other hand, Server-Side Rendering can only be used once for the initial rendering.

Conclusion

The way React Server Components increase data fetching speed and reduce bundle size is going to make React stand out from its competitors like Vue.js and Angular. In my opinion, React Server Components have a great scope in future app development. It's because high-performance apps play an outstanding role in improving the user experience.

It is not released for production yet, but so far the experimental demo looks great.

At last, I would recommend you to watch the official talk below where the React team members explain the working of React Server Components in detail.