Які способи отримання даних існують у Next.js?

У Next.js є декілька способів отримання даних. Вони відрізняються коли саме завантажуються дані, де виконується код (на сервері чи в браузері) і як часто дані оновлюються.

---

#Основні способи отримання даних

#1. Отримання даних на сервері при кожному запиті (SSR)

Дані завантажуються щоразу, коли користувач відкриває сторінку. Код виконується тільки на сервері.

Коли підходить:

• дані часто змінюються
• важлива актуальність (наприклад, профіль користувача)
• дані залежать від cookies, headers, auth

Особливості:

• користувач завжди бачить свіжі дані
• сторінка завантажується трохи довше, ніж статична

---

#2. Отримання даних під час збирання проєкту (SSG)

Дані завантажуються один раз під час білда, і сторінка стає статичною.

Коли підходить:

• дані майже не змінюються
• блоги, лендінги, документація
• публічний контент

Особливості:

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

---

#3. Інкрементальна статична генерація (ISR)

Це покращена версія SSG. Сторінка статична, але може переоновлюватися через заданий інтервал.

Коли підходить:

• дані оновлюються, але не щосекунди
• новини, каталоги, маркетплейси

Особливості:

• поєднує швидкість статики й актуальність
• оновлення відбувається у фоні

---

#4. Отримання даних на клієнті (Client-side fetching)

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

Зазвичай використовується fetch, axios, SWR, React Query.

Коли підходить:

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

Особливості:

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

---

#5. Використання Route Handlers / API routes

Next.js дозволяє створювати власні API-ендпоінти прямо в проєкті.

Навіщо це потрібно:

• проксувати запити до зовнішніх API
• приховувати секретні ключі
• об'єднувати кілька джерел даних
• обробляти форми

Особливості:

• виконуються тільки на сервері
• використовуються як звичайний backend API

---

#6. Отримання даних у Server Components (App Router)

В App Router можна запитувати дані прямо в компоненті, без окремих функцій.

Що це дає:

• менше boilerplate-коду
• запити виконуються на сервері
• можна використовувати async/await прямо в компоненті

Важливо:

• такі компоненти не потрапляють в JS-бандл браузера
• відмінно підходять для роботи з БД і API

---

#Як обрати спосіб

Коротка логіка вибору:

• Завжди свіжі дані → сервер при запиті (SSR)
• Рідко змінюються → SSG
• Іноді оновлюються → ISR
• Залежать від користувача → client-side
• Потрібен API всередині проєкту → Route Handlers
• App Router і серверна логіка → Server Components

---

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

Next.js підтримує завантаження даних:

• на сервері при запиті
• на етапі збирання
• з автоматичним оновленням
• у браузері
• через вбудовані API
• напряму в серверних компонентах

Вибір способу залежить від частоти оновлення даних, вимог до SEO і місця виконання коду.