Что такое Astro и какую проблему он решает? В чём его основная философия?

Минимальный пример

# Создать новый проект
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 байт -->

Что такое 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 через адаптеры.

Режимы вывода

• 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 иногда нестабилен — при сложных конфигурациях горячая перезагрузка может требовать ручного обновления.

• Считать Astro заменой SPA-фреймворку для приложений с богатым клиентским состоянием.
• Думать, что Astro сам по себе делает всё интерактивным — без client:* JS компонента не попадает в браузер.
• Путать output: 'static' и output: 'server': пытаться деплоить SSR без адаптера.

• Понимает фокус Astro на контентных сайтах и MPA-модели.
• Знает, что по умолчанию отдаётся HTML без JS.
• Может назвать поддерживаемые UI-фреймворки и режимы вывода.