What is React Server Components?

In Dec 2020, some new features are shared by the React team. Here, a detailed discussion about the React server components is available. But before that, please note these features are in the experimental phase as of now.

Do you know what is react server component is?

To increase the productivity and performance of an application, programmers use the concept. It allows to re-write React components rendered on the server.

Also, major challenges faced during development are the number of network requests and bundle size.

It has been seen, users have to wait for a longer time for the page or data they have requested because of the high number of network requests.

Further, to get rid of the second problem that is the bundle size, the developer uses dead code, minification, and code splitting. Being a React developer, I am sure you are quite aware of it.

How do React Server Components eliminate the problem?

Above stated problems are efficiently managed by React server components. Apart from that, the new features help build an effective and fast application.

Here, developers have the flexibility to offload any particular component completely. Also, the method is applicable to their dependencies to the server.

As a result of the concept, now users will not have to wait. Also, as per the initial tests conducted by Facebook, React server components deliver a 29% smaller bundle size which is nearly 1/3rd of the total.

Furthermore, this experimental concept of React server component follows Express.js. It gives an assurance of the performance because you need a server for the rendering of the components and is made possible by Express.js.

What is server-side rendering?

The concept of server-side rendering refers to the capability of an application to convert HTML files into a completely rendered HTML page for the client. And the activity takes place on the server.

This means when a user makes a request to the server, the HTML page is formed and user data is fetched to the user’s system through the internet.

Post that, the browser makes all the required structuring of content and presents the page to the user. All these processes take place in milliseconds only.

What is client-side rendering?

With the concept of client-side rendering, the developers are able to render the websites completely with JS (JavaScript) in the browser. Rather than having multiple HTML pages per route, here each route has been created dynamically in the browser.

How does React Server Component work?

The components are Rendered at the server and are fetched from the backend. The activity eliminates the problem of component-rendering along with fetching data.

Developers get some packages in the experimental phase of the React server components in the package.json file:

"react": "0.0.0-experimental-3310209d0",
"react-dom":"0.0.0-experimental-3310209d0",
"react-fetch":"0.0.0-experimental-3310209d0",
"react-fs":"0.0.0-experimental-3310209d0",
"react-pg":"0.0.0-experimental-3310209d0",
"react-server-dom-webpack":"0.0.0-experimental-3310209d0",

Here the React server component is enabled through, “react”, “react-dom”, and “react-fetch”, while to interact, with input and output system groups of wrapper packages are added and they are “react-fs”, “react-pg” and react-server-dom-webpack”.

Conclusion

So, guys, these are about the new react server component. Also, as the research and development proceeds, there are possibilities of the changes and hence I recommend using the features only as a trial.

Do not use it in your production. Once all the features are confirmed, afterward, start implementing them. So far, you can only understand the concept and share your views. It will help React community to come up with a more robust concept.