Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке серверні компоненти в Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Серверні компоненти (Server Components)** у Next.js - це компоненти React, які **виконуються на сервері**, а не в браузері користувача.

Простіше кажучи:
код такого компонента **ніколи не потрапляє в JavaScript-бандл клієнта** і **не виконується в браузері**.

---

## Головне визначення (коротко для співбесіди)

**Серверний компонент** - це React-компонент, який:

- рендериться **тільки на сервері**
- може напряму працювати з базою даних, файлами, секретами
- не містить інтерактивності (state, ефекти, обробники кліків)
- зменшує розмір JS, що надсилається в браузер

У Next.js (App Router) **усі компоненти типово серверні**, якщо явно не вказано інше.

---

## Як це виглядає на практиці

```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>
  )
}
```

Що тут важливо:

- `async` - нормально
- запит до БД - нормально
- код виконається **на сервері**
- в браузер прийде **вже готовий HTML**

---

## Що серверні компоненти ВМІЮТЬ

Робити `fetch` до API
Працювати з БД (Prisma, SQL, Mongo тощо)
Використовувати секрети (`process.env.SECRET_KEY`)
Читати файли, звертатися до backend-сервісів
Повертати JSX

---

## Що серверні компоненти НЕ ВМІЮТЬ

`useState`
`useEffect`
`useReducer`
обробники подій (`onClick`, `onChange`)
доступ до `window`, `document`, `localStorage`

Чому?
Тому що **на сервері немає браузера**.

---

## Навіщо взагалі потрібні серверні компоненти

### 1. Менше JavaScript у браузері

Код серверного компонента **не надсилається користувачу** → швидше завантаження.

### 2. Безпека

Секрети залишаються на сервері:

- ключі API
- токени
- доступ до БД

### 3. Простіша архітектура

Не потрібно:

- робити окремий backend
- писати API-роути для кожного запиту
Можна отримувати дані **прямо в компоненті**.

---

## Як вони взаємодіють з клієнтськими компонентами

Серверний компонент **може імпортувати клієнтський**, але не навпаки:

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

Це важливе питання на співбесіді.

---

## Коротке порівняння (часто питають)

| Серверний компонент | Клієнтський компонент |
|---|---|
| Рендериться на сервері | Рендериться в браузері |
| Немає інтерактивності | Є інтерактивність |
| Можна працювати з БД | Не можна |
| JS не надсилається | JS надсилається |
| Типово | Потрібен `'use client'` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати369 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.