Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке SSG у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**SSG (Static Site Generation)** у **Next.js** - це спосіб рендерингу, при якому **HTML-сторінки генеруються заздалегідь, на етапі білда**, а користувачам віддаються як **готові статичні файли**. **Ключове:** SSG підходить, коли дані не залежать від користувача, контент рідко змінюється і важливі швидкість та SEO.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**SSG (Static Site Generation)** у **Next.js** - це спосіб рендерингу, при якому **HTML-сторінки генеруються заздалегідь, на етапі білда**, а користувачам віддаються як **готові статичні файли**. ## Як працює SSG 1. Ти запускаєш `next build` 2. Next.js **рендерить сторінку один раз** 3. Готовий HTML зберігається 4. При запиті: - **немає сервера** - файл віддається миттєво (часто через CDN) ``` build time → HTML → CDN → user ``` --- ## Коли використовується SSG SSG застосовується, якщо: - дані **не залежать від користувача** - контент **рідко змінюється** - важливі **швидкість і SEO** Типові кейси: - лендинги - документація - блог - довідкові сторінки - публічні роадмапи --- ## Приклад SSG в App Router ```ts // app/blog/page.tsx export const dynamic = "force-static"; export default async function Page() { const posts = await getPosts(); // виконається при build return <PostsList posts={posts} />; } ``` Або через `fetch`: ```ts await fetch("https://api.example.com/posts", { cache: "force-cache", // за замовчуванням → SSG }); ``` --- ## Плюси SSG - максимальна швидкість - відмінне SEO - мінімальне навантаження на сервер - дешевий хостинг - ідеально для CDN --- ## Мінуси SSG - дані **не оновлюються** без ребілда - не можна персоналізувати контент - не підходить для auth / user-data --- ## SSG vs SSR | | SSG | SSR | |---|---|---| | Коли рендер | build time | request time | | Швидкість | Дуже висока | Висока | | SEO | Відмінне | Відмінне | | Актуальність | Ні | Так | | Сервер | не потрібен | потрібен | --- ## SSG ≠ тільки «чиста статика» У Next.js SSG легко розширюється до **ISR**: ```ts export const revalidate = 60; ``` Сторінка: - лишається статичною - **оновлюється у фоні** раз на 60 секундДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.