Server Components

Definition

React components that only ever execute and render on the server. They never ship their JavaScript code to the client's browser.

Explain Like I'm New

The biggest paradigm shift in React history. By default in Next.js, your components run on the server, output pure HTML, and send ONLY that HTML to the browser. Because the browser doesn't have to download or run the component's JavaScript, your website becomes incredibly fast.

Real World Example

A `<MarkdownRenderer>` component that requires a massive 2 Megabyte library to parse markdown. If it's a Server Component, the server uses the 2MB library, generates the HTML, and sends 0 Megabytes of JavaScript to the user.

Common Use Cases

•Fetching data securely
•Reducing bundle size
•Accessing backend resources natively

Server Components vs Client Components

Feature	Server Components (Default)	Client Components ('use client')
Execution	Runs ONLY on the Server. Sends pure HTML/CSS to the browser.	Runs on the Server (SSR) AND hydration runs on the Client.
Data Fetching	Direct, secure access to databases and secret API keys.	Cannot securely access databases. Must fetch via API endpoints.
Interactivity	NONE. Cannot use `onClick`, `onChange`, or event listeners.	FULL. Can use `onClick`, `onChange`, etc.
State & Lifecycle	NONE. Cannot use `useState` or `useEffect`.	FULL. Can use `useState` and `useEffect`.
Bundle Size	ZERO bytes added to the client JavaScript bundle.	Adds JavaScript to the client bundle.

Interactive Example

import db from '@/lib/database';

// Look at this! We are directly querying a database 
// right inside the React component! 
// This is completely secure because this code NEVER reaches the browser.
export default async function UserList() {
  // 1. Await the DB query directly
  const users = await db.query('SELECT * FROM users');

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

Interview Questions

basic

Can you use the `useState` or `useEffect` hooks inside a Server Component?

intermediate

How do you declare that a component should be a Server Component in the Next.js App Router?

Flash Cards

Question

Use hooks?

Click to reveal answer

Answer

No! Server components execute once to generate HTML and then die. They have no concept of 'state', 'lifecycles', or 'user interaction' (like onClick).

Question

How to declare?

Click to reveal answer

Answer

You do absolutely nothing. In the App Router, every component is a Server Component by default!