Server Components vs Client Components

Next.js (App Router) uses React Server Components by default. Client Components are used only when interactivity is required.

What is a Server Component?

A Server Component runs only on the server. Its code is never sent to the browser, which makes the application faster and more secure.

// app/page.jsx (Server Component by default)
export default function Page() {
  return <h1>Welcome</h1>;
}

You can fetch data directly from a database or API inside a Server Component without exposing secrets.

What is a Client Component?

A Client Component runs in the browser and is required for user interactions like clicks, forms, state, and effects.

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>
    Count: {count}
  </button>;
}

Key Differences

• Server Components do not support state or effects
• Client Components support interactivity and browser APIs
• Server Components reduce JavaScript sent to the browser

Real-World Example

An e-commerce product page uses Server Components to fetch product data and Client Components for the “Add to Cart” button.

When to Use Which?

• Use Server Components for data fetching and static UI
• Use Client Components only where interaction is required

Interview Tip

In Next.js, Server Components are default and improve performance, while Client Components are used selectively for interactivity.