Статична Генерація Сайту (SSG)

Сторінки попередньо будуються під час збірки для максимальної продуктивності. Найкраще для Блогів, Документації та маркетингових сайтів з контентом, який не змінюється часто.

Час Збірки

Отримати дані під час збірки
React.renderToStaticMarkup()
Зберігати HTML на CDN

Час Виконання

🌐
Request
Response
🖥️
CDN подає статичний HTML

Клієнт

Клієнт надсилає запит
Клієнт отримує HTML
React.hydrate()
Сторінка інтерактивна
Переваги x Компроміси

Benefits

  • Максимальна Продуктивність: Найшвидше можливе завантаження
  • CDN Розподіл: Глобальна доставка контенту
  • Ефективність Витрат: Мінімальні ресурси сервера потрібні
  • Безпека: Без уразливостей серверної сторони

Trade-offs

  • Застарілі дані: Контент оновлюється лише при rebuild
  • Довгі часи збірки: Всі сторінки генеруються при build
  • Немає динамічного контенту: Не можна персоналізувати для користувача
  • Потрібна перебудова: Зміни потребують нового деплою
Як реалізувати?

SSG використовує асинхронні Server Components, попередньо відрендерені під час збірки. Для динамічних маршрутів як [id], використовуйте generateStaticParams() для генерації всіх статичних сторінок під час збірки.

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  return fetch('https://api.example.com/posts').then(res => res.json());
}

export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then(res => res.json());
  return <article>{post.content}</article>;
}
  • Компоненти є асинхронними функціями (без директиви 'use client')
  • Не можна використовувати React hooks (useState, useEffect, тощо)
  • Використовуйте 'cache: "force-cache"' у fetch для статичних даних
  • Сторінки генеруються під час збірки, а не на запит