Розробка SSG (Static Site Generation) для сайту

Розробка SSG (Static Site Generation) для веб-сайту

Static Site Generation — генерація HTML-файлів на етапі збірки, а не при кожному запиті. Сервер відправляє готовий HTML прямо з CDN без серверного рендеру та баз даних у критичному шляху. Результат: мінімальний TTFB, масштабування без додаткових серверів, максимальна надійність.

SSG підходить для контенту, який оновлюється рідко або за розкладом: документація, блоги, лендинги, маркетингові сайти, портфоліо, каталоги.

Інструменти та їхнє застосування

Для більшості завдань рекомендуємо Astro — він генерує нульовий клієнтський JS за замовчуванням та підтримує компоненти React/Vue/Svelte одночасно.

Реалізація на Astro

---
// src/pages/blog/[slug].astro
import { getCollection, type CollectionEntry } from 'astro:content';
import BlogLayout from '@/layouts/BlogLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

interface Props { post: CollectionEntry<'blog'>; }
const { post } = Astro.props;
const { Content, headings, remarkPluginFrontmatter } = await post.render();
---

<BlogLayout
  title={post.data.title}
  description={post.data.description}
  publishedAt={post.data.publishedAt}
  readingTime={remarkPluginFrontmatter.minutesRead}
>
  <Content />
</BlogLayout>

// src/content/config.ts — типізована схема контенту
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().max(160),
    publishedAt: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Інтеграція з Headless CMS

Статичні сайти не означають статичний контент. Дані отримуються при збірці з API:

// src/lib/cms.ts — інтеграція з Contentful
import contentful from 'contentful';

const client = contentful.createClient({
  space: import.meta.env.CONTENTFUL_SPACE_ID,
  accessToken: import.meta.env.CONTENTFUL_ACCESS_TOKEN,
});

export async function getProducts(): Promise<Product[]> {
  const entries = await client.getEntries<ProductFields>({
    content_type: 'product',
    order: ['-sys.createdAt'],
    limit: 1000,
  });

  return entries.items.map(item => ({
    id: item.sys.id,
    name: item.fields.name,
    slug: item.fields.slug,
    price: item.fields.price,
    image: `https:${item.fields.image.fields.file.url}`,
  }));
}

При кожному розгортанні (або через вебгачок від CMS) сайт пересобирається з актуальними даними.

Оптимізація зображень

---
import { Image } from 'astro:assets';
import heroImage from '@/assets/hero.jpg';
---

<!-- Astro автоматично конвертує в WebP/AVIF, додає srcset -->
<Image
  src={heroImage}
  alt="Опис"
  width={1200}
  height={600}
  format="avif"
  quality={80}
/>

Для зовнішніх зображень з CMS — через <Image src={url} /> з налаштованими доменами в astro.config.mjs.

Інкрементна збірка для великих сайтів

При тисячах сторінок повна пересборка займає хвилини. Рішення:

• Astro Content Collections з кешем — пересобираються тільки змінені сторінки
• Turbo Remote Caching — кеш збірки між CI-запусками
• Часткові збірки через вебгачок: Contentful/Sanity викликає розгортання тільки при змінах конкретного контенту

# Netlify: пересборка тільки при змінах певних полів CMS
{
  "build": {
    "command": "npm run build",
    "publish": "dist"
  },
  "functions": {
    "directory": "netlify/functions"
  }
}

Розгортання

SSG-сайт — це директорія зі статичними файлами. Розгортається будь-де:

• Cloudflare Pages — безплатний тариф, 500 збірок/місяць, глобальна CDN
• Netlify — простий робочий процес, вбудовані форми та функції
• Vercel — оптимально для Next.js
• GitHub Pages — через Actions для проектів з відкритим кодом
• S3 + CloudFront — для AWS-інфраструктури з повним контролем

Строки реалізації

• Тиждень 1: вибір інструменту, структура проекту, схема контенту, дизайн-система
• Тиждень 2: шаблони сторінок, інтеграція з CMS, SEO (sitemap, robots.txt, OpenGraph)
• Тиждень 3: оптимізація зображень, Пошук (Pagefind або Algolia DocSearch), конвеєр розгортання
• Тиждень 4: тестування продуктивності, налаштування вебгачків для пересборки, навчання контент-команди