patternsApr 8, 2026·1 min read

Server Component Patterns

nextjsreactserver-components

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} />