Astro: фреймворк для молниеносных сайтов

Astro — JavaScript-фреймворк, созданный для быстрых контент-ориентированных сайтов: блогов, портфолио, маркетинговых страниц. Я выбрал его за одну ключевую идею — минимум JavaScript на клиенте. Страницы генерируются в чистый HTML, а интерактивность подключается точечно, только там, где она действительно нужна.

Версия: Astro 6.x (стабильная, актуальная 6.4.x), Astro 7 — в alpha-превью

Лицензия: MIT (open source)

Сайт: astro.build

Событие 2026 года: в январе 2026 Astro вошёл в состав Cloudflare — это долгосрочные инвестиции в фреймворк и тесная интеграция с edge-инфраструктурой.

Зачем нужен Astro

Если вы делаете сайт, где главное — контент (статьи, услуги, описания), а не сложные интерфейсы вроде Figma или Google Docs, то Astro даст вам лучшую скорость загрузки среди всех популярных фреймворков.

Основные принципы:

• Server-First — компоненты рендерятся на сервере, в браузер отправляется чистый HTML
• Zero JS by Default — по умолчанию никакого JavaScript на клиенте
• Content-Driven — спроектирован для работы с контентом из любых источников
• Customizable — поддержка React, Vue, Svelte и других фреймворков в одном проекте

Астро-острова: главная архитектурная идея

На практике это значит: у вас статическая страница с текстом и картинками, а посередине — интерактивный калькулятор на React. Только калькулятор загружает JavaScript, остальная страница моментально отображается.

Директивы гидрации

Вы сами решаете, когда загружать интерактивный компонент:

Серверные острова (Server Islands)

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

Чтобы превратить компонент в серверный остров, достаточно директивы server:defer (нужен установленный адаптер):

---
import Avatar from '../components/Avatar.astro';
---
<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>

Страница рендерится сразу с заглушкой (fallback), а содержимое острова подгружается параллельно и появляется, как только готово. В отличие от обычного SSR, где всю страницу держит ответ сервера, здесь ждёт только сам остров.

Три режима рендеринга

Astro позволяет комбинировать подходы на уровне отдельных страниц:

1. SSG — Static Site Generation (по умолчанию)

Все страницы генерируются в HTML на этапе билда. Максимальная скорость, сервер просто отдаёт готовые файлы. Я использую этот режим — он идеален для контентных сайтов.

2. SSR — Server-Side Rendering

Страницы рендерятся при каждом запросе. Нужен серверный рантайм. Подходит для страниц с авторизацией или персонализацией.

3. Hybrid Rendering

Комбинация SSG и SSR в одном проекте. Основная часть сайта — статика, отдельные страницы — динамические.

// Статическая страница (по умолчанию)
// pages/about.astro
---
const data = await fetch('...');
---
<h1>About</h1>

// Динамическая страница
// pages/dashboard.astro
---
export const prerender = false;
const user = await getUser();
---
<h1>Welcome, {user.name}</h1>

Content Collections и Content Layer API — управление контентом

Мощная система с типобезопасностью и валидацией через Zod. Позволяет организовать контент из любого источника — файлы, API, CMS.

Как это работает

1. Определяете коллекцию в src/content.config.ts — источник данных и схема валидации
2. Данные загружаются через встроенные лоадеры (glob(), file()) или кастомный лоадер (API, CMS)
3. Запрашиваете через getCollection() и getEntry() — с автокомплитом и проверкой типов

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  loader: async () => {
    const response = await fetch('https://api.notion.com/v1/databases/...', {
      headers: { 'Authorization': 'Bearer ...' }
    });
    const data = await response.json();
    return data.results.map(page => ({
      id: page.id,
      title: page.properties.Name.title[0].plain_text,
      content: page.properties.Content.rich_text[0].plain_text,
    }));
  },
  schema: z.object({
    title: z.string(),
    content: z.string(),
  }),
});

export const collections = { articles };

Что нового в Astro 6 (2026)

Astro 6 — это не косметика, а серьёзная техническая модернизация. Что стоит знать:

• Переработанный dev-сервер на Vite 7 — быстрее сборка и горячая перезагрузка, меньше различий между dev и production.
• Встроенный Fonts API — управление шрифтами (локальными и из Google Fonts) переехало внутрь фреймворка, с автоматической оптимизацией.
• Live Content Collections — коллекции, которые подтягивают данные не на этапе билда, а в момент запроса. Удобно для контента, который часто меняется.
• Content Security Policy (CSP) — встроенная поддержка политик безопасности контента.
• Переписанная интеграция с Cloudflare — адаптер собрали с нуля, логичное следствие покупки Astro компанией Cloudflare.
• Экспериментальный Rust-компилятор — преемник прежнего Go-компилятора .astro: быстрее и в ряде случаев надёжнее. Команда развивает его на протяжении всей ветки 6.x.

Встроенные возможности

• Файловый роутинг — структура src/pages/ = структура URL. src/pages/blog/[slug].astro → динамические маршруты
• View Transitions — плавные переходы между страницами на нативных браузерных API, без SPA
• Оптимизация изображений — встроенный <Image /> с автоконвертацией в WebP/AVIF
• Prefetching — автоматическая предзагрузка страниц при наведении на ссылки
• Middleware — перехват запросов для аутентификации и обработки данных
• Sitemap и RSS — официальные интеграции для SEO

Поддержка UI-фреймворков

Astro позволяет использовать компоненты из любого фреймворка в одном проекте — React, Vue, Svelte, Solid, Preact, Angular. Можно даже комбинировать:

---
import ReactCounter from '../components/Counter.jsx';
import VueHeader from '../components/Header.vue';
import SvelteFooter from '../components/Footer.svelte';
---
<VueHeader />
<main>
  <ReactCounter client:visible />
</main>
<SvelteFooter />

Astro vs конкуренты

Деплой

Astro поддерживает деплой на любую платформу: VPS с nginx (статика), Node.js, Cloudflare Workers, Vercel, Netlify, Deno, AWS.

Для статического сайта деплой максимально прост:

# Билд
npm run build
# Выход: ./dist/ — готовые HTML/CSS/JS

# Копирование на сервер
rsync -avz ./dist/ user@server:/var/www/site/

Быстрый старт

# Создание нового проекта
npm create astro@latest

# Добавление интеграций
npx astro add tailwind
npx astro add react

# Разработка
npm run dev

# Билд
npm run build

Требования: Node.js 22+ (в Astro 6 поддержка Node 18 и 20 прекращена)

Полезные ссылки

• Документация
• Анонс Astro 6
• Гайд по миграции на Astro 6
• Server Islands — документация
• Темы — 500+ готовых тем
• Интеграции
• GitHub
• Discord-сообщество

По теме

• Блог: Как строить AI-first SaaS в 2026: два принципа, с которых начать
• Статья: Как два ИИ-агента и один человек собрали этот сайт за ночь
• База знаний: Tailwind CSS: стилизация без боли

Astro особенно хорошо ложится на контентные проекты, где важны скорость загрузки и удобное управление контентом из Notion или другой CMS. Если вы как раз присматриваетесь к стеку под такой сайт, могу подсказать, с чего начать и каких граблей избежать.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov