Server-Side Components in React JS

Server-side components are a feature of Next.js, a framework for building server-rendered React applications. They allow you to execute code on the server when a request is made to your app, and use the resulting data to pre-render the HTML for a page. This can be particularly useful for optimizing the performance of your app, as it allows you to do things like fetch data from an API or database on the server, rather than waiting for the client to do it.

Difference between SSR(Server-Side Rendering) and SSC(Server-Side Components)

React Server Components is similar to Server Side Rendering, with a few key differences:

• Server-side Rendering(SSR) dynamically builds your application into HTML on the server. This creates faster load times for users by offloading work from the user's device to the server. However, developers still pay the cost to download, parse, and hydrate those components after the initial HTML loads. React Server-Side Components, combined with Next.js server-side rendering, help eliminate the tradeoff of all-or-nothing data fetching. You can progressively show updates as your data comes in.
• RSCs are implemented as a part of the React framework, whereas SSR can be implemented using a variety of technologies.
• RSCs are designed to be easy to use, with a simple API that allows you to write server-side code in the same way that you would write client-side code.
• RSCs are designed to be scalable, with support for concurrent requests and automatic code splitting.
• RSCs are designed to be flexible, with support for a variety of server environments, including Node.js, Cloud Functions, and others.

Overall, RSCs are a new way to implement server-side rendering in React, and they offer a number of benefits over traditional SSR approaches.

How React Server Components Work

In React Server Components convention, components are split into *.server.js and *.client.js to indicate where they are executed. Using *.server.js components can speed up data fetching (as it is close to the data store) and reduce bundle size (some non-view js libraries like moment.js won’t be sent to the client side). And for *.client.jscomponents, actually, they are just like any react components you wrote before but can be seamlessly integrated with *.server.js components which is a huge plus.
The *.server.js components are actually components that render on the server side and the rendered result is serialized and sent to the client side in a JSON format. Which means you cannot use functions (incl. event handler), refs, and most of the hooks in *.server.jscomponents as they are not in the same context as *.client.js components.
This serialized result received in JSON format is streamed down immediately to the client so that the client can do something with that response.

Use of server-side components

Server-side components are useful for a variety of purposes, including:

1. Fetching data: One of the main uses of server-side components is to fetch data from an API or database and use it to render a page. This can be particularly useful if the data is needed to render the page, but cannot be fetched client-side (for example, if the data is behind a login or requires server-side processing).
2. Pre-rendering pages: Server-side components allow you to pre-render the HTML for a page on the server, rather than relying on the client to do it. This can be useful for improving the performance of your app, as it allows you to reduce the amount of work that the client needs to do.
3. Optimizing SEO: Pre-rendering pages on the server can also be useful for optimizing the SEO of your app. Search engines may need help indexing pages that are built entirely on the client, as they may need access to the full HTML of the page. Pre-rendering the HTML on the server allows search engines to easily index the content of your app.
4. Handling dynamic routes: Server-side components can be used to handle dynamic routes in your app. For example, if you have a blog with dynamically generated pages for each blog post, you can use a server-side component to fetch the data for the appropriate blog post and render the page on the server.
5. Reducing bundle size: React Server Components (RSCs) can help reduce bundle size in a few different ways-
6. Code Splitting: RSCs support automatic code splitting, which means that the server can send only the code that is needed for a particular request, rather than sending a large bundle of code that includes everything the app might need. This can help reduce the overall size of the code that needs to be downloaded by the client.
7. Server-Side Rendering: RSCs allow you to render your components on the server, which means that the client doesn't need to download and execute as much code. This can be especially helpful for apps with large amounts of code or for users with slow internet connections.
8. Server-Side Caching: RSCs can also be used to cache the results of server-side rendering on the server, which means that the server can quickly serve pre-rendered content to clients, reducing the amount of code needed to be sent over the network.

Overall, server-side components can be a powerful tool for building fast and efficient applications with Next.js.

Conclusion

React Server Components is a new development that bridges CSR and SSR, which aim to enable developers to be able to make the best out of both of them rather than replacing one with the latter.

• React Server Components helps developers to reduce their JS bundle size dramatically with a unique way to help performance issues.
• Provides more flexibility than similar solutions before.
• Now with React Server Components, we can reach our backend from anywhere in the component tree and that’s a big improvement compared to older solutions.

Overall, I consider React Server Components as a total step forward from NextJs team.

‍