Як Next.js завантажує дані на сервері?

Next.js завантажує дані на сервері до того, як сторінка буде відправлена користувачу в браузер. Це означає, що HTML формується вже з готовими даними, а не «порожнім» з подальшим завантаженням через JavaScript.

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

---

#1. Завантаження даних під час рендеру сервера (Server Components)

У сучасному Next.js (App Router) компоненти за замовчуванням виконуються на сервері. Це означає, що ти можеш прямо всередині компонента робити запити до бази даних чи API.

Приклад логіки:

• приходить запит від користувача
• сервер виконує компонент
• всередині компонента викликається fetch або запит до БД
• сервер формує HTML
• готовий HTML відправляється в браузер

Важливо:

• цей код ніколи не потрапить у браузер
• можна безпечно використовувати секрети (токени, ключі)
• дані завантажуються швидше, тому що немає зайвого запиту з клієнта

---

#2. fetch на сервері (з кешуванням за замовчуванням)

Коли ти використовуєш fetch всередині серверного компонента:

• запит виконується на сервері
• Next.js автоматично кешує результат, якщо явно не сказати протилежне

Приклад поведінки:

• перший запит -> дані завантажуються з API
• наступні запити -> дані беруться з кешу
• сервер не робить повторний HTTP-запит без потреби

Це робить завантаження даних:

• швидшим
• стабільнішим
• дешевшим (менше запитів)

---

#3. Динамічне завантаження даних (без кешу)

Іноді дані мають бути завжди актуальними (наприклад, профіль користувача).

У цьому випадку:

• Next.js завантажує дані при кожному запиті
• кеш вимикається

По суті:

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

Такий підхід підходить для:

• авторизованих даних
• персональних сторінок
• часто змінюваної інформації

---

#4. Завантаження даних під час збірки (Static Generation)

Next.js може завантажити дані один раз - під час збірки проекту.

Як це працює:

• під час build
• сервер робить запити до API чи БД
• HTML зберігається як статичний файл
• користувачі отримують вже готову сторінку

Плюси:

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

Мінус:

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

---

#5. Оновлення даних без повного пересбирання (revalidation)

Next.js вміє переоновлювати дані на сервері:

• за часом (наприклад, раз на 60 секунд)
• за подією (наприклад, після зміни даних)

Процес виглядає так:

• користувач заходить на сторінку
• якщо кеш «свіжий» - віддається старий HTML
• якщо застарів - сервер оновлює дані і кеш

Це баланс між:

• актуальністю даних
• швидкістю завантаження

---

#Коротка картина цілком

Коли Next.js завантажує дані на сервері:

• запити виконуються до відправлення HTML
• дані можуть бути:
  • закешовані
  • динамічні
  • статичні
• розробник керує цим через налаштування fetch і тип рендеру