Mastering React Server Components

React Server Components (RSC) allow you to render components on the server, entirely skipping the client-side JavaScript bundle for those components.

Data Fetching with RSC

One of the best things about RSC is the ability to write direct, async database queries inside your React components without the need for an API layer.

import { db } from "@/lib/db";export default async function UserProfile({ id }: { id: string }) {  // Direct database query on the server!  const user = await db.user.findUnique({    where: { id }  });  if (!user) return <p>User not found</p>;  return (    <div className="profile-card">      <h2>{user.name}</h2>      <p>{user.email}</p>    </div>  );}

The Benefits

1. Zero Client JavaScript: The code above adds 0 bytes to your client bundle.
2. Direct Backend Access: No need to build /api/users/[id] just to fetch a user.
3. Automatic Code Splitting: Server components automatically code-split client components.

When to use Client Components

You still need client components (using "use client") for interactivity:

"use client"import { useState } from "react";export function Counter() {  const [count, setCount] = useState(0);    return (    <button onClick={() => setCount(count + 1)}>      Count: {count}    </button>  );}

By combining the two, you get the best of both worlds: extremely fast initial loads and highly interactive UIs.