React Server Components Working and Benefits

Overview of React Server Component

After December 21, 2020, the React team has announced exciting research with a demo into a new approach to build React apps with React Server Components. Although they shared, they also shared that this is in development & research. Here, we will discuss what ideas were discussed.

What is React Server Component?

React server Component works to re-write React components that are rendered on the server-side to enhance application performance. There is a major problem faced when developing applications with React that if the common high number of network requests generated while users wait for the page or data they requested to become available:

Let’s look into an example, the most used approach to data fetching we used is to call APIs using the use effect hook:

useEffect(() => {
axios.get("Your-URL")
.then((response) => {
setData(response.data);
// set data into state
})
.catch((error) => {
console.log(error);
});
}, []);

Although there is nothing wrong with it, using this data fetching approach will always take time to render something valuable.

The other problem is Bundle size. By rendering a big bundle size, it will take time to load & not every user has fast internet connections. That’s why we used some methods to reduce it like minification, code splitting, non-used(dead) code elimination. React server components help to reduce these problems. React Server Component will help to solve above mentioned two problems and very efficiently.

React Server Components allow us to completely offload particular components along with their dependencies to the server. This states that they no longer need to run in the browser, which also explains the amount of js that needs to be executed shrinks. In Facebook’s initial tests in a production environment, React Serve Component resulted in a 29 percent smaller bundle size, or nearly a third, according to facebook’s presentation on react server component.

The learning of React is also not going to be difficult for developers like us(moving from Angular to React) Click to explore about, Learn React | Advanced Guide for Angular Developers

What are the benefits of React Server Component?

A React Server Component seems like a traditional React component. It takes in props & also has a render method. It has additional capabilities, such as:

They can directly access server data sources such as microservices, functions, databases, etc. The possibilities are like its capability is huge. We will create internal APIs, work with data sources, and access our server inside our component without releasing it directly to an API.

They're named with the.server.js suffix after the component's name, as per a standard naming convention. Let’s see an example, and if a component is going to be named note.js, it will have to set note.server.js. Respectively, client components will be created following the naming convention using the .client.js suffix after the component's name.

What is Client-Side Rendering?

Client-side rendering is the norm. The technique used nowadays for website rendering didn't gain that attraction until JavaScript libraries supported it.
When we look into client-side rendering, we are talking about JavaScript to render content in the browser. Rather than acquiring all of the content from the HTML document, a bare-bones HTML document with a JavaScript file in the initial loading is received, which renders the rest of the site using the browser.

The initial page load is naturally delayed when using client-side rendering. After that, though, each subsequent page load is lightning fast. Communication with the server is limited to retrieving run-time data in this approach. Furthermore, there is no need to reload the entire User Interface after each service call. By re-rendering only that single DOM element, the client-side framework is able to refresh the UI with changed data.

React doesn't follow any particular project structure, and the positive thing about this is that it allows us to make up a structure to suit our needs. Click to explore about, ReactJs Project Structure and Folder Setups

What is Server-Side Rendering?

When users request the server, it gets started with an HTML page by fetching user data and sending it to the user’s system over the internet. Then the browser engine constructs the content and displays it over the page. This whole process of fetching from the database, creating an HTML page, and then sending it to the client happens in milliseconds.

Pros of Server Side Rendering

1. Search engines can catch up with the site for better SEO.
2. The first-page load is faster.
3. Good for static sites.

Cons of Server Side Rendering

1. Frequently server requests.
2. Overall slow page on rendering.
3. Full page reloads.
4. Non-rich site interactions

Server Side Rendering Vs. Client-Side Rendering

The primary difference is that with Server Side Rendering, the browser receives the HTML of your website that is ready to be produced, but with Client-Side Rendering, the browser obtains an empty document that connects to your javaScript. IT states that the browser engine will start rendering HTML from the server without waiting for all the javaScript to be downloaded and executed, In both cases, React will need to be downloaded and will go through the same process of creating a virtual DOM and adding events to make the page interactive, but with Server Side Rendering, the user can begin seeing the page while this is all occurring. You must want all of the foregoing to happen in the Client-Side Rendering world, and then the virtual document object module must be transported to the browser DOM for the page to be viewable.

Pros of Client Side Rendering

1. Rich site interactions
2. Fast website rendering after the initial load.
3. Great for web applications.
4. Robust selection of JavaScript libraries.

Cons of Client Side Rendering

1. Low SEO if not implemented correctly.
2. The initial load might require more time.
3. In most cases, it requires an external library.

How does React Server Component work?

The working process of React Server Component is mentioned below:

SSR always refers to the initial page Load. When we’re using SSR its means sending HTML to the client & loading all your script. First, the JS is loaded in the app, and the app is back to perform a functional client-side react app. These statements define that your application is the same old React application you would have after the initial page load if there is no use of SSR. Your components are still client components in Server Side Rendering, outside of the fact that when loading of the first page was pure HTML.

React Server Component used to Rendered on the server. These components are being fetched from your backend, so it resolves to have the rendering of these components co-located with the data fetched. When components need to be rendered, they're fetched from the server and combined with the existing ones.

React server components is in the development phase so that we can get it in also Package.Json :

"react": "0.0.0-experimental-7ec4c5597",
"react-dom": "0.0.0-experimental-7ec4c5597",
"react-error-boundary": "^3.1.0",
"react-fetch": "0.0.0-experimental-7ec4c5597",
"react-fs": "0.0.0-experimental-7ec4c5597",
"react-pg": "0.0.0-experimental-7ec4c5597",
"react-server-dom-webpack": "0.0.0-experimental-7ec4c5597",

Above mentioned dependencies is using an experimental version that enables React Server Component, while react-fetch/fs/pg are a group of wrapper packages, and these are used for interacting with the i/o system (called React IO Libraries)
For More detailed information please check React server component demo app.

Setup of Nodejs

You will need to have nodejs >=14.9.0 to run this demo.[Node 14]

```
npm install
npm start
(Or `npm run start:prod` for prod. build.)

The app won't work until you set up the database, as described below.
Setup with Docker (optional)

You can also start dev build of the app by using docker-compose.</p>
This is completely optional and is only for people who prefer Docker to global installs

If you prefer Docker, make sure you have docker and docker-compose installed then run:

<pre><code>docker-compose up</code></pre>

Running seed script

1. Run containers in the detached mode
2. Run Seed Script

<pre><code>docker-compose exec notes-app npm run seed</code></pre>

If you'd rather not use Docker, skip this section and continue below.

DB Setup

This demo uses Postgres. First, follow Postgres installation guide for your platform.

Alternatively, you can check out server component demo which will let you run the demo app without needing a database. However, the user won't execute SQL queries (but fetch should still work). There is also another fork that uses Prisma with SQLite, so it doesn't require additional setup.

The below example will set up the database for this app, assuming that you have a UNIX-like platform:

Step 1. Create the Database

```
psql Postgres

CREATE DATABASE notesapi;
CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';
ALTER ROLE notesadmin WITH SUPERUSER;
ALTER DATABASE notesapi OWNER TO notesadmin;
\q
```

Step 2. Connect to the Database

```
psql -d Postgres -U notesadmin;

\c notesapi

DROP TABLE IF EXISTS notes;
CREATE TABLE notes (
id SERIAL PRIMARY KEY,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP NOT NULL,
title TEXT,
body TEXT
);

\q
```

Step 3. Run the seed script

Finally, run `npm run seed` to populate some data.

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs. Click here for our Digital Product and Platform Engineering Services

Conclusion

This tech is new, and the expectation is high for the final release of React Server Components in the next announcement of “ The Plan For React18 “. The fast functionality of how React Server Components enhance speed and reduce the size of the bundle is making React stand out from its competitors like Angular and Vue.js.

It shows React Server Components have a great scope in further times for app development. For more information, watch the official talk or new release announcements.

• Discover more about React.JS Application Development Services
• Click to explore Reactive Programming Solutions for Monitoring Platform