Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чи можна робити await fetch прямо в компоненті?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Так, `await fetch` можна робити прямо в компоненті - **але тільки в серверних компонентах**, оскільки вони можуть бути `async` і виконуються тільки на сервері. **Ключове:** у клієнтських компонентах (`"use client"`) `await fetch` у тілі компонента неможливий - дані там отримують через `useEffect` або бібліотеки на кшталт SWR / React Query.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКоротко: **так, можна - але тільки в серверних компонентах**. Розберемось детальніше, щоб не було плутанини. --- ## Коли `await fetch` у компоненті - це нормально У **Next.js (App Router)** усі компоненти **серверні типово**, а отже: - компонент може бути `async` - можна писати `await fetch(...)` прямо в тілі компонента - запит виконається **на сервері** - браузер отримає вже готовий HTML з даними Приклад за змістом: ```js export default async function Page() { const res = await fetch("https://api.example.com/posts") const posts = await res.json() return ( <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> ) } ``` Тут: - немає `useEffect` - немає завантаження після рендеру - дані вже є при показі сторінки --- ## Чому це працює саме в Server Components Server Component: - виконується **тільки на сервері** - не потрапляє в JS-бандл браузера - може бути `async` - може звертатися до API, БД, секретів По суті, це React-компонент + серверна логіка в одному місці. --- ## Коли `await fetch` **не можна** робити прямо в компоненті Якщо компонент **клієнтський**, тобто на початку є: ```js "use client" ``` - тоді **не можна** писати `await fetch` прямо в тілі компонента. Причини: - клієнтські компоненти мають бути синхронними - рендер у браузері не може «зачекати» `await` У такому випадку дані отримують: - через `useEffect` - або через бібліотеки на кшталт SWR / React Query --- ## Як зрозуміти, де виконається `fetch` Просте правило: - Server Component → `await fetch` виконається **на сервері** - Client Component (`"use client"`) → fetch тільки: - в `useEffect` - в обробниках подій --- ## Чи можна комбінувати Так, і так роблять найчастіше: - Server Component: - робить `await fetch` - передає дані вниз - Client Component: - відповідає за інтерактивність Це вважається правильною архітектурою в App Router.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.