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

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

Версия: Astro 5.x (стабильная), Astro 6.0 в бета

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

Сайт: astro.build

Зачем нужен Astro

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

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

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

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

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

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

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

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

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 — управление контентом

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

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

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

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

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 };

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

• Файловый роутинг — структура 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 ≥ 18.17.1 (рекомендуется 20+)

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

• Документация
• Темы — 500+ готовых тем
• Интеграции
• GitHub
• Discord-сообщество