Як працює генерація статичних сайтів (SSG) у Next.js

SSG (Генерація статичних сайтів) — це стратегія рендерингу, при якій HTML-сторінки генеруються один раз під час збірки (next build). Після розгортання ці сторінки надаються як звичайні статичні файли через CDN.

Як це працює

Збірка (next build)

Next.js викликає серверний компонент або getStaticProps, виконує всі запити до API/БД та генерує HTML-файли для кожної сторінки.

Розгортання

Готові HTML-файли розміщуються на CDN. Сервер більше не бере участі в генерації сторінок.

Запит користувача

Коли користувач відкриває сторінку, CDN миттєво надає готовий HTML. Немає очікування на сервер, немає рендерингу в реальному часі.

SSG в App Router

В App Router (Next.js 13+) SSG є поведінкою за замовчуванням. Якщо компонент не використовує динамічні дані, Next.js автоматично генерує його статично:

tsx

// app/docs/page.tsx
// Ця сторінка буде статично згенерована під час збірки
export default async function DocsPage() {
  const res = await fetch('https://api.itlead.org/docs')
  const docs = await res.json()

  return (
    <ul>
      {docs.map((doc: { slug: string; title: string }) => (
        <li key={doc.slug}>{doc.title}</li>
      ))}
    </ul>
  )
}

За замовчуванням fetch у серверних компонентах кешує результат. Це еквівалент SSG: запит виконується один раз під час збірки.

Динамічні маршрути

Для динамічних сторінок потрібно заздалегідь вказати, які шляхи генерувати. Для цього використовуйте generateStaticParams:

tsx

// app/docs/[slug]/page.tsx
export async function generateStaticParams() {
  const res = await fetch('https://api.itlead.org/docs')
  const docs = await res.json()

  return docs.map((doc: { slug: string }) => ({
    slug: doc.slug
  }))
}

export default async function DocPage({
  params
}: {
  params: { slug: string }
}) {
  const res = await fetch(
    `https://api.itlead.org/docs/${params.slug}`
  )
  const doc = await res.json()

  return (
    <article>
      <h1>{doc.title}</h1>
      <div>{doc.content}</div>
    </article>
  )
}

Під час збірки Next.js викликає generateStaticParams, отримує список слугів і генерує окремий HTML-файл для кожного.

SSG в Pages Router (Спадщина)

В Pages Router SSG використовує getStaticProps:

tsx

// pages/docs/index.tsx
export async function getStaticProps() {
  const res = await fetch('https://api.itlead.org/docs')
  const docs = await res.json()

  return {
    props: { docs }
  }
}

export default function DocsPage({ docs }) {
  return (
    <ul>
      {docs.map(doc => (
        <li key={doc.slug}>{doc.title}</li>
      ))}
    </ul>
  )
}

Для динамічних маршрутів також потрібен getStaticPaths:

tsx

// pages/docs/[slug].tsx
export async function getStaticPaths() {
  const res = await fetch('https://api.itlead.org/docs')
  const docs = await res.json()

  return {
    paths: docs.map(doc => ({ params: { slug: doc.slug } })),
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://api.itlead.org/docs/${params.slug}`
  )
  const doc = await res.json()

  return { props: { doc } }
}

Коли використовувати SSG

Добре підходить для:

Документації (як на IT Lead)
Блогів та статей
Лендінгів, маркетингових сайтів
FAQ, розділів довідки
Каталогів продуктів, які оновлюються рідко

Не підходить для:

Сторінок з персоналізованим контентом (профіль, панель управління)
Даних, що змінюються кожну секунду (ціни акцій, чати)
Сторінок, що залежать від куків або заголовків запиту

Порада на співбесіді:

Звичайне запитання: "Що, якщо дані стануть застарілими після збірки?". Відповідь: для цього існує ISR (Інкрементальна статична регенерація). Це дозволяє оновлювати статичні сторінки без повної збірки.

Переваги SSG

Швидкість. Готовий HTML надається миттєво. Немає часу очікування на сервер.
SEO. Пошукові боти отримують повний HTML-контент відразу.
Надійність. Статичні файли не залежать від доступності бази даних або API під час запиту.
Вартість. Хостинг на CDN дешевший, ніж серверний рендеринг на кожен запит.

Корисні ресурси

nextjs.org/docs — документація по статичному рендерингу
generateStaticParams — API Reference

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань