Server Component Patterns

React Server Components (RSC) are the default in Next.js App Router. Here are patterns to use them effectively.

Fetching Data in Server Components

Server Components can be async — fetch data directly without useEffect:

tsx

export default async function UsersPage() {
  const users = await db.user.findMany();

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

Composing Server and Client Components

Keep client components at the leaves of your component tree:

tsx

// Server Component (default)
import { LikeButton } from "./like-button"; // Client Component

export default async function Post({ id }: { id: string }) {
  const post = await getPost(id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <LikeButton postId={id} /> {/* Interactive part */}
    </article>
  );
}

Passing Server Data to Client Components

Pass serializable data as props — don't pass functions or class instances:

tsx

// ✅ Do this
<ClientComponent data={JSON.parse(JSON.stringify(data))} />

// ❌ Don't do this
<ClientComponent fetchData={fetchData} />