Що таке SSG у Next.js?
SSG (Static Site Generation) у Next.js - це спосіб рендерингу, при якому HTML-сторінки генеруються заздалегідь, на етапі білда, а користувачам віддаються як готові статичні файли.
Як працює SSG
- Ти запускаєш
next build - Next.js рендерить сторінку один раз
- Готовий HTML зберігається
- При запиті:
- немає сервера
- файл віддається миттєво (часто через 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 секунд
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.