React Server Components (RSC): The Future of React

React Server Components (RSC) represent a paradigm shift in how React's applications are rendered in its 10th anniversary. RSCs were first introduced in late 2020, and the first stable version of this feature was launched in 2024 as part of React 19. Traditionally, React applications were run on the client. This meant the browser would download the JavaScript bundle containing all the code that's needed to run the application, and then render the application. Though this had some advantages, this approach caused slow initial loads and the need to fetch and process the data on the client made things even slower. With React Server Components, React can now run on the server without necessarily being sent to the client, fundamentally changing how React works at its core and how we use it to build applications.

Server Side Rendering (SSR)

In order to understand React Server Components (RSC), we need to first understand how Server Side Rendering (SSR) works. If you are already familiar with SSR feel free to skip this section. SSR is a web development technique that renders a web page on the server rather than in the browser.

How It Works

1. Request: User sends a request to the server for the webpage
2. SSR processing: The server processes the request, which includes fetching data, executing any logic, and then using a template engine to construct the HTML page before sending the response back to the Server.
3. Hydration (optional): Once the HTML is received, the JavaScript is downloaded via the script tag inside the HTML and is executed on the browser to add interactivity to the HTML page. 

Benefits

1. Initial page load is faster
2. Better SEO

While both React Server Components and SSR involve server-side processing, RSC gives us greater flexibility, allowing for a few components to be rendered on the server and a few components to be rendered on the client. This is unlike SSR, where the entire HTML page has to be constructed on the server side.

Where RSCs Shine

With web applications becoming more and more complex, more functionality is being pushed to browsers to render complex visualizations. RSCs provide a huge improvement in performance in rendering such complex data-intensive applications.

Let's consider a common example of fetching data from an API and displaying it in the browser.

A traditional React component would look something like this:

import React, {useState, useEffect} from 'react'

export default function ClientSideReactPage() {
    const [todoList, setTodoList] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [errorMessage, setErrorMessage] = useState(null);

useEffect(()=>{
    const fetchToDoList = async ()=>{
        const response = await fetch('https://demosite.com/toDoList');
        const data = await response.json();
        setTodoList(data);
        setIsLoading(false);
    }
    fetchToDoList();
},[]);
  return (
    <ul>{todoList.map(list=><li key={list?.id}>{list?.name}</li>)}</ul>
  )
}

In the traditional approach, you have a piece of state for your todoList. Then, you have a useEffect for fetching the data, and after you fetch the data, you update the todoList using setTodoList, which causes the component to re-render and shows you the list of your todoList. Although this looks fine, it's not the most optimal way to do it. 

Firstly, you need to maintain the state of your todoList, isLoading flag, and your errorMessage. Then you need to keep track of useEffect and its dependencies, which, when not handled correctly will cause too many re-renders. This is all after the initial JS bundle is downloaded by the browser, and the component is run first without any data. Then the data is fetched and then the component is re-rendered with the todoList. That's a lot of steps and takes a lot of time when the complexity of the component increases or the number of such components increases on the web page.

Now, let's compare this with how it will look with React Server Components.

export default async function ServerSideReactPage() {
  const todoList = await fetch("https://demosite.com/toDoList").then((res) =>
    res.json()
  );
  return (
    <ul>
      {todoList.map((list) => (
        <li key={list?.id}>{list?.name}</li>
      ))}
    </ul>
  );
}

When comparing RSC's approach with the traditional approach, we can see that we don't need to manage any state or use effects. The final HTML is built from data compiled and sent to the browser. This requires a lot less code to achieve the same functionality and is faster because there is no JS bundle to be downloaded first, Additionally, there are no multiple re-renders. RSCs also shine where computationally expensive calculations need to be for rendering a component, those expensive functions never make it to the browser but get executed on the server (which is much more powerful than a browser) and return the final HTML to the browser to render.

Conclusion

Overall, RSCs are a very powerful tool in React, which helps improve performance, simplify development, and also help with better SEO. It's very important that developers familiarize themselves with this new feature because it represents the future of React.