React server components (rsc)

What are React Server Components?

React Server Components (RSC) are components that execute only on the server. They never run in the browser, never ship JavaScript to the client, and can directly access server-side resources (databases, file system, APIs).

Server vs Client Components

tsx

// Server Component (default in Next.js App Router)
// ✅ No "use client" directive — runs on server
async function UserProfile({ userId }: { userId: string }) {
  // Direct database access — no API needed!
  const user = await db.query.users.findFirst({
    where: eq(users.id, userId)
  });

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <LikeButton userId={userId} /> {/* Client Component */}
    </div>
  );
}

tsx

// Client Component — "use client" directive required
"use client";

import { useState } from "react";

function LikeButton({ userId }: { userId: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "❤️ Liked" : "🤍 Like"}
    </button>
  );
}

Key Differences

Feature	Server Component	Client Component
`"use client"` directive	No	Yes
Runs on	Server only	Server (SSR) + Client
JS bundle size	Zero (not sent to client)	Included in JS bundle
`useState`, `useEffect`	❌ Cannot use	✅ Can use
Event handlers (onClick)	❌ Cannot use	✅ Can use
Async component	✅ Can be async	❌ Cannot be async
Access DB/filesystem	✅ Directly	❌ Via API only
Access browser APIs	❌ No window/document	✅ Full access

Composition Rules

Server Component → can render Server or Client components ✅
Client Component → can render ONLY Client components ❌
Client Component → can accept Server Component as children (via props) ✅

tsx

// ✅ Passing Server Component as children to Client Component
// layout.tsx (Server Component)
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ClientSidebar>
      {children}  {/* children can be Server Components */}
    </ClientSidebar>
  );
}

Benefits

1. Zero Bundle Size

Server Components don't add JavaScript to the client bundle. Heavy libraries used only for rendering (e.g., syntax highlighting, markdown parsing) stay on the server:

tsx

// Server Component — marked library stays on server
import { marked } from "marked";        // NOT sent to client
import hljs from "highlight.js";         // NOT sent to client

async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);
  const html = marked(post.content);     // Processed on server

  return <article dangerouslySetInnerHTML={{ __html: html }} />;
}

2. Direct Data Access

tsx

// No API routes needed — query directly
async function ProductList() {
  const products = await db.select().from(productsTable);

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} — ${p.price}</li>
      ))}
    </ul>
  );
}

3. Streaming and Suspense

tsx

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent />  {/* Streams when ready */}
      </Suspense>
    </div>
  );
}

When to Use Which

Use Server Component when	Use Client Component when
Fetching data	Using state (useState)
Accessing backend resources	Using effects (useEffect)
Keeping sensitive data on server	Using event listeners (onClick)
Reducing client JS bundle	Using browser APIs
Heavy dependencies (markdown, etc.)	Using custom hooks with state

Important:

React Server Components fundamentally change how we build React apps. Server Components run only on the server, have zero client JS cost, and can access backend resources directly. Use them for data fetching and rendering; use Client Components only when you need interactivity (state, events, browser APIs). They're the default in Next.js App Router.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems