An Introduction to React Server Components

Advantages of new React feature: React server components

In this article, we will see some key points of React Server Components.

On December 21 2020, reactjs.org posted a blog on react server component as Introducing Zero-Bundle-Size React Server Components.

React Server Components are an experimental feature and not for production use.

As the main use case of the server component is to move the non-user interactive component from client to server components. And this approach is mainly focussed on

1. Good user experience
2. Cheap Maintenance and
3. Fast Performance

Client, Server and Shared Components

Server Components feature allows writing components as server and client components, React differentiate server and client using the file extensions, Let’s see how

1. File extension with .server.js is a server component
2. File extension with .client.js is a client component
3. File extension with .js are shared components, shared components act as client and server component based on where they are imported. For example, if a shared component is imported into the client component, the shared component acts as a client component, like so if the shared component imported into server component, the shared components acts as a server component.

The server component is rendered into a special format

As we know Server-Side Rendering (SSR) Framework like NEXT.js will generate static HTML in build time or on each client request but in the case of React server component, it is different.

As we see in the demo app, the server component is rendered in a special format which can be read by the client. We can see the special format in the below image

Zero Bundle Size Server Components

Now, this the buzz word in react community, What is it? Let see

As the server components are rendered in the special format and sent to the client only when required, so it is not added to the bundle. That means not added to the build.

It also adds the advantage of not loading large libraries to the client browser.

In the below screenshots, we can see how server components bring advantage for zero bundle size.

The above code is the client component, which imports the marked and sanitize-html dependencies, Which are in large size, those also download to client browser which slows the app loading and also waste the network bandwidth.

Server component solves this problem as we see below, the existing component is updated as a server component, so the user viewable code only sent to the client in a special format without marked and sanitize-html dependency code, so this reduces the app bundle size and avoids unwanted code downloaded to the client browser.

We can move non-user intractable code to the server components to Improve the app performance.

Backend Access

As we see the app runs on the backend server, it has access to the database, so it makes it easy to use SQL to query data.

React also ships a package to access PostgreSQL database using react-pg.

As we can see a select query added directly in the NoteList.server.js component in the demo app

This also denotes that the usage of Redux or Relay will be reduced, as the state management system is mostly used for remote data management.

React also ship some other packages like react-fetch and react-fs.

react-fs allow fetching data from files as below, fs denoted file system.

Server components let you only load the code that is necessary, And the major advantages are Zero bundle size and Backend access.

Need to learn more? Feel free to connect on Twitter :)

You can support me by buying me a coffee ☕