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
Faster initial page load for users
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.
