An Introduction to React Server Components
Tags: react, javascript, redux, webdev
Published: 2021-01-25 16:53:52

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](https://reactjs.org/) posted a blog on react server component as [Introducing Zero-Bundle-Size React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html).

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](https://nextjs.org/docs/basic-features/pages#pre-rendering)** 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](https://github.com/reactjs/server-components-demo), 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

![1_-6cUSKb6Of_bOQl98URo4g](https://dev-to-uploads.s3.amazonaws.com/i/3o1umkpac3epsrxddpb1.png)

### **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.

![Screenshot 2021-01-23 at 9.33.10 PM](https://dev-to-uploads.s3.amazonaws.com/i/i1isl4lbqxwhsj2426iu.png)

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. 

![Screenshot 2021-01-23 at 9.34.49 PM](https://dev-to-uploads.s3.amazonaws.com/i/0ngrf0e487notu2gha30.png)

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

![1_lTQCctVel8rO4tLBOVxd-Q](https://dev-to-uploads.s3.amazonaws.com/i/3fw1hc1br3ol9ytqkgmy.png)

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.

![1_-KUbuL9rA_HT2xh6y8gRNw](https://dev-to-uploads.s3.amazonaws.com/i/olpdt7v544a8xexplf8z.png) 

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](https://twitter.com/Nilanth) :)

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**