Skip to main content

Чи можна робити await fetch прямо в компоненті?

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

Коротко: так, можна - але тільки в серверних компонентах.

Розберемось детальніше, щоб не було плутанини.

Коли 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.

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

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

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

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