Одной из причин феноменального успеха Astro стала его система Интеграций. В отличие от классических плагинов других сборщиков (Webpack, Rollup), которые могут делать только одну вещь, интеграции Astro — это умные расширения, которые могут:
- Добавлять поддержку новых UI-фреймворков (React, Vue, Svelte).
- Изменять конфигурацию Vite.
- Генерировать файлы в папку
distпри сборке (sitemap.xml, manifest). - Добавлять middleware и менять логику серверного роутинга.
Устанавливается любая интеграция одной командой. Astro сам добавляет её в конфиг и предлагает создать нужные конфигурационные файлы:
npx astro add tailwind # Tailwind CSS
npx astro add react # Острова на React
npx astro add cloudflare # SSR-адаптер для CloudflareДавайте пройдемся по ключевым категориям.
1. UI-фреймворки (Острова интерактивности)
Agnosticism (агностичность) — главная идеология Astro. Вы не привязаны к одному UI-фреймворку. Более того, вы можете использовать несколько на одной странице.
| Фреймворк | Пакет | Размер рантайма |
|---|---|---|
| React | @astrojs/react | ~45 КБ |
| Preact | @astrojs/preact | ~4 КБ |
| Vue | @astrojs/vue | ~30 КБ |
| Svelte | @astrojs/svelte | ~1.5 КБ |
| SolidJS | @astrojs/solid-js | ~7 КБ |
| Alpine.js | @astrojs/alpinejs | ~15 КБ |
Практический совет: Если вам нужна небольшая интерактивность (мобильное меню, аккордеон, счетчик), выбирайте Alpine.js — он работает прямо в HTML-атрибутах без JSX и весит в 10 раз меньше React. Для сложных форм с состоянием — React или Svelte.
2. SEO и Производительность
@astrojs/sitemap
Автоматически генерирует sitemap.xml при каждом npm run build. Поддерживает:
- Динамические маршруты (из Content Collections).
- Исключение страниц через
filter. - Поддержку i18n (генерирует
sitemap-index.xmlс дочерними картами для каждого языка).
// astro.config.mjs
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://yoursite.com',
integrations: [
sitemap({
filter: (page) => !page.includes('/admin/'), // Исключаем страницы админки
changefreq: 'weekly',
priority: 0.7,
}),
],
});Partytown — магия Web Workers
Partytown
(@astrojs/partytown) решает одну из главных болей PageSpeed: тяжелые сторонние скрипты.
Google Analytics 4 (gtag.js), Яндекс.Метрика, Facebook Pixel, HotJar — всё это скрипты, которые загружаются и выполняются в главном потоке браузера, конкурируя за ресурсы с вашим интерфейсом. Именно они съедают 20-40 баллов в PageSpeed.
Partytown перемещает эти скрипты в фоновый Web Worker. Браузер выполняет их изолированно, не блокируя рендеринг UI.
---
// src/layouts/BaseLayout.astro
import { Partytown } from '@astrojs/partytown/components';
---
<head>
<!-- Все скрипты с type="text/partytown" переедут в Web Worker -->
<Partytown debug={false} forward={['dataLayer.push', 'gtag']} />
<!-- Google Analytics теперь не тормозит страницу! -->
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
</head>Результат: +15-25 баллов PageSpeed при той же аналитике.
3. Адаптеры для SSR-деплоя
При включении серверного рендеринга (output: 'server' или 'hybrid') Astro нужен адаптер, объясняющий ему, как запускаться на конкретной платформе.
| Платформа | Пакет | Что делает |
|---|---|---|
| Cloudflare Workers/Pages | @astrojs/cloudflare | Собирает под workerd-рантайм |
| Vercel | @astrojs/vercel | Edge Functions + Image Optimization |
| Netlify | @astrojs/netlify | Netlify Functions + Edge |
| Node.js (VPS/Docker) | @astrojs/node | Express-подобный standalone сервер |
Переезд с Vercel на Cloudflare — это буквально замена одной строки в astro.config.mjs и смена пакета. Никакого рефакторинга кода.
4. Контент и Стилизация
@astrojs/mdx
Добавляет поддержку MDX-файлов — возможность писать JSX-компоненты прямо внутри Markdown-текстов. Поддерживает плагины remark и rehype для расширения синтаксиса.
@astrojs/markdoc
Интеграция с Markdoc — форматом от команды Stripe. Это более строгая, типизированная альтернатива MDX. В Markdoc теги ({% %}) явно отделены от JSX-синтаксиса, что делает его безопаснее для использования в многопользовательских CMS (редактор не может случайно выполнить произвольный код).
@astrojs/tailwind / @astrojs/db
@astrojs/tailwind— моментально подключает Tailwind CSS v4 с правильно настроенным PostCSS.@astrojs/db— официальная интеграция с Astro DB (на базе libSQL/Turso).
5. Поиск по статическому сайту: Pagefind
Реализовать быстрый полнотекстовый поиск по статическому сайту всегда было сложно. Платный Algolia или тяжелый ElasticSearch — единственные варианты в прошлом.
Pagefind (интеграция astro-pagefind) решает это элегантно и бесплатно:
- После
npm run buildPagefind сканирует все HTML-файлы и создает бинарный индекс (обычно 50-200 КБ для большого сайта). - В браузере поиск выполняется локально через WebAssembly — никаких серверных запросов, никаких задержек.
- Результаты появляются мгновенно, с подсветкой найденных слов.
# Установка
npm install astro-pagefind
# Запуск индексации (после сборки)
npm run build---
// src/components/Search.astro
import PagefindUI from 'astro-pagefind/components/PagefindUI';
---
<PagefindUI id="search" showImages={false} />6. Экосистема сообщества (Community Integrations)
Помимо официальных интеграций, на astro.build/integrations собрано более 1 000 плагинов от сообщества:
astro-compress— автоматически минимизирует HTML, CSS, JS и оптимизирует SVG при сборке.astro-robots-txt— генерирует файлrobots.txtна основе конфигурации.astro-seo— удобный компонент для настройки всех SEO-метатегов (OpenGraph, Twitter Cards, JSON-LD).@astro-community/astro-embed-youtube— ленивая загрузка YouTube-видео (только превью до первого клика).astro-icon— доступ к 200 000+ иконок (через Iconify) прямо в Astro-компонентах без npm-зависимостей.
Итог
Экосистема Astro — это одна из ключевых причин выбора фреймворка. Вам не нужно «изобретать велосипед» для решения типовых задач: карта сайта, поиск по статике, оффлоадинг аналитики, SSR на Edge — для всего этого есть готовые, хорошо поддерживаемые интеграции. Установка любой из них занимает одну команду в терминале.
Как работает MDX?
Узнайте, как использовать интерактивные компоненты в тексте в статье про MDX.
