Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чи можна використовувати fetch напряму в Server Component?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Так, **можна** - і це один із найтиповіших способів завантаження даних в App Router. **Ключове:** `fetch` напряму в Server Component використовувати можна і потрібно, це базовий патерн Next.js (App Router).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТак, **можна** - і це один із найтиповіших способів завантаження даних в App Router. У Next.js **Server Components виконуються на сервері**, тому `fetch` всередині них: - запускається **на сервері**, а не в браузері - може безпечно використовувати **секрети** (через `process.env`) - підтримує **кешування і revalidation** на рівні Next.js - не збільшує клієнтський JavaScript-бандл (бо код не йде на клієнт) --- ## Як це зазвичай виглядає логічно - Серверний компонент рендериться - Всередині нього викликається `fetch()` - Next.js чекає на відповідь - Формує HTML вже з даними - Віддає HTML користувачу --- ## Кеш за замовчуванням: важливий момент В App Router `fetch` у серверному компоненті **зазвичай кешується** (для "статичної" поведінки), якщо: - запит вважається кешованим - ти не вимкнув кеш явно Через це іноді люди дивуються: "Чому дані не оновлюються при кожному оновленні сторінки?" Це найчастіше тому, що використовується кеш. --- ## Як керувати поведінкою ### 1) Завжди свіжі дані Якщо потрібно отримувати дані **на кожен запит** (наприклад, персональні дані або значення, що швидко змінюються) - кеш вимикають. Логіка: "не зберігай і не перевикористовуй відповідь". ### 2) Оновлювати раз на N секунд Якщо потрібно, щоб дані були "майже свіжі", але без запитів на кожен захід - задають revalidation. Логіка: "тримай відповідь у кеші N секунд, потім онови". ### 3) Статично (максимальний кеш) Якщо дані майже не змінюються - можна залишити кешування, і сторінка буде дуже швидкою. --- ## Обмеження та нюанси ### 1) Не можна використовувати браузерні штуки У Server Component немає: - `window` - `localStorage` - `document` - `useEffect` Якщо тобі потрібно щось "після завантаження в браузері" - це вже Client Component. ### 2) Для приватних даних краще уникати спільного кешу Якщо запит залежить від конкретного користувача (cookies/headers/session), важливо: - або вимкнути кеш - або акуратно налаштувати, щоб не закешувати "чужі" дані і не віддати їх іншому користувачу --- ## Підсумок **Так,** `fetch` **напряму в Server Component використовувати можна і потрібно**, це базовий патерн Next.js (App Router): - дані завантажуються на сервері - HTML приходить вже заповненим - кеш і оновлення контролюються налаштуваннямиДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.