Что такое Astro и какую проблему он решает? В чём его основная философия?
Astro — веб-фреймворк для контентных сайтов с философией «нулевой JS по умолчанию»: страницы генерируются как статический HTML, а интерактивность добавляется точечно через изолированные острова любого UI-фреймворка.
Что такое Astro
Astro — это веб-фреймворк для создания контентно-ориентированных сайтов: блогов, документации, маркетинговых страниц, интернет-магазинов. Он генерирует статический HTML по умолчанию и отправляет в браузер нулевой JavaScript, если разработчик явно не попросит об обратном.
Какую проблему решает
Современные SPA-фреймворки (React, Vue, Angular) гидратируют всю страницу целиком — даже статический текст, навигацию и футер обёртываются в компоненты и требуют JavaScript. Это увеличивает Time to Interactive (TTI) и вес бандла. Astro решает проблему, отправляя HTML без JavaScript везде, где интерактивность не нужна.
Основная философия: Content-first + Zero JS by default
- Zero JS by default — компоненты рендерятся на сервере/при сборке, браузер получает чистый HTML.
- Islands Architecture — интерактивные «островки» гидратируются независимо и лениво.
- Bring Your Own Framework — можно использовать React, Vue, Svelte, Solid, Lit и другие одновременно.
- Content Collections — типизированное управление Markdown/MDX-контентом с встроенной валидацией через Zod.
- Server-first — файловая маршрутизация, SSG по умолчанию, опциональный SSR через адаптеры.
Минимальный пример
# Создать новый проект
npm create astro@latest my-site
cd my-site
npm run dev
---
// src/pages/index.astro
// Блок между тройными дефисами — серверный JavaScript (frontmatter)
const greeting = 'Привет, Astro!';
const posts = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
.then(r => r.json());
---
<!-- Шаблон — HTML с выражениями в фигурных скобках -->
<html lang="ru">
<head><title>Мой сайт</title></head>
<body>
<h1>{greeting}</h1>
<ul>
{posts.map((p: { id: number; title: string }) => (
<li key={p.id}>{p.title}</li>
))}
</ul>
</body>
</html>
<!-- В браузер уйдёт статический HTML, JS = 0 байт -->
Режимы вывода
output: 'static'(по умолчанию) — полная статическая генерация (SSG).output: 'server'— серверный рендеринг (SSR) через адаптер (Node.js, Cloudflare, Vercel, Netlify).output: 'hybrid'— SSG по умолчанию, отдельные маршруты помечаются как SSR черезexport const prerender = false.
Когда Astro — правильный выбор
- Блоги, документация, лендинги, маркетинговые сайты.
- Проекты, где SEO и Core Web Vitals критичны.
- Команды, использующие разные UI-фреймворки.
Astro не подходит для высокоинтерактивных приложений (дашборды, редакторы) — там лучше взять Next.js или SvelteKit.
Подводные камни
- Кривая обучения для frontmatter — блок
---выполняется только на сервере; попытка использоватьuseStateвнутри него вызовет ошибку. - Не SPA — переходы между страницами по умолчанию — это полная перезагрузка; для SPA-навигации нужно включить
viewTransitions. - Интерактивность требует явного client:* — новички часто забывают директиву и удивляются, почему кнопка не работает.
- Большие SPA-приложения — Astro не предназначен для приложений с постоянно меняющимся глобальным состоянием.
- Экосистема меньше, чем у Next.js — меньше готовых интеграций, плагинов CMS, community solutions.
- HMR иногда нестабилен — при сложных конфигурациях горячая перезагрузка может требовать ручного обновления.
Common mistakes
- Считать Astro заменой SPA-фреймворку для приложений с богатым клиентским состоянием.
- Думать, что Astro сам по себе делает всё интерактивным — без
client:*JS компонента не попадает в браузер. - Путать
output: 'static'иoutput: 'server': пытаться деплоить SSR без адаптера.
What the interviewer is testing
- Понимает фокус Astro на контентных сайтах и MPA-модели.
- Знает, что по умолчанию отдаётся HTML без JS.
- Может назвать поддерживаемые UI-фреймворки и режимы вывода.