React Server Components: A Deep Dive

What Are Server Components?

React Server Components (RSC) run exclusively on the server. They have zero JavaScript bundle impact on the client, can directly access server resources like databases and file systems, and are async by default. They are NOT the same as SSR — with SSR, the same component code runs on both server and client; with RSC, Server Components never run on the client at all.

1// No "use client" directive = Server Component by default in Next.js App Router
2
3async function PostsPage() {
4  // Direct database access — no API call needed, no bundle cost
5  const posts = await db.query(
6    'SELECT id, title, excerpt FROM posts WHERE published = true'
7  );
8
9  return (
10    <ul>
11      {posts.map((post) => (
12        <li key={post.id}>
13          <h2>{post.title}</h2>
14          <p>{post.excerpt}</p>
15        </li>
16      ))}
17    </ul>
18  );
19}
20
21export default PostsPage;

“

“We want React to be the foundation for any UI you build, regardless of where it runs — browser, server, native. Server Components are our bet on how to make that real.”

— Dan Abramov

Client vs Server: Side-by-Side

The decision rule is simple: if a component needs interactivity, browser APIs, or event listeners — it's a Client Component. Everything else is a Server Component by default.

// No "use client" — runs on server, zero bundle cost
import { getUserById } from '@/lib/db';

export async function UserProfile({ userId }: { userId: string }) {
  const user = await getUserById(userId); // Direct DB call

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

Common Pitfalls

RSC has a few sharp edges that catch developers off guard. These three mistakes account for most of the confusion when teams first adopt the App Router.

// ❌ Breaks — can't import server component into client component
'use client';
import ServerComp from './ServerComp'; // Build error

// ✅ Correct — compose via children
'use client';
export function ClientWrapper({ children }: { children: React.ReactNode }) {
  return <div className="wrapper">{children}</div>;
}

// In a Server Component above:
<ClientWrapper>
  <ServerComp /> {/* Works — composed at server render time */}
</ClientWrapper>

TypeScript Integration

// Page props in Next.js 15+ — params and searchParams are Promises
interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

Starting from Next.js 15, params and searchParams in page.tsx are Promises — always await them. TypeScript will surface this as a type error if you skip the await.