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