Suggest an edit

Improve this article

Refine the answer for “What are server components in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Server Components** in Next.js are React components that **run on the server**, not in the user's browser.

Simply put:
the code of such a component **never ends up in the client's JavaScript bundle** and **never runs in the browser**.

---

## Main definition (short, for interviews)

A **server component** is a React component that:

- renders **only on the server**
- can work directly with a database, files, secrets
- contains no interactivity (state, effects, click handlers)
- reduces the size of the JS sent to the browser

In Next.js (App Router), **all components are server components by default**, unless explicitly stated otherwise.

---

## What this looks like in practice

```tsx
// app/page.tsx
export default async function Page() {
  const users = await fetchUsersFromDB()

return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  )
}
```

What matters here:

- `async` - fine
- a DB query - fine
- the code executes **on the server**
- the browser receives **ready-made HTML**

---

## What server components CAN do

Make a `fetch` to an API
Work with a DB (Prisma, SQL, Mongo, etc.)
Use secrets (`process.env.SECRET_KEY`)
Read files, call backend services
Return JSX

---

## What server components CANNOT do

`useState`
`useEffect`
`useReducer`
event handlers (`onClick`, `onChange`)
access to `window`, `document`, `localStorage`

Why?
Because **there is no browser on the server**.

---

## Why server components are needed at all

### 1. Less JavaScript in the browser

The code of a server component **is not sent to the user** -> faster loading.

### 2. Security

Secrets stay on the server:

- API keys
- tokens
- DB access

### 3. Simpler architecture

You don't need to:

- build a separate backend
- write API routes for every request
You can fetch data **directly in the component**.

---

## How they interact with client components

A server component **can import a client component**, but not the other way around:

```tsx
// Server Component
import Button from './Button'

export default function Page() {
  return <Button />
}
```

```tsx
// Client Component
'use client'

export default function Button() {
  return <button>Click</button>
}
```

This is an important interview question.

---

## Short comparison (frequently asked)

| Server component | Client component |
|---|---|
| Renders on the server | Renders in the browser |
| No interactivity | Has interactivity |
| Can work with a DB | Cannot |
| JS is not sent | JS is sent |
| Default | Needs `'use client'` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts415 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.