Как устроен движок Astro — архитектура изнутри — Блог
$ cat astro-architecture.md

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

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

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


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

ФазаЧто происходитИнструменты
BuildКомпиляция всех .astro, .md, .mdx файлов в статический HTMLVite, Rollup
RenderРендеринг каждой страницы в HTML-файлAstro Renderer
OptimizeМинификация, оптимизация изображений, CSSVite, 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-бандла
IslandsJS только для интерактивных компонентовМинимальный JS
Tree-shakingRollup удаляет неиспользуемый кодМеньше CSS/JS
Оптимизация изображенийSharp конвертирует в WebP/AVIFМеньше вес картинок
CSS minificationVite минифицирует CSSМеньше CSS
HTML minificationСжатие итогового HTMLМеньше HTML

Итог

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

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