20. Static vs Hybrid рендеринг

Astro предлагает три режима вывода, позволяя тебе выбрать оптимальную стратегию для каждой страницы. Это называется гибридным рендерингом — большинство страниц статичные и молниеносные, а те, которым нужны живые данные, рендерятся на сервере.

Думай о гибридном подходе как о хорошем ресторане: холодные закуски (статика) готовятся заранее и подаются мгновенно, горячие блюда (SSR) готовятся по заказу.

---

Три режима output

astro.config.mjs

export default defineConfig({
  output: 'static',   // По умолчанию. Всё статично.
  // output: 'server',   // Всё SSR (кроме явно prerender=true)
  // output: 'hybrid',   // Всё статично (кроме явно prerender=false)
});

---

Управление рендерингом на уровне страницы

---
// В режиме 'server' — сделать страницу статичной:
export const prerender = true;

// В режиме 'hybrid' — сделать страницу SSR:
export const prerender = false;
---

---

Практический пример: блог с гибридным рендерингом

src/pages/
  index.astro          → static  (landing — не меняется)
  about.astro          → static  (о нас — не меняется)
  blog/
    index.astro        → static  (список постов — пересобирается)
    [slug].astro       → static  (посты — быстро с CDN)
  dashboard/
    index.astro        → SSR     (нужна авторизация)
    settings.astro     → SSR     (персональные данные)
  api/
    subscribe.ts       → SSR     (API endpoint)
    search.ts          → SSR     (динамический поиск)

---

Конфигурация hybrid-режима

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid',
  adapter: vercel(),
});

src/pages/dashboard.astro

---
// Отключаем prerender для этой страницы
export const prerender = false;

const user = await getUser(Astro.cookies);
if (!user) return Astro.redirect('/login');
---
<h1>Привет, {user.name}</h1>

---

Incremental Static Regeneration (ISR)

ISR — это концепция, при которой статические страницы автоматически обновляются через заданный интервал:

// С адаптером Vercel можно включить ISR
export const prerender = true;

// Страница пересобирается каждые 60 секунд
export const config = {
  isr: {
    expiration: 60,
  },
};

Это золотая середина: страница статична (быстро), но обновляется регулярно (свежо).

---

Когда что выбирать

Тип страницы	Рекомендация	Причина
Лендинг, About, Contacts	static	Меняются редко, нужна максимальная скорость
Блог-посты	static + ISR	Много страниц, данные меняются иногда
Каталог товаров	static + ISR	Частые обновления цен → ISR
Корзина, Профиль	SSR	Персонализация
Поиск, Фильтры	SSR	Динамические данные
API endpoints	SSR	Всегда
Чат, Live данные	SSR + WebSocket	Real-time

---

Статика: преимущества CDN

Пользователь в Токио запрашивает ваш сайт
  ↓
CDN edge в Токио (~ 5ms) — статика там!
  ↓
Ответ за ~8ms 🚀

VS

Пользователь в Токио → SSR сервер в Берлине (~180ms RTT)
→ Выполнить JS → Сформировать HTML → Отправить ответ
= ~300-400ms 🐢

---

Интерактивная практика