Що таке серверні компоненти в Next.js?

Next.jsMiddle~1 хв читання

Серверні компоненти (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'`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.