Де виконується data fetching у Next.js - на сервері чи клієнті?

Коротка відповідь: і на сервері, і на клієнті. Next.js дозволяє обирати, де саме виконувати data fetching - усе залежить від використовуваного механізму.

---

#Data fetching на сервері

Запити виконуються до того, як HTML надсилається в браузер.

#Де це відбувається:

• Server Components (App Router)
• Server-side rendering (SSR)
• Static generation (SSG)
• Incremental Static Regeneration (ISR)
• Route Handlers / API routes

#Що це дає:

• користувач одразу отримує HTML із даними
• краще для SEO
• можна використовувати приватні API-ключі
• можна напряму звертатися до бази даних
• менше JavaScript іде в браузер

Важливо: код із серверним fetching'ом не потрапляє в клієнтський бандл.

---

#Data fetching на клієнті

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

#Де це відбувається:

• Client Components ("use client")
• useEffect, обробники подій
• fetch, axios, SWR, React Query

#Коли це потрібно:

• дані залежать від дій користувача
• realtime-оновлення
• дані не критичні для SEO
• персональні дані (наприклад, дашборди)

#Мінуси:

• перший рендер може бути без даних
• потрібно показувати loader
• запити видно в DevTools браузера

---

#Особливість App Router

В App Router усі компоненти серверні за замовчанням. Це означає, що звичайний fetch або await у компоненті виконається на сервері.

Щоб запит виконувався на клієнті, потрібно:

• явно вказати "use client"
• або робити запит усередині useEffect

---

#Чи можна поєднувати?

Так, і це звичайна практика:

• сервер отримує основний контент
• клієнт довантажує інтерактивні або користувацькі дані

Приклад:

• сервер рендерить список товарів
• клієнт довантажує фільтри, статус, обране

---

#Як швидко зрозуміти, де виконається код

• Server Component / SSR / SSG / ISR -> сервер
• Client Component / useEffect -> клієнт
• Route Handler -> сервер

---

#Коротке резюме

У Next.js data fetching може виконуватися:

• на сервері - до відправлення HTML, безпечно і корисно для SEO
• на клієнті - у браузері, після рендера

В App Router серверний fetching - варіант за замовчанням, а клієнтський використовується точково, коли без нього не обійтися.