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