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