March 12, 2023 · 2 min read
A brief explanation of React Server Components
Quick mental model for React Server Components — how they differ from client components, what RSC streaming does, and the two big problems it solves.
Everybody is talking about RSC these days so I thought I'd write a brief introduction explaining what React Server Components are.
Server components
They don't need client-side state and interactions. The server uses data to generate the relevant HTML and returns it to the browser. Inside server components you can use interactive client components. The server components' HTML may be generated from data already on the server — for example, from an API call to your database.
Client components
These are interactive JSX components (clicking on buttons and interacting with state data). Basically HTML created at runtime in the browser from JavaScript.
What RSC does
RSC incrementally streams the content of the web app from server to the browser. When the user loads the website, the browser sends a request to the server. The server fetches data from the backend and starts to paint the browser window as data arrives. Unlike SSR, RSC does not wait until all data is ready — it renders parts of the page (NavBar, Footer, text) as they're ready. This streaming is achieved by serializing the React component into JSON data on the server side and reconstructing it in the browser.
Server components also have automatic bundle splitting: you don't need dynamic imports, and if a page doesn't use a component, it isn't sent.
Problems and how RSC solves them
There are many problems that RSC solves but two of them stand out:
1. Waterfalls in fetching data. Waterfalls occur when data takes a long time to load, slowing down your applications. One of the most common causes is sequential client–server round trips, especially between parent and child components. RSC fetches data on the server, eliminating that latency.
2. Large bundle sizes. When the browser downloads huge amounts of data in large web apps, especially SSR apps, it can take a while to load — particularly over slower connections. RSC sends only the required code to the browser.