Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке `getStaticProps`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`getStaticProps` - це спеціальна функція в Next.js (Pages Router), яка завантажує дані на сервері один раз під час збирання проєкту, а не при кожному запиті користувача. **Ключове:** сторінка стає статичною і віддається всім користувачам однаковою, тому в `getStaticProps` не можна використовувати дані, що залежать від конкретного користувача.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`getStaticProps` - це спеціальна функція в Next.js, яка **завантажує дані на сервері під час збирання проєкту**, а не при кожному запиті користувача. Вона використовується в **Pages Router** (старий, але все ще підтримуваний підхід у Next.js). --- ## Основна ідея `getStaticProps` каже Next.js наступне: > «Візьми ці дані **один раз при build**, > згенеруй HTML заздалегідь > і потім просто віддавай його всім користувачам» У результаті сторінка стає **статичною**. --- ## Як це працює покроково 1. Ти запускаєш збирання проєкту (`build`) 2. Next.js виконує `getStaticProps` на сервері 3. Всередині функції завантажуються дані (API, база, файли) 4. Next.js генерує HTML з цими даними 5. HTML зберігається як готовий файл 6. Користувачі отримують цей файл без обчислень і запитів Важливо: `getStaticProps` **ніколи не виконується в браузері** --- ## Приклад логіки (без коду) Уяви блог: - є сторінка статті - дані статті беруться з CMS - статті рідко змінюються З `getStaticProps`: - всі статті завантажуються при збиранні - кожна сторінка вже готова - користувач отримує її миттєво --- ## Що можна робити всередині getStaticProps Можна: - звертатися до API - читати дані з бази - використовувати секретні ключі - працювати з файловою системою Не можна: - використовувати `window` - працювати з cookies користувача - отримувати дані, які залежать від конкретного користувача Тому що: - збирання відбувається **без користувача** - один HTML - для всіх --- ## Навіщо потрібен getStaticProps Він вирішує завдання: - максимальна швидкість завантаження - відмінне SEO - мінімальне навантаження на сервер - проста архітектура Ідеально підходить для: - блогів - лендінгів - документації - каталогів - маркетингових сторінок --- ## Оновлення даних (revalidation) Хоча дані завантажуються при збиранні, вони **можуть оновлюватися**: - сторінка залишається статичною - але сервер може пересобирати її через заданий інтервал - користувачі отримують свіжу версію без повного пересбирання проєкту Це дозволяє: - зберегти швидкість - і при цьому не «заморожувати» дані назавжди --- ## Важливий момент `getStaticProps`: - не працює в App Router - не підходить для персональних даних - використовується тільки в Pages Router У App Router його роль виконують: - серверні компоненти - `fetch` з кешуванням і revalidation --- ### Коротко по суті `getStaticProps` - це: - серверне завантаження даних - **один раз при збиранні** - з генерацією готового HTML - для максимально швидких і стабільних сторінокДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.