homepage

TIL: React Server Components

Ran Ding

22 Mar 2025 • 4 min read

It's cool to see how things have evolved in React server-side capabilities.

This sums it up: "This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.

React Server Components Summary

React Server Components (RSCs) allow components to render ahead of time on the server, separate from your client application. They can run either at build time or during request handling. React

Key Characteristics:

RSCs execute once at build time or on-demand when a user hits an endpoint, with the code remaining entirely on the server (not shipped to the client). Refine
Server components support async/await syntax for data fetching directly in component bodies. Refine
Server Components cannot use interactive APIs like useState since they don't run in the browser. React
There's no specific directive needed to define Server Components; "use server" is for Server Functions, not Server Components. React

Benefits:

RSCs individually fetch data and render on the server, with the resulting HTML streamed into the client-side React component tree. Vercel
They reduce bundle size since they aren't included in the client JavaScript bundle. Refine
Server components can access backend services directly, eliminating the network waterfall problem caused by client-side data fetching. Refine

Client Component Integration:

Client Components can be used within Server Components by adding the "use client" directive at the top of the file. React
Server Components will first render on the server, then the bundler creates bundles for Client Components. In the browser, Client Components see the output of Server Components passed as props. React

Server Functions:

Server Functions (defined with "use server" directive) allow Client Components to call async functions executed on the server. React
Server Functions work with forms, automatically submitting to the server when used with form action attributes. React

Async Components:

RSCs introduce a new way to write components using async/await, enabling prioritized loading of content. React

The React community is still adapting to this paradigm shift, as RSCs only emerged from beta relatively recently, but they represent an exciting development in React's evolution. Joshwcomeau

Release history

React Server Components were officially released as stable in React 19. React React 19 moved from Beta to Release Candidate (RC) on May 15, 2024, and is expected to be fully stable soon. Telerik Blogs

Before becoming stable in React 19, React Server Components were still experimental in React 18 DEV Community, though they were available through frameworks like Next.js.

React Server Components represented a significant paradigm shift that was officially unveiled by the React team after years of quiet research. Joshwcomeau They're considered "one of the biggest changes to React since its initial release 10 years ago." Vercel

The React team has been developing this feature for several years, with early experimentation dating back to around 2016 when Next.js first introduced server-side data fetching capabilities Joshwcomeau, but the official React Server Components architecture is more comprehensive and integrated into React's core.