SSG
Определение: SSG (Static Site Generation) — это подход, когда страницы генерируются заранее в виде готовых HTML-файлов (обычно на этапе сборки), а затем раздаются как статический сайт. В отличие от SSR, сервер не “собирает” страницу на каждый запрос: пользователь получает уже подготовленный HTML, что часто даёт быструю загрузку и простое масштабирование.
Зачем это нужно
- Получать быстрый первый показ: браузер сразу получает готовый HTML без серверного рендера на лету.
- Упрощать инфраструктуру: статические файлы легко размещать на хостинге или CDN.
- Повышать стабильность при нагрузке: статике проще выдерживать много посещений.
- Улучшать SEO для контентных страниц: контент уже в HTML и обычно хорошо индексируется.
- Снижать риски ошибок на продакшене: меньше “живой” логики на сервере для рендеринга.
- Подходить для блогов, лендингов, документации и каталогов, которые обновляются по расписанию.
Пример
Пример кода:
// Идея SSG: на этапе сборки формируем статические страницы (упрощённо)
const pages = [
{ slug: 'about', title: 'О компании' },
{ slug: 'contacts', title: 'Контакты' }
];
pages.forEach((p) => {
const html = `<h1>${p.title}</h1><p>Страница сгенерирована заранее.</p>`;
// В реальности здесь запись файла: /dist/about/index.html и т.д.
console.log('build:', p.slug);
});
Скриншот
Подпись к скриншоту: результат сборки SSG: папка с готовыми HTML-страницами и папкой assets (статические файлы)
Частые ошибки
- Выбирать SSG для часто меняющихся данных без стратегии обновления (пересборка, плановые обновления, ISR и т.д.).
- Путать SSG и “просто статический сайт”: SSG обычно означает, что страницы генерируются из данных/шаблонов.
- Не продумать источники контента: откуда берутся данные и как запускается пересборка.
- Генерировать слишком много страниц без оптимизации, получая долгую сборку и тяжёлый деплой.
- Думать, что SSG не нуждается в оптимизации фронтенда: бандлы и изображения всё равно влияют на скорость.
Связанные термины
Наши услуги
- Создание корпоративных сайтов — подберём подход (SSG/SSR/SPA) и соберём сайт под задачи скорости и SEO.
- Доработка сайтов — настроим генерацию страниц, сборку и обновления контента.
- Техническая поддержка сайта — следим за сборкой, деплоем и стабильностью сайта после обновлений.