What are React Server Components anyway?

React.js is an open-source JavaScript library to build modern front-end applications. With over 20 million weekly downloads, It's the most dominant Library today. Last year, React team released React 18.0 and introduced several new features.

One such feature was "React Server Components". Even after one year of its experimental release, there is a lot of confusion and misconception around this feature. In this blog post, let's learn about React Server Components.

First of all, what are client components?

Before diving into server components, let's understand what client components are. To your surprise, client components are nothing but React components that have existed until now!

Until React 17, the server sent the required JavaScript code to the client (i.e., the browser). The client's task was to take the JavaScript code and render it into HTML5 and CSS3. Hence they were called client components.

Now let's understand what server components are.

What are React Server Components?

React Server Components (RSCs) is a new feature in React 18 that allows you to render some of your components on the server. This can improve the performance of your React applications by reducing the amount of JavaScript that needs to be downloaded by the client.

This is how React team describes Server components:

Server components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

Are RSCs and SSR the same?

RSCs are similar to traditional server-side rendering (SSR), but there are a few key differences.

1. RSCs are not a replacement for SSR. You can still use SSR to render the entire application on the server or RSCs to render specific parts of your application.
2. RSCs are zero-bundle-size. This means they do not add any code to the client-side bundle. This can make your applications load faster and improve the performance of your users' devices.

How do React Server Components work?

RSCs render your components on the server using React's templating engine. This means you can use all of the same React features you would use in a regular React component.

When an RSC is rendered on the server, it returns a static HTML string. This HTML string is then sent to the client, where it is rendered by the browser.

Benefits of using React Server Components

There are several benefits to using React Server Components, including:

1. Improved performance: RSCs can improve the performance of your React applications by reducing the amount of JavaScript that needs to be downloaded by the client. This is because the HTML string returned by an RSC is static, so it does not need to be parsed by the browser.
2. Zero-bundle-size: RSCs are zero-bundle-size, meaning they do not add additional code to the client-side bundle. This can make your applications load faster and improve the performance of your users' devices.
3. Better SEO: RSCs can improve the SEO of your React applications by rendering the initial HTML on the server. This means that search engines can index your pages more efficiently, which can improve your search engine rankings.
4. No waterfalls: Traditional data fetching methods with React client components were sequential. Sequential data fetching introduces waterfalls. As server components don't fetch data from clients, no waterfall occurs.

Drawbacks of using React Server Components

There are a few drawbacks to using React Server Components, including:

1. Complexity: RSCs can be more complex to implement than traditional SSR. This is because you need to be familiar with React's templating engine.
2. Limited functionality: RSCs are less flexible than traditional SSR. This is because you cannot use RSCs to render dynamic content.

When to use Server and Client components

React client components, the traditional way of writing React components, is not obsolete. React team recommends using both client and server components together to build apps.

Here's what Next.js docs recommend:

• Fetch data: Server components
• Directly access backend resources: Server components
• Access tokens, API keys, and other sensitive data: Server components
• Use large dependencies and modules: Server components
• Add interactivity, triggers, and event listeners: Client components
• Implement state and lifecycle effects: Client components
• Use browser-only APIs: Client components
• Use custom hooks depending on states, effects, or browser-only APIs: Client components

Conclusion

React Server Components are a new feature in React that can improve the performance and SEO of your React applications. However, they are not a replacement for traditional SSR. You can still use SSR to render the entire application on the server or RSCs to render specific parts of your application.

If you are looking for a way to improve the performance of your React applications, consider using React Server Components. However, if you need to render dynamic content, use traditional SSR.