Які завдання краще вирішувати серверними компонентами?

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

Серверні компоненти в Next.js найкраще використовувати для завдань, де не потрібна інтерактивність, але важливі дані, продуктивність і безпека.

Нижче - розбір по пунктах, саме в тому вигляді, як цього чекають на співбесідах.

Коротка відповідь (для інтерв'ю)

Серверні компоненти підходять для:

отримання і підготовки даних
рендерингу статичного і напівстатичного контенту
роботи з БД і секретами
побудови основної структури сторінки

Усе, що не вимагає реакції на дії користувача, краще робити серверним компонентом.

1. Отримання даних (fetch, БД, backend)

Чому сервер:

немає CORS
немає витоку секретів
швидше (запити йдуть із дата-центру)

tsx

// Server Component
export default async function ProductsPage() {
  const products = await getProductsFromDB()

  return <ProductsList products={products} />
}

Типове питання: «Чому не робити fetch на клієнті?» Відповідь: тому що сервер швидший, безпечніший і не збільшує JS-бандл.

2. Робота з базою даних

Серверні компоненти можуть напряму звертатися до БД:

Prisma
SQL
MongoDB
внутрішні сервіси

const users = await prisma.user.findMany()

безпечно
просто
без API-шарів

3. Робота із секретами і приватними даними

Серверні компоненти підходять для:

API-ключів
токенів
приватних endpoint'ів
внутрішніх сервісів

process.env.API_SECRET

Такий код ніколи не потрапить у браузер.

4. Рендеринг статичного і SEO-контенту

Серверні компоненти ідеальні для:

лендингів
блогів
сторінок каталогу
SEO-сторінок

Причини:

готовий HTML
швидке відображення
хороший SEO
менше JS

5. Компонування сторінки (layout)

Серверні компоненти зручно використовувати для:

layout'ів
хедерів
футерів
навігації
сторінок (page.tsx)

tsx

export default function Layout({ children }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  )
}

Якщо хедер не інтерактивний - він має бути серверним.

6. Попередня обробка і агрегація даних

Серверні компоненти хороші для:

об'єднання даних із кількох джерел
фільтрації
сортування
підрахунків

const data = await Promise.all([
  getUsers(),
  getOrders()
])

Клієнту приходить уже готовий результат, а не логіка.

7. Мінімізація клієнтського JavaScript

Кожен клієнтський компонент:

збільшує бандл
сповільнює завантаження
вимагає гідрації

Тому:

якщо компонент можна зробити серверним - його потрібно робити серверним

Типові завдання - коротко списком

завантаження даних
сторінки і layout'и
SEO-контент
робота з БД
робота із секретами
підготовка даних
рендеринг списків без інтерактивності

Коли НЕ варто використовувати серверні компоненти

кнопки і кліки
форми з live-валідацією
модалки
dropdown / tabs
анімації
стан UI

Тут потрібні клієнтські компоненти.

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

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

Premium

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