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