Skip to main content

Чому Client Components дорожчі?

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

Client Components вважаються «дорожчими», тому що вони переносять більше роботи в браузер користувача і збільшують обсяг JavaScript, який потрібно завантажити, виконати й підтримувати.

Розберемо, в чому саме ця «дороговизна».

1. Client Components збільшують розмір JS-бандла

Будь-який Client Component:

  • потрапляє в клієнтський JavaScript
  • вимагає React-runtime у браузері
  • тягне за собою залежності

Навіть якщо компонент візуально простий, він:

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

Чим більше Client Components - тим важча сторінка.

2. Вони вимагають гідратації

Client Components мають бути:

  1. завантажені
  2. виконані
  3. «оживлені» (hydration)

Під час гідратації:

  • React зіставляє HTML та JS
  • навішує обробники подій
  • відновлює стан

Це:

  • навантажує CPU
  • блокує основний потік
  • уповільнює інтерактивність

Server Components просто віддали HTML і закінчили.

3. Вся логіка виконується в браузері

Client Components живуть у середовищі користувача:

  • обчислення
  • ефекти
  • обробники подій
  • стан

На слабких пристроях це:

  • уповільнює інтерфейс
  • збільшує затримки при кліках
  • погіршує INP

4. Вони ускладнюють потік даних

Client Components:

  • не можуть напряму звертатися до серверних ресурсів
  • вимагають API-запитів
  • часто викликають додаткові fetch

Це призводить до:

  • більшої кількості мережевих запитів
  • станів завантаження
  • зайвих рендерів

5. Вони погіршують кешування

Server Components:

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

Client Components:

  • часто залежать від стану
  • складніше кешуються
  • гірше підходять для статичного контенту

Це знижує ефективність оптимізацій.

6. Вони впливають на всі ключові метрики

Велика кількість Client Components погіршує:

  • LCP - через важкий JS
  • INP - через блокування
  • TTI - через довгу гідратацію

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

Підсумок

Client Components «дорожчі», тому що вони:

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

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

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

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

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