ReactJS Server Components

React is a JavaScript library which is used to develop frontend of websites. Since it’s introduction in the year 2013 React has gained a lot of popularity among the web developers around the world. The library has a great support from the community and is evolving at a high speed from its launch.

In 2022 React released an update in which server components was introduced. This made the application even faster and forms the basis for Next.js. With the introduction of server components React has introduced a new form of web development.

ReactJS Server Components:

The Server Components in React allow the developer to render the components on the server side. This helps to load the data on the server side and thus sending only the necessary data to client side. Earlier the components were rendered on client side and any data fetching from server was a lot slower. Now. because of the server components the data can be fetched in a easier and faster manner.

Server Components

Before the introduction of Server Components parallel fetching, SSR(Server Side Rendering) and architecture manipulation were some of the techniques used but these had their own flaws as they were difficult to implement, required a lot of maintenance and sometimes even ruined the User Experience.

Server Components solved this problem by creating an application which is fast to build and is easily maintainable. They provide additional functionality of creating zero bundle size components. These components load static pages on server side and even allow third party packages to load on server creating a zero impact on bundle size. Server Components also solve the problem of waterfall network 

Before the introduction of server components the data was fetched from the database using client components as shown in the image below:

Client Components

Working of Server Components.

Traditionally once a React Application was built all the packages and bundles were rendered on the client side because of this data which was not necessary was also being imported on the client side but since the introdu

ction of Server Components the client is only sent the necessary data in the form of plain serializable strings which get s rendered on client side.

Earlier, client side rendering was done in multiple steps but now only one call to the server components loads all the necessary data to client.

Features of Server Components:

• Rendering components like Client components, div, span etc. on the server side
• Directly use async/await functions on the database and client side.
• Complete access to the backend and its services
• Automatic Code Splitting
• Remove the waterfall network problem.

Limitations while usng Server Components:

• We cannot use hooks like useState, useEffect etc. as the components are loaded on server side directly
• We cannot use Browser’s local storage or any other API’s provided by the browser
• Custom hooks which depend on browser API can also not be used

Coding in React Server Components:

The code in React Server Components will look exactly same like normal old React code but if we are using client components code with sever components code we have to give a add a heading of ‘use client’ this will inform react that the following is a client component and has to be rendered on client side.

The client component will not have access to server environment but vice versa is not true. So we can include client components in server components but not server components in client side application.