React Server Components and Server Actions: the React 19 revolution

React 19 officially stabilises features that were previously experimental: React Server Components (RSC) and Server Actions. These parts of the React architecture are a significant paradigm shift in building React applications, allowing a clear separation between code that runs on the server and code that runs on the client. Although these technologies have already been implemented in frameworks such as Next.js, React 19 officially brings them into the core library, stabilising their public APIs while leaving the underlying implementations free to evolve for frameworks and bundlers.

The evolution of rendering in React

Before looking at RSC in depth, it is worth reviewing how rendering strategies in React have evolved:

1. Client-Side Rendering (CSR): React's original approach, where the server sends minimal HTML and the client does all the rendering, requiring a lot of JavaScript to run on the client.
2. Server-Side Rendering (SSR): Introduced to improve the initial user experience by moving rendering from the client to the server. Instead of sending an empty HTML document, the server renders the initial HTML and sends it to the browser, reducing the time it takes for content to appear.
3. Static Site Generation (SSG): This approach compiles and builds the whole application at build time, generating static files (HTML and CSS) that are then hosted on a CDN. It is particularly well suited to projects whose content does not change often.
4. Incremental Static Regeneration (ISR): An evolution of SSG that sits between SSG and traditional SSR, allowing individual pages to be regenerated in response to a browser request, without rebuilding the whole site.

React Server Components are the next step in this evolution, letting developers render some components entirely on the server, minimising the JavaScript footprint on the client and offering a more granular approach to rendering.

React Server Components: architecture and how they work

React Server Components are components that run exclusively on the server, with several technical advantages over earlier rendering strategies:

[CODE: Server Component "ProductsPage.tsx": to be retrieved from DatoCMS]

Main technical characteristics

1. Server-only execution: RSC run exclusively on the server, both at build time and on requests. They can run just once at build time on the CI server, or on every request using a web server.
2. Less client JavaScript: Client-side JavaScript bundles are significantly smaller because Server Components are not included in the client bundle. However, it is worth stressing that this is not completely "zero JavaScript", since the client components that interact with Server Components still require JavaScript code.
3. Direct access to server resources: Components have access to all backend resources (database, filesystem, server, etc.), so they can send queries straight from the component, with no need for intermediate API calls.
4. Integrated data handling: Because components are rendered on the server, they can query the database directly. This moves data loading to the server, significantly reducing latency compared with fetching data from the client.
5. Usage limitations: Server Components have no access to client-side event handlers, state and effects. This means you cannot use event handlers or React hooks such as useState, useReducer and useEffect.

Differences from traditional SSR

Unlike traditional Server-Side Rendering, React Server Components:

Eliminate the hydration process for server components: Server Components do not run JavaScript on the client and therefore do not need hydration as in SSR, where the whole page has to be hydrated to become interactive.

1. Optimise the JavaScript bundle size: As the official RFC states: "Server Components run only on the server and have zero impact on bundle size. Their code is never downloaded to clients, helping to reduce bundle sizes and improve startup times."
2. Allow direct access to server resources: Server Components give direct access to server resources from inside components, whereas with traditional SSR this is generally limited to the top levels of the page.
3. Offer component-level granularity: Unlike SSR, which happens only once during the initial page load, Server Components can be refetched individually from the server and merged into the existing component tree without losing client state.

This mixed architecture allows a cleaner separation between server rendering logic and client interactivity, letting applications combine the advantages of both approaches.

Composing Client and Server Components

The React 19 architecture allows composition between server and client components:

[CODE: "ServerComponent.tsx" + "ClientComponent.tsx": to be retrieved from DatoCMS]

This pattern lets you:

1. Run data access logic and the initial rendering on the server
2. Keep interactivity on the client where needed
3. Optimise the bundle size by sending JavaScript only for client components

Server Actions: server functions callable from the client

Server Actions complement Server Components, providing a mechanism to run code on the server in response to events on the client:

[CODE: "actions.ts" (createProduct + Zod): to be retrieved from DatoCMS]

Implementation in the Client Component

[CODE: "ProductForm.tsx" (useActionState): to be retrieved from DatoCMS]

Technical advantages of Server Actions

1. Simpler API endpoints: Server Actions remove the need to create API endpoints to change data. They let you write async functions that run on the server and can be invoked directly from Client or Server components.
2. Native form integration: By passing a Server Function to a form's action attribute, React can progressively enhance the form, allowing it to be submitted even before the JavaScript bundle has fully loaded.
3. End-to-end typing: Unlike traditional API endpoints, Server Actions are inherently type-safe, ensuring greater consistency between client and server.
4. UI state handling: With the new hooks such as useActionState and useFormStatus, Server Actions offer built-in mechanisms for handling loading states and errors during form operations.

These characteristics make Server Actions particularly well suited to applications that need tight integration between client and server, while keeping a clear separation of responsibilities.

Conclusions

React Server Components and Server Actions are a paradigm shift in building React applications, promoting a cleaner separation between server and client logic. These features, now stable in React 19, offer significant advantages in terms of performance, security and code complexity.

Adopting these technologies requires rethinking the architecture of your applications, but the benefits are substantial enough to justify the investment, especially for applications with demanding performance and SEO requirements.