Skip to content

When it comes to building an application, the best developers accomplish three things: great user experience, scalability over time, and fast performance.

Projects often sacrifice one of these to achieve the other two. React Server Components, announced at the end of 2020, will help reduce trade offs by enabling more features while decreasing the amount of JavaScript to evaluate on the client. This will make for a more pleasant user and developer experience due to faster performance.

What are React Server Components?

At a high level, React Server Components are Components that can be rendered on the server and on the client. This allows developers to build apps that span both sides of the application so the app can provide the best experience. 

By performing data fetching on the server, React Server Components will change how developers build React applications. Because server code is never sent to the client as a bundle, the time it takes to interact with the application is faster. 

This creates an environment where we use the client to optimize interactivity and use the server to further optimize performance.

React Server Components take inspiration from other technologies including PHP, Ruby on Rails, and GraphQL. However, React Server Components give developers more control over what is or isn’t sent to the client, which allows for greater flexibility. 

React Server Components vs Server-Side Rendering 

Server-side Rendering (SSR) is the process of taking an application and rendering it to HTML and CSS on the server. This creates faster load times for users, especially ones who have slower internet connections or older devices. However, developers still pay the cost to download, to parse, and to execute those components after the initial HTML loads.

React Server Components are different but complementary to SSR. SSR is all about the initial page load that renders HTML elements. After the initial page load, the React still used is on the client side and is still running the same amount of JavaScript. On the other hand, React Server Components require a re-render from the server every time a network request is made. This allows React to intelligently merge new data with existing client components so that the client will never lose its state. 

Next.js will combine React Server Components with SSR to streamline the initial render as HTML, speeding up the non-interactive display of a page. Because of the minimal JavaScript on the client, the time it takes for a user to be able to interact with a site is improved as well. 

React Server Components Example with Next.js

The Next.js team has created a React Server Components demo so that you can see an early staging of how React Server Components may work in Next.js.

In this video, Lee Robinson defines React Server Components and demonstrates how Next.js and Vercel could work with them. The source code is available on GitHub.

React Server Components are still in the RFC phase. As with all new features, React Server Components will evolve and change as more research is done. Look for updates here on how React Server Components will integrate with Next.js.

The Next.js team at Vercel works closely with the React team at Facebook. React Server Components are coming soon. We’ll update this page as more information becomes available.

For more on the history of React Server Components and a demonstration, check out this video by Dan Abramov and Lauren Tan