React's new Server Components

If you're into the ReactJS regime, you must have heard a buzz about the new React's Server Component.

At first I thought React Server what? Is React giving backend development for us too? Well it's complicated. And if you're too lazy or just don't have enough time to watch a 57 minute video on so as to what is React Server Components, I'll be giving you a gist of it.

NOTE: At the time of writing this article, RSC was still in development so many things that I write might be obsolete so I apologize for that in advance.

So what is RSC?

React introduced Server Components as a feature which will be added to React in future which is basically a way to make your app way faster than it already is. RSC is still a generic React component that you'll have to write using JSX.

Types of components

There will basically be 3 types of components

  • Server Components
  • Client Components
  • Shared Components

Server Components will not be downloaded on the client side. Client Components will be downloaded and rendered on the client side. Shared components can be used as both Server and Client components.

Use case of Server Components

Imagine you're having a code logic like this -

carbon.png

You have components which are responsible for their data fetching and rendering the data. So here, first data for ArtistPage component will make request and then TopTracks and so on. Until the request of ArtistPage isn't completed, TopTracks won't make any request which leads a lot of time for our app to load.

The way RSC approaches this is that when some component is required to fetch data from the server, the component is kept on the server itself, so when the client makes a request for data, that component on the server is asked "Hey, I need ArtistPage component with artistId as prop". The server component makes that request and since it is already on the server, fetching data would be very fast since for the component, the server is a local machine.

The Server Component will make the request for ArtistPage then TopTracks so on and so forth. As soon as the request is complete, the response is sent to the client component which is then rendered.

Can't this just be solved by using GraphQL with Apollo or Relay?

Of course, even facebook uses a combination of GraphQL and Relay to control it's data flow. But many apps which are old and their backend is too vast to convert to GraphQL, this solution may not be of use. Server components are not downloaded by the client which in turn helps to reduce the packing bundle which in turn leads to a faster app.

Now I may not be the best at explaining this but this is just a gist of what RSC is. There is a lot of stuff but I wanted to keep this as brief as possible.

Thanks for sticking till here.