Чим Next.js відрізняється від React у плані отримання даних?

React і Next.js - це про різні рівні застосунку, і через це підхід до отримання даних сильно відрізняється.

#Що є в React

React сам по собі не дає «вбудованих» способів data fetching на рівні фреймворка. Це бібліотека для UI, тому зазвичай дані отримують так:

• запити в браузері: fetch/axios в useEffect
• бібліотеки для запитів і кешу: SWR, React Query
• стан завантаження/помилок обробляєш вручну (або через ці бібліотеки)
• якщо потрібен серверний рендеринг чи статична генерація - це вже окрема інфраструктура (наприклад, налаштувати SSR самому через Node/Express тощо)

Підсумок у React: найчастіше дані вантажаться після першого рендеру в браузері, а питання SEO, SSR/SSG, кешування «на сервері» React не вирішує з коробки.

---

#Що додає Next.js поверх React

Next.js - це фреймворк навколо React, який додає серверний рівень і правила, коли і де можна отримувати дані.

#1) Можна отримувати дані на сервері, а не лише в браузері

У Next.js можна завантажити дані:

• на сервері при запиті (сторінка вже приходить користувачу з даними)
• під час збірки (сторінка статична)
• з періодичним оновленням (ISR)
• у Server Components (в App Router - прямо в компоненті)

Це змінює UX і SEO: користувач отримує HTML вже з даними, а не «порожню сторінку + спінер, поки useEffect сходив в API».

---

#2) Є вбудовані стратегії: SSR / SSG / ISR

У чистому React ти обираєш лише «клієнтські запити» (якщо не будуєш SSR сам). У Next.js ти обираєш стратегію під дані:

• SSR - завжди свіжі дані
• SSG - максимальна швидкість (дані на build)
• ISR - баланс (статика + оновлення)
• Client fetching - коли потрібно

Це не просто «де написати fetch», а «як працюватиме сторінка загалом».

---

#3) Кеш і revalidation - частина платформи

У Next.js (особливо App Router) є вбудована логіка кешування запитів і механізм «онови дані» (revalidate) на рівні сервера/рендеру.

У React кешування зазвичай вирішують:

• вручну (стан + ефекти)
• через SWR/React Query
• через зовнішні CDN/проксі, але це вже інфраструктура

---

#4) Можна ховати секрети і ходити в БД безпечно

У React, якщо ти робиш запити з браузера, то:

• ключі API не можна зберігати в коді
• прямий доступ до бази даних неможливий (і небезпечний)
• часто потрібен окремий backend

У Next.js можна:

• робити запити на сервері (Server Components/SSR/Route Handlers)
• використовувати приватні ключі та доступ до бази, не надсилаючи це на клієнт
• робити API routes / Route Handlers прямо в проекті

---

#5) Менше «рухів» на клієнті - менше JS у браузері

Якщо дані завантажуються на сервері, то:

• менше коду йде в бандл
• швидший перший meaningful render
• іноді можна обійтися без useEffect взагалі

У чистому React часто все зав'язано на клієнтський рендер і подальші запити.

---

#Простий приклад «відчуття різниці»

React (типово):

1. браузер отримує порожнюватий UI
2. useEffect робить запит
3. показуємо loader -> потім дані

Next.js (серверний варіант):

1. сервер робить запит
2. браузер отримує HTML вже з даними
3. loader може взагалі не знадобитися (або буде мінімальним)

---

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

• React: отримання даних найчастіше на клієнті; SSR/SSG/ISR не вбудовані, потрібні зовнішні рішення.
• Next.js: дає серверний рендеринг, статичну генерацію, оновлення статики, Server Components та API-роути, тобто керує тим, коли/де вантажаться дані, кешуються й оновлюються.