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

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

Проверенный релиз: Astro 7.1 от 16 июля 2026 года

Лицензия: MIT

Сайт: astro.build

Содержание

1. Когда выбирать Astro
2. Клиентские и серверные острова
3. Режимы рендеринга
4. Коллекции и загрузчики контента
5. Что появилось в Astro 7.1
6. Полезные сценарии
7. Быстрый старт и проверка

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

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

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

• компоненты Astro рендерятся на сервере или во время сборки;
• клиентский JavaScript не добавляется по умолчанию;
• React, Vue, Svelte, Solid и Preact можно подключать для отдельных интерактивных компонентов;
• статические и динамические маршруты можно сочетать в одном проекте;
• контент можно загружать из файлов, API и CMS.

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

Клиентские и серверные острова

Клиентские острова

Astro Islands — интерактивные компоненты внутри HTML-страницы. Например, статья остаётся статической, а калькулятор на React получает собственный JavaScript и гидратируется отдельно.

Директива определяет момент загрузки компонента:

Серверные острова

Server Islands позволяют отложенно рендерить персонализированный или динамический компонент. Основная страница и заглушка (fallback) появляются сразу, затем браузер запрашивает HTML острова через отдельный служебный маршрут.

Для этого нужен серверный адаптер и директива server:defer:

---
import Avatar from '../components/Avatar.astro';
import GenericAvatar from '../components/GenericAvatar.astro';
---

<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>

Подход полезен для аватара пользователя, региональной цены или персонального приветствия. Медленный остров не задерживает основной контент.

Свойства должны быть сериализуемыми. Функции и объекты с циклическими ссылками передать нельзя. При поэтапном развёртывании (rolling deployment), работе в нескольких регионах или кешировании страниц через сеть доставки контента (CDN) может понадобиться постоянный ключ ASTRO_KEY, созданный командой astro create-key.

Режимы рендеринга

По умолчанию Astro создаёт статические HTML-файлы во время сборки. Это удобный вариант для страниц, которые меняются только после обновления контента и повторного билда.

Маршрут можно переключить на рендеринг по запросу:

---
export const prerender = false;
const user = await getUser();
---

<h1>Добро пожаловать, {user.name}</h1>

Так статические статьи могут соседствовать с динамической панелью пользователя. Для рендеринга по запросу требуется адаптер выбранной платформы.

Коллекции и загрузчики контента

Content Collections дают типизированный доступ к контенту и позволяют проверять данные по схеме. Коллекции описываются в src/content.config.ts.

Для локальных данных Astro предоставляет два загрузчика:

• glob() собирает Markdown, MDX, Markdoc, JSON, YAML и TOML из каталогов;
• file() читает одну JSON-, YAML- или TOML-структуру, а также поддерживает пользовательский парсер.

Для удалённого источника готового встроенного загрузчика нет. Можно создать объектный загрузчик или использовать короткую асинхронную функцию:

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

const articles = defineCollection({
  loader: async () => {
    const response = await fetch('https://cms.example.com/articles');

    if (!response.ok) {
      throw new Error(`CMS returned ${response.status}`);
    }

    const data = await response.json();

    return data.map((article: { id: string; title: string; content: string }) => ({
      id: article.id,
      title: article.title,
      content: article.content,
    }));
  },
  schema: z.object({
    title: z.string(),
    content: z.string(),
  }),
});

export const collections = { articles };

При переходе с Astro 5 на Astro 6 и новее старые коллекции нужно перевести на API слоя контента (Content Layer API). Astro 6 также перешёл на Zod 4, библиотеку схем и валидации; рекомендуемый импорт — astro/zod. Временный флаг совместимости существует только для миграции и не заменяет обновление коллекций.

Для данных, которые должны загружаться при каждом запросе, предусмотрены загрузчики реального времени (Live Loaders). Они описываются в src/live.config.ts и предоставляют методы загрузки коллекции и отдельной записи.

Что появилось в Astro 7.1

Официальный релиз Astro 7.1 от 16 июля 2026 года включает:

• дополнительные директивы политики безопасности контента (CSP) для отдельных политик скриптов и стилей;
• функцию format в paginate() для настройки URL пагинации;
• флаг astro dev --ignore-lock для запуска дополнительного dev-сервера того же проекта;
• параметр deferRender загрузчика glob() для снижения расхода памяти на больших Markdown-коллекциях;
• экспериментальное разбиение хранилища коллекций на части через experimental.collectionStorage: "chunked";
• настройку пользовательского логгера.

Пример отложенного рендеринга Markdown:

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const docs = defineCollection({
  loader: glob({
    pattern: '**/*.md',
    base: 'src/content/docs',
    deferRender: true,
  }),
});

deferRender уменьшает пиковое потребление памяти при синхронизации, но готовый HTML больше не кешируется в хранилище между сборками. Параметр появился в Astro 7.1 и применяется к Markdown, но не к MDX, Markdoc и записям данных.

Полезные сценарии

Контентный сайт с CMS

Задача: хранить статьи в системе управления контентом и собирать быстрые HTML-страницы.

Что делать: подключить CMS через пользовательский загрузчик на этапе сборки, проверить записи схемой Zod и получить их через Content Collections.

Проверяемый результат: npm run build завершается без ошибок; в статическом проекте появляется каталог dist/.

Ограничение: изменения в CMS попадут на статический сайт только после новой сборки. Для данных, нужных сразу после обновления, рассмотрите Live Loaders или рендеринг по запросу.

Статическая страница с персонализацией

Задача: быстро показать основное содержимое, а затем добавить данные пользователя.

Что делать: оставить страницу статической, вынести персональный блок в Astro-компонент с server:defer и подготовить fallback.

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

Ограничение: нужен адаптер и серверный рантайм. Следует отдельно проверить сериализацию свойств, кеширование и согласованность ASTRO_KEY при сложной схеме развёртывания.

Быстрый старт и проверка

npm create astro@latest
cd my-astro-site
npm run dev

Интеграции добавляются через CLI:

npx astro add react

Перед развёртыванием выполните производственную сборку:

npm run build

Проверьте:

• команда завершается без ошибок;
• для статического проекта появляется каталог dist/;
• страницы открываются в локальном режиме разработки;
• интерактивные компоненты загружаются согласно выбранным client:* директивам;
• серверные острова сначала показывают fallback, затем заменяют его полученным HTML.

Для обновления Astro и официальных интеграций используйте:

npx @astrojs/upgrade

Официальные ссылки

• Документация Astro
• Astro 7.1
• Миграция на Astro 6
• Директивы шаблонов
• Server Islands
• Content Loader API

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

Следующий шаг

Если после выбора Astro нужно настроить стили и компоненты интерфейса, продолжите с материала Tailwind CSS: стилизация без боли.

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

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov