Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чому Client Components дорожчі?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Client Components** вважаються дорожчими, тому що переносять більше роботи в браузер користувача: вони збільшують JS-бандл, вимагають гідратації і навантажують основний потік. **Ключове:** на відміну від Server Components, вони гірше кешуються і погіршують ключові метрики - LCP, INP та TTI.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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 - вимагають гідратації - навантажують браузер - погіршують інтерактивність - складніше кешуютьсяДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.