What is React Server Component

What is React Server Component?

React Server Component (CSR) is a new component in React.

Recently, All components in React are client-side component (MyComponent.js) but now you can create them as server-side component by just adding .server (MyComponent.server.js).

Anyway client-size component and server-size component work together very well.

What new in React Server Component?

React Server Component allows static content render faster

Server-side components can't have any interactivity like using useState hook but they can import client-size components with which the user interact.

Won't affect the bundle size

Whatever library you include inside your server component as well as the text content it won't affect the bundle size because it is render on the server.

Accessing database directly

Imagine accesing database directly from your components instead of calling API.

Accessing data by calling API:

const users = fetch('http://localhost:8000/users).json();

You can access your data as below:

const users = db.query(

`SELECT * FROM users WHERE name LIKE $1`,

['%' + searchText + '%']

).rows;

The feature is still in the experimental phase so keep an eye on the upcoming version of React.