29. Экосистема интеграций

Интеграции расширяют возможности Astro одной командой: добавляют поддержку новых фреймворков, CSS-библиотек, инструментов SEO и многого другого.

Что такое интеграция?

Интеграция Astro — это npm-пакет, который через Integration API изменяет конфигурацию проекта, добавляет плагины Vite, инжектирует скрипты и маршруты. По сути — плагин со стандартным интерфейсом.

Официальные интеграции

Команда Astro поддерживает пакеты под неймспейсом @astrojs/:

Фреймворки

@astrojs/react — используй React-компоненты в .astro-файлах
@astrojs/vue — Vue 3 SFC прямо в Astro
@astrojs/svelte — Svelte-компоненты
@astrojs/solid-js — SolidJS с его реактивностью

CSS и стили

@astrojs/tailwind — Tailwind CSS, автоматическая настройка PostCSS

SEO и контент

@astrojs/sitemap — автоматический sitemap.xml при сборке
@astrojs/mdx — MDX поддержка (Markdown + компоненты)

База данных

@astrojs/db — встроенная база данных на LibSQL/Turso

Производительность

@astrojs/partytown — переносит тяжёлые сторонние скрипты (аналитика, чаты) в Web Worker, чтобы не блокировать основной поток

Установка интеграций

Используйте интерактивную CLI-команду:

# Автоматическая установка и настройка
npx astro add react
npx astro add tailwind
npx astro add sitemap mdx  # Несколько сразу

Команда astro add сама устанавливает пакет, обновляет astro.config.mjs и добавляет нужные зависимости.

Ручная настройка

Если вы хотите контролировать процесс вручную:

npm install @astrojs/react react react-dom

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://my-site.com',
  integrations: [
    react(),
    tailwind({ applyBaseStyles: false }),
    sitemap(),
  ],
});

Partytown — изоляция сторонних скриптов

Аналитика Google, Facebook Pixel и другие трекеры могут значительно замедлить ваш сайт. Partytown переносит их в Web Worker:

---
import { Partytown } from '@astrojs/partytown/components';
---

<head>
  <Partytown debug={true} forward={['dataLayer.push']} />
  <!-- Теперь этот скрипт работает в Web Worker -->
  <script type="text/partytown">
    // Google Analytics code
  </script>
</head>

Community-интеграции

Экосистема Astro богата community-пакетами. Найдите их на astro.build/integrations:

astro-seo — компонент для meta-тегов и Open Graph
astro-icon — иконки из 100+ коллекций (Heroicons, Lucide, Material)
astro-compress — сжатие HTML, CSS, JS и SVG при сборке
@astrojs/image — расширенная обработка изображений