Back to articles

React Server Components: The Future of Performance

Majd Muhtaseb06/21/20257 minutes

Introduction

React Server Components (RSCs) are a groundbreaking addition to the React ecosystem, offering a new way to build high-performance applications. Unlike traditional client-side components, RSCs execute on the server, leading to reduced client-side JavaScript, faster initial loads, and improved SEO.

What are React Server Components?

RSCs are React components that run exclusively on the server during the initial rendering phase. They fetch data directly from databases or APIs and render HTML, which is then sent to the client. This differs from traditional client-side components that fetch data in the browser after the initial render.

Benefits of RSCs

• Reduced Client-Side JavaScript: RSCs avoid sending unnecessary JavaScript to the browser, resulting in faster initial page loads.
• Improved Performance: Server-side rendering reduces the workload on the client device, leading to better performance, especially on less powerful devices.
• Direct Data Access: RSCs can directly access backend resources, eliminating the need for client-side API calls for initial rendering.
• Enhanced SEO: Search engines can easily crawl and index the fully rendered HTML from the server.
• Simplified Development: Developers can write backend logic directly within their React components, streamlining the development process.

Example: Fetching Data in an RSC

Here's a simple example of an RSC fetching data from a hypothetical API:

// components/UserProfile.js (Server Component)
import { getUser } from './api';

export default async function UserProfile({ userId }) {
  const user = await getUser(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

In this example, getUser function fetches user data directly from a backend API. Because this is an RSC, the logic is executed on the server.

// app/page.js (Client Component importing RSC)
'use client'
import UserProfile from './components/UserProfile';
import { useState } from 'react';

export default function Home() {
  const [userId, setUserId] = useState(1);
  return (
    <div>
      <UserProfile userId={userId} />
      <button onClick={() => setUserId(userId + 1)}>Load Next User</button>
    </div>
  );
}

Key Takeaway: The UserProfile component is handled server-side, while any client interaction is handled in the Home component.

Caveats

• No Client-Side Interactivity: RSCs are not interactive and cannot use client-side features like useState or useEffect directly. To achieve interactivity, you need to combine RSCs with client-side components.
• Serialization: Data passed from server to client components must be serializable.

Conclusion

React Server Components are a powerful tool for building performant and scalable React applications. By shifting rendering logic to the server, RSCs reduce client-side JavaScript, improve initial load times, and simplify data fetching. While they require a slightly different mental model, the benefits of RSCs make them a valuable addition to the modern React developer's toolkit. Experiment with them within frameworks like Next.js to experience the power firsthand.