Skip to main content

Що таке Server Components у Next.js?

Next.jsMiddle~2 хв читання
Запропонувати правку

Server Components у Next.js - це React-компоненти, які виконуються тільки на сервері і не надсилаються у браузер у вигляді JavaScript. Вони дозволяють рендерити UI, завантажуючи дані та виконуючи серверну логіку до того, як сторінка потрапить до користувача.

Ідея простими словами

Зазвичай у React:

  • компонент → JS летить у браузер → там виконується → потім завантажуються дані

Із Server Components:

  • компонент → виконується на сервері
  • сервер одразу повертає готовий HTML
  • браузер взагалі не отримує JS цього компонента

Тобто це React без клієнтського JavaScript.

Що можна робити в Server Components

У Server Components можна:

  • робити fetch напряму
  • звертатися до бази даних
  • використовувати приватні API-ключі
  • читати cookies і headers
  • писати async/await прямо в компоненті

Приклад по суті:

js
async function Page() { const data = await fetch(...) return <div>{data.title}</div> }

Без useEffect, без loaders типово - дані вже є при рендері.

Чого не можна робити в Server Components

Не можна використовувати:

  • useState, useEffect
  • обробники подій (onClick, onChange)
  • браузерні API (window, document)
  • інтерактивність

Причина проста: код не виконується в браузері.

Server Components і Client Components

У Next.js (App Router):

  • усі компоненти серверні типово
  • щоб зробити компонент клієнтським, потрібно явно написати:
js
"use client"

Client Components потрібні, якщо:

  • є інтерактивність
  • є стан
  • є обробники подій
  • потрібні браузерні API

Важливо:

Server Component може імпортувати Client Component, але Client Component не може імпортувати Server Component.

Навіщо це взагалі потрібно

Server Components дають:

  • менше JavaScript у браузері
  • швидше завантаження сторінки
  • кращий TTFB і Core Web Vitals
  • безпечнішу роботу з даними
  • простіший data fetching (без ефектів)

Фактично це зсув логіки назад на сервер, де їй часто і місце.

Типовий сценарій використання

  • Server Component:
    • завантажує дані
    • рендерить основний контент
  • Client Component:
    • кнопки
    • форми
    • фільтри
    • інтерактивні елементи

Такий підхід зараз вважається "нормою" в App Router.

Коротка витяжка

Server Components - це:

  • React-компоненти, які виконуються тільки на сервері
  • не потрапляють у JS-бандл браузера
  • ідеально підходять для data fetching і серверної логіки
  • використовуються типово в App Router
  • інтерактивність виноситься в Client Components

Вони роблять застосунки швидшими, простішими і безпечнішими.

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

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

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

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