Что такое SSG?

Что такое SSG (Static Site Generation)?

SSG (Static Site Generation) — это метод построения веб-приложений, при котором HTML страницы генерируются во время сборки (build time), а не при каждом запросе пользователя. Это означает, что вместо динамической генерации страниц на сервере для каждого посетителя, мы заранее создаём готовые HTML файлы и просто отправляем их клиентам.

Как работает SSG

Build Time (во время разработки/развёртывания):
  1. Приложение запускается
  2. Извлекаются данные (из БД, CMS, файлов и т.д.)
  3. Для каждой страницы генерируется HTML файл
  4. Готовые файлы размещаются на сервере

Request Time (когда пользователь открывает страницу):
  Сервер просто отправляет готовый HTML файл (очень быстро)

Различие между SSG, SSR и CSR

SSR (Server-Side Rendering) — страница генерируется на каждый запрос на сервере:

Пользователь запросил страницу
  ↓
Сервер генерирует HTML
  ↓
Отправляет HTML клиенту
  ↓
Браузер рендерит

SSG (Static Site Generation) — страница генерируется один раз при сборке:

Время разработки (один раз)
  ↓
Сервер генерирует HTML для всех страниц
  ↓
Готовые файлы хранятся
  ↓
Пользователи получают готовые HTML (очень быстро)

CSR (Client-Side Rendering) — страница генерируется в браузере клиента:

Пользователь получает пустой HTML + JavaScript
  ↓
Браузер скачивает данные через API
  ↓
JavaScript генерирует HTML в браузере
  ↓
Видно на экране

Преимущества SSG

1. Экстремальная скорость загрузки:

// Просто отправляем файл, никакой обработки
response.sendFile("index.html"); // O(1) операция

2. Минимальные требования к серверу — нужен просто статический хостинг (Vercel, Netlify, S3):

npm run build
# Результат: папка с готовыми HTML файлами
# Её можно залить на любой веб-сервер

3. Высокая безопасность — нет серверного кода, который может быть взломан

4. Легко масштабировать — просто дублируйте статические файлы на CDN

5. SEO дружелюбность — весь контент есть в HTML, боты видят всё сразу

Недостатки SSG

1. Статичные данные — если данные часто меняются, нужно пересобирать сайт

2. Долгое время сборки — если страниц тысячи, сборка может занять минуты

3. Зависит от источника данных — при сборке нужно получить доступ к API или БД

Примеры SSG с Next.js

// pages/posts/[id].js в Next.js
export async function getStaticPaths() {
  // Получаем список всех страниц
  const posts = await fetch(https://api.example.com/posts);
  const data = await posts.json();

  return {
    paths: data.map(post => ({
      params: { id: post.id.toString() }
    })),
    // revalidate: 60 - переделать страницы каждые 60 секунд (ISR)
    revalidate: false // статическая генерация
  };
}

export async function getStaticProps({ params }) {
  // Получаем данные для конкретной страницы
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  const data = await post.json();

  return {
    props: { post: data },
    revalidate: 86400 // переделать через 24 часа
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

ISR (Incremental Static Regeneration)

Идея между SSG и SSR — можно регенерировать отдельные страницы в фоне, пока пользователи видят старую версию:

export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 60 // пересобирать каждые 60 секунд в фоне
  };
}
// Сначала показываем старую версию
// Через 60 сек генерируем новую в фоне
// Новые пользователи видят свежую версию

Когда использовать SSG

• Блоги — контент добавляется редко
• Документация — стабильное содержимое
• E-commerce с категориями — каталог относительно статичен
• Landing pages — редко меняющиеся страницы
• Контент-сайты — новости, статьи с фиксированной структурой

Когда НЕ использовать SSG

• Real-time данные — цены акций, чаты, notifications
• Персонализированный контент — профили пользователей
• Много динамических страниц — сборка становится слишком долгой
• Данные часто меняются — постоянная пересборка неэффективна

Гибридный подход

Можно комбинировать подходы — SSG для главной страницы, CSR для профиля пользователя, ISR для каталога продуктов.

Заключение

SSG — это мощный инструмент для создания быстрых, надёжных и масштабируемых веб-приложений. Хотя не все приложения подходят для SSG, для контент-тяжёлых сайтов это может быть оптимальным решением.