1. Что такое Astro

Astro — это веб-фреймворк нового поколения для создания быстрых, контентно-ориентированных сайтов. Он объединяет в себе лучшие идеи из мира статических генераторов (Gatsby, Hugo, Jekyll) и современных JavaScript-фреймворков (Next.js, Nuxt), избавляясь при этом от их главных недостатков.

Официальный слоган Astro — “Build fast websites, faster” — отражает двойной смысл: сайты, созданные на Astro, быстры для пользователей, и сам процесс разработки быстр и приятен для разработчика.

Основная концепция: MPA против SPA

Astro строит многостраничные приложения (MPA), а не одностраничные (SPA). Это означает:

• При навигации между страницами браузер загружает новый HTML-документ с сервера
• Каждая страница — это отдельный HTML-файл, оптимизированный для SEO
• Нет клиентского роутинга по умолчанию — только нативная навигация браузера

Это фундаментальное отличие от React (Next.js) или Vue (Nuxt), где весь роутинг управляется JavaScript на клиенте.

Zero JS by Default

Главная суперсила Astro — нулевой JavaScript по умолчанию. Рассмотрим, что это значит:

---
// Этот код выполняется ТОЛЬКО на сервере при сборке
const users = await fetch('https://api.example.com/users').then(r => r.json());
const greeting = 'Привет, мир!';
---

<!-- В браузер уходит только чистый HTML -->
<h1>{greeting}</h1>
<ul>
  {users.map(user => <li>{user.name}</li>)}
</ul>

Результирующий HTML выглядит так:

<h1>Привет, мир!</h1>
<ul>
  <li>Алексей</li>
  <li>Мария</li>
  <li>Иван</li>
</ul>

Никакого JavaScript не попадает в браузер. Никаких bundle’ов, никакого гидратации всей страницы.

Islands Architecture (Архитектура островов)

Концепция “островов” решает проблему интерактивности без потери производительности. Представьте страницу блога:

• Шапка, статья, подвал — статический HTML (0 KB JS)
• Форма подписки — интерактивный остров (несколько KB JS)
• Виджет комментариев — интерактивный остров (JS загружается лениво)

---
import ReactSearchBar from '../components/SearchBar.jsx';
import StaticHeader from '../components/Header.astro';
---

<!-- Статичный компонент — 0 KB JS -->
<StaticHeader />

<!-- Интерактивный остров — JS загружается только здесь -->
<ReactSearchBar client:load />

<!-- Статичный контент -->
<main>
  <slot />
</main>

Директива client:load говорит Astro: “гидратируй этот компонент сразу после загрузки страницы”.

Мульти-фреймворк поддержка

Уникальная особенность Astro — возможность использовать разные UI-фреймворки в одном проекте:

---
import ReactCounter from './Counter.jsx';   // React компонент
import VueMenu from './Menu.vue';           // Vue компонент
import SvelteCard from './Card.svelte';     // Svelte компонент
---

<ReactCounter client:visible />
<VueMenu client:idle />
<SvelteCard />  <!-- Статичный, без JS -->

Это позволяет постепенно мигрировать существующий код или использовать лучшие компоненты из разных экосистем.

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

Astro идеально подходит для:

• 📝 Блоги и контентные сайты — статьи, новости, документация
• 🏢 Корпоративные сайты — лендинги, портфолио, о компании
• 📚 Документация — технические docs, wiki
• 🛒 Интернет-магазины (с интеграцией Shopify/Snipcart)
• 📊 Маркетинговые страницы — landing pages, промо-сайты

Astro не лучший выбор для:

• Приложений с интенсивной интерактивностью (соцсети, дашборды)
• Real-time приложений (чаты, игры)
• Тяжёлых SPA с клиентским состоянием

Производительность

Сайты на Astro стабильно получают высокие оценки Core Web Vitals:

Метрика	Среднее на Next.js	Среднее на Astro
LCP	2.8s	1.2s
FID	45ms	12ms
CLS	0.12	0.02
JS Bundle	~180 KB	~0-20 KB

Astro vs другие фреймворки

Выберите категорию проекта и посмотрите, какой фреймворк подойдёт лучше всего: