Как устроен движок Astro — архитектура изнутри

Astro — это статический генератор сайтов (SSG), который при необходимости может работать как серверный рендерер (SSR). Его ключевая идея: «Zero JS by default» — на клиент отправляется только тот JavaScript, который действительно нужен.

1. Фазы работы

Фаза	Что происходит	Инструменты
Build	Компиляция всех `.astro`, `.md`, `.mdx` файлов в статический HTML	Vite, Rollup
Render	Рендеринг каждой страницы в HTML-файл	Astro Renderer
Optimize	Минификация, оптимизация изображений, CSS	Vite, Sharp
Output	Генерация папки `dist/` с готовым сайтом	—

2. Компонентная модель

Astro-компонент (.astro файл) состоит из двух частей:

---
// 1. Frontmatter (серверный код) — выполняется ТОЛЬКО при сборке
import Header from './Header.astro';
const title = 'Привет!';
---

<!-- 2. Template (HTML) — отправляется клиенту -->
<html>
  <head><title>{title}</title></head>
  <body>
    <Header />
    <h1>{title}</h1>
  </body>
</html>

Ключевой момент: код в --- выполняется на сервере при сборке, результат — чистый HTML. Никакого JavaScript на клиенте.

3. Vite — сердце сборки

Astro использует Vite как свой сборщик:

.astro файлы → Vite → Rollup → HTML/CSS/JS
   ↓
Vite-плагины (Tailwind, React, Vue...)
   ↓
Rollup-плагины (оптимизация, tree-shaking)

Это позволяет:

Использовать npm-пакеты
Импортировать любые фреймворки (React, Vue, Svelte)
Горячую перезагрузку при разработке (npm run dev)

4. Islands Architecture (Острова)

Это главная фишка Astro. По умолчанию компоненты рендерятся в статический HTML. Но можно сделать компонент интерактивным:

<!-- Серверный (статический) -->
<Header />

<!-- "Остров" — интерактивный компонент на клиенте -->
<SearchBar client:load />     <!-- загрузить JS сразу -->
<Slider client:visible />     <!-- загрузить когда виден -->
<Modal client:idle />         <!-- загрузить когда браузер свободен -->
<Counter client:media="(max-width: 768px)" /> <!-- загрузить по media query -->

Что это значит:

Директива	Когда загружается JS
`client:load`	Сразу при загрузке страницы
`client:visible`	Когда компонент появляется в viewport
`client:idle`	Когда браузер свободен
Без директивы	0KB JavaScript на клиенте

5. Content Collections

Система управления контентом:

src/content/blog/статья.md
       ↓
content.config.ts (схема через Zod)
       ↓
getCollection('blog') → типизированные данные
       ↓
render(post) → { Content } → рендеринг в HTML

Zod валидирует фронтматтер на этапе сборки — ошибки видны до запуска.

6. Маршрутизация

Astro использует файловую маршрутизацию:

src/pages/index.astro       → /
src/pages/blog/index.astro  → /blog
src/pages/blog/[slug].astro → /blog/любой-slug (динамический)

Динамические маршруты работают через getStaticPaths():

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

Astro генерирует отдельный HTML-файл для каждой страницы при сборке.

7. SSR режим (опционально)

По умолчанию Astro генерирует статические файлы. Но можно включить SSR:

// astro.config.mjs
export default defineConfig({
  output: 'server',  // вместо 'static'
  adapter: node(),   // или vercel(), netlify(), cloudflare()
});

Тогда Astro запускает сервер, который рендерит страницы на лету при каждом запросе.

8. Пайплайн обработки контента

Markdown/MDX файл
    ↓
remark-плагины (обработка Markdown)
    ↓
rehype-плагины (обработка HTML)
    ↓
Astro Renderer (рендеринг компонентов)
    ↓
HTML + CSS + (опционально JS)

remark — обрабатывает Markdown → AST
rehype — преобразует AST → HTML
Можно добавлять свои плагины для подсветки кода, TOC, и т.д.

9. Структура проекта

my-ai-blog/
├── astro.config.mjs       # Конфигурация Astro
├── src/
│   ├── components/        # .astro компоненты
│   ├── content/           # Markdown/MDX файлы
│   ├── layouts/           # Шаблоны страниц
│   ├── pages/             # Маршруты (файловая маршрутизация)
│   └── styles/            # Глобальные CSS
├── public/                # Статические файлы (favicon, images)
├── dist/                  # Результат сборки
└── node_modules/          # Зависимости

10. Почему Astro быстрый

Технология	Что делает	Результат
Zero JS по умолчанию	Компоненты рендерятся в HTML	Нет JS-бандла
Islands	JS только для интерактивных компонентов	Минимальный JS
Tree-shaking	Rollup удаляет неиспользуемый код	Меньше CSS/JS
Оптимизация изображений	Sharp конвертирует в WebP/AVIF	Меньше вес картинок
CSS minification	Vite минифицирует CSS	Меньше CSS
HTML minification	Сжатие итогового HTML	Меньше HTML

Итог

Astro = Vite (сборка) + Rollup (оптимизация) + Islands (интерактивность) + Content Collections (контент)

Генерирует статический HTML по умолчанию, JavaScript — только по запросу.