Back to articles

Mastering React Server Components: A Practical Guide with Real-World Examples

Majd Muhtaseb06/05/20258 minutes

Introduction

React Server Components (RSCs) are a game-changer in how we build React applications. They allow us to execute code on the server, improving performance, security, and initial load times. This guide will walk you through the essentials with practical examples.

What are React Server Components?

Unlike traditional client-side components, RSCs render on the server and send only the resulting HTML to the client. This reduces the amount of JavaScript the browser needs to download, parse, and execute.

Benefits of Using React Server Components

• Improved Performance: Less JavaScript on the client leads to faster initial load times.
• Enhanced Security: Access sensitive data and perform operations on the server, keeping API keys and database credentials secure.
• Simplified Data Fetching: Fetch data directly within your components without the need for separate API calls.

Practical Examples

Fetching Data from a Database (Server Component)

// app/components/UserList.jsx (Server Component)
import { getUsers } from '@/lib/db'; // Assuming you have a database connection

export default async function UserList() {
  const users = await getUsers();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// lib/db.js (Example Database Fetching - Adapt to your database)
export async function getUsers() {
  // Replace with your actual database connection and query
  // Example using an imaginary database client:
  const client = await connectToDatabase();
  const users = await client.query('SELECT * FROM users');
  return users;
}

async function connectToDatabase() {
    // Simulating a database connection (replace with your actual implementation)
    return {
        query: async (sql) => {
            // Simulate a database query
            if (sql === 'SELECT * FROM users') {
                return [
                    { id: 1, name: 'Alice' },
                    { id: 2, name: 'Bob' },
                ];
            }
            return [];
        }
    };
}

Explanation:

• The UserList component is an RSC. The async keyword signifies that it's rendered on the server.
• getUsers() fetches data from the database. Critically, this code executes on the server, not in the browser.

Interactivity with Client Components

While RSCs are rendered on the server, you'll often need client-side interactivity. To achieve this, you can combine RSCs with Client Components.

// app/components/Counter.jsx (Client Component)
'use client'; // Marks this as a Client Component

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// app/page.jsx (Server Component)
import UserList from './components/UserList';
import Counter from './components/Counter';

export default async function Home() {
  return (
    <div>
      <h1>Welcome</h1>
      <UserList />
      <Counter />
    </div>
  );
}

Explanation:

• 'use client' at the top of Counter.jsx tells React that this component should be rendered on the client.
• The Home component (Server Component) imports both UserList (Server Component) and Counter (Client Component).
• The Counter is interactive because it uses client-side JavaScript (useState).

Conclusion

React Server Components are a powerful tool for building high-performance, secure, and maintainable React applications. By understanding their benefits and how to use them effectively, you can significantly improve your development workflow and the user experience. Experiment with these examples and explore how RSCs can fit into your next project!