Astro: фреймворк для сайтов, которые по умолчанию не грузят JavaScript

Исходная идея

Большинство сайтов в вебе не приложения. Блог, документация, лендинг, портфолио, корпоративный сайт: там нечего делать на клиенте, кроме пары виджетов. Но фреймворки, в которых их строили, тащили на каждую страницу весь рантайм React и гидрацию, которая на телефоне занимала секунды.

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

Острова

Остров объявляется директивой при вставке компонента:

---
import Counter from "../components/Counter.tsx";
import Search from "../components/Search.svelte";
---
<Counter client:visible />
<Search client:idle />

client:load загружает сразу, client:idle после того, как браузер освободится, client:visible при появлении в области просмотра. Компоненты могут быть написаны на React, Preact, Vue, Svelte, Solid или на собственном формате Astro, и всё это может жить на одной странице.

Коллекции контента

Для блогов и документации Astro предлагает коллекции: папки с Markdown или MDX и схема для фронтматтера на Zod. Нарушение схемы ломает сборку, а не отдаёт пользователю страницу без заголовка. Запросы к коллекции типизированы, и редактор подсказывает поля.

С пятой версии источником коллекции может быть не только файловая система: загрузчики подключают внешние CMS, API и базы, а результат кешируется между сборками.

Рендеринг

Сборка статическая по умолчанию, но любую страницу или весь сайт можно переключить в серверный рендеринг. Адаптеры есть для Node, Deno, Cloudflare, Vercel и Netlify. Это позволяет начать со статики, а при появлении личного кабинета добавить динамику, не меняя фреймворк.

Экосистема

Starlight, тема для документации на Astro, за два года стала выбором по умолчанию для документации открытых проектов: поиск, навигация, локализация и тёмная тема из коробки. Интеграций для сторонних сервисов сотни, от аналитики до генерации OG-изображений.

Ограничения

Для настоящих приложений с большим количеством клиентского состояния Astro подходит хуже, чем Next.js или SvelteKit: модель островов предполагает, что острова независимы, и общее состояние между ними требует обходных путей. Миграция существующего SPA в Astro редко бывает оправдана.

Итог

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