React server component (RSC for short) is a new feature released by the React team, and as mentioned in the official docs: “React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so don’t feel like you have to catch up right now!”.
In this article we will introduce a few aspects of React server component features.
Is React Server Component similar to Server Side Rendering?
The word server in React server component will make you think that you’re familiar with this kind of feature, which is running react on server. In fact Server Side Rendering is not the same as React Server component.
Server Side Rendering (SSR) is a commonly used technique to render a client side single page application (SPA) on the server and have that page returned to the client with a full render. This technique allows dynamic components to be presented in the form of an HTML tag. This approach can help you with search engine optimization (SEO) when indexing does not handle JavaScript properly. It can also be very useful if the slowness of the network makes it difficult to download large JavaScript packages. On the other hand a server component is not like a full server side rendering, React Server Components can update only a small part of the UI (aka the component). They differ from typical SSR in that they never send down static HTML on the first load.
Server Components
RSC is a way to write components that will be rendered in the server side. This will solve the problem of the high number of network requests made when users are waiting for the page and the data they requested to become available.
Let’s say that we have a component implemented this way:
In this component we need to get data from some place and pass it down, this works fine and this is how react works. The only concern is that we can notice that data fetching is coupled with our component and this can be improved.
We will need to wait for every component from top to bottom to get its data after communicating with the server and then be rendered until we have all of our components ready.
The idea behind React Server Components is to move our components to the server. In this case the client makes a request and since the parent component is on the server so it can talk to the backend really fast, render the child component which also will have the same advantage (communicating quickly with the backend) and sends the response.
That’s why we call them server components, because they will execute on the server and they will never be shipped to the client.
To introduce React Server Component to the community, Facebook created a demo app. Let's go through it.
To run the app on your machine you can follow the steps here: https://github.com/reactjs/server-components-demo
● After everything is set up on your machine, let move to the file App.server.js under src folder. In fact this file contains in its name .server.js to tell React that this is a server component and we only want this component to render on the server.
● Our server component uses some client components like EditButton, SearchFiled and they have .client.js to tell React that these are client components.
● Usually Server components do not have much interactivity but they can have data requirements (the need to fetch data from the server) and we can see this clearly in NoteList.server.js under src (line 15; uncomment it after setting up the database as project README suggests)
● Client components are the ones concerned with the interactive logic, so whenever you have an interactive component it should not be a server component.
This is the first impression after looking at React Server Component, you can expand your knowledge about this topic by watching this video: https://youtu.be/TQQPAU21ZUw and try to play around with the demo code.
