6 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article explains how to enable React Server Components (RSC) in React Router applications using Vite plugins. It covers key features like using RSC in loaders, making entire routes server components, and utilizing server functions for data mutations. The incremental migration approach allows teams to adopt RSC without overhauling existing code.
If you do, here's more
React Router is integrating support for React Server Components (RSC), which is currently in an experimental stage but promises significant benefits. To enable RSC in a React Router app, developers must install two plugins: `@react-router/dev/vite` and `@vitejs/plugin-rsc`. Updating the `vite.config.ts` file is necessary to accommodate these changes. Once RSC is activated, developers should remove the `Scripts` component from their root layout since RSC automatically includes scripts in the payload.
A key advantage of using RSC is the ability to return fully rendered UI from loaders instead of just data. Traditional loaders send data to the client for hydration, which can be inefficient. RSC allows for a more streamlined approach where the loader can return pre-rendered UI, cutting down on unnecessary data transmission. This is particularly useful when integrating with content management systems. Instead of dynamically loading components or sending excessive data, developers can determine the required UI in the loader and send only that, leading to smaller payloads.
Moreover, RSC allows incremental migration within an application. Different routes can be a mix of client and server components without requiring changes to the entire app. This flexibility is ideal for large projects with multiple teams. React Router's form actions can now directly connect to server functions, allowing a component to manage its own data without tying actions to specific routes. This modularity enhances reusability of components across different parts of an application. For interactivity, client components can be used alongside server components, enabling developers to create dynamic experiences without complicating the server-side logic.
Questions about this article
No questions yet.