React Server Components

React Server Components (RSC) are a new addition to the React ecosystem that allow components to be rendered exclusively on the server. Unlike traditional React components that run entirely on the client. This allows us to do things like write database queries right inside our React components!

In this new approach, all components are assumed to be Server Components by default and the “traditional” React components we're familiar with are called Client Components. Despite the name, 𝘊𝘭𝘪𝘦𝘯𝘵 𝘊𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵𝘴 𝘤𝘢𝘯 𝘳𝘦𝘯𝘥𝘦𝘳 𝘰𝘯 𝘣𝘰𝘵𝘩 𝘵𝘩𝘦 𝘤𝘭𝘪𝘦𝘯𝘵 𝘢𝘯𝘥 𝘵𝘩𝘦 𝘴𝘦𝘳𝘷𝘦𝘳. However, 𝘚𝘦𝘳𝘷𝘦𝘳 𝘊𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵𝘴 𝘳𝘶𝘯 𝘦𝘹𝘤𝘭𝘶𝘴𝘪𝘷𝘦𝘭𝘺 𝘰𝘯 𝘵𝘩𝘦 𝘴𝘦𝘳𝘷𝘦𝘳.

It’s important to understand that: Server components never re-render. They only render once on the server to generate the UI, and the rendered output is then sent to the client where it remains static. Since Server Components cannot re-render, they do not support state or effects. State requires the ability to change, and effects typically run after rendering on the client—both of which are incompatible with Server Components that do not execute client-side.
If you need a component to manage state or run effects, you can convert it into a Client Component by adding 'use client' at the top of the component file.

'use client';
import React from 'react';
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Current value: {count}
    </button>
  );
}
export default Counter;

React Server Components vs. Server-Side Rendering (SSR)

Let us understand server side rendering first->

As we navigate the web, we often hear terms like "server-side rendering" (SSR) and "client-side rendering" (CSR) - but what do these actually mean for your browsing experience? Let's break it down into simple words!

Client-Side Rendering (CSR):

With CSR, when you visit a website, your browser receives a minimal page template from the server. Then, your browser gets to work, downloading javascript bundle, fetching content and filling out the details. The problem with this approach is that it takes time to do all of that work. And while it's all happening, the user is staring at a blank white screen.

Server-Side Rendering (SSR):

Server side rendering was designed to improve the problem we faced in CSR.
With SSR, when you visit a website, the server already does most of the heavy lifting. Instead of sending an empty HTML file, server prepares the full page on its side before sending it to your browser. This means you can see and interact with the complete page almost immediately after it loads.

SSR has several Advantages

1. Faster initial page load for users

2. Better SEO as search engines can crawl the complete page.

Don't get confused between RSC and SSR!

While both involve server-side rendering, RSCs are a more advanced and integrated solution within React itself. SSR typically involves rendering the initial HTML on the server and then hydrating it on the client. RSCs builds on top of that, allowing us to omit certain components from the client-side JavaScript bundle, ensuring they only run on the server. This reduces the JavaScript bundle size on the client side, making the page interactive faster.

You might be wondering, how can we use these React Server Components?

As of now, React Server Components (RSCs) can only be used in 𝘕𝘦𝘹𝘵.𝘫𝘴 13.4+ through their brand-new re-architected “𝘈𝘱𝘱 𝘙𝘰𝘶𝘵𝘦𝘳.” Next.js is the first framework to implement RSCs and is currently the only framework that fully supports them.

Advantages:

RSCs offer several advantages. The most obvious benefit is performance. Since Server Components are not included in the JavaScript bundles, they reduce both the amount of JavaScript that needs to be downloaded and the number of components requiring hydration.