What are server components in Next.js?

Next.jsMiddle~2 min read

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'`

Short Answer

Interview ready

Premium

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