Що таке `getStaticProps`?

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
• для максимально швидких і стабільних сторінок