Astro
Веб-фреймворк для контентных сайтов с минимальным JavaScript и максимальной скоростью.
Что это
Astro — фреймворк с Islands Architecture: статический HTML + интерактивность только где нужно. Поддерживает React, Vue, Svelte компоненты в одном проекте.
Astro 5 добавил Content Layer API для загрузки контента из любых источников (CMS, API, файлы), Server Islands для динамических компонентов с кешированием и улучшенные dev tools. По сравнению с Next.js, Astro отправляет на порядок меньше JavaScript — идеально для контентных сайтов. По сравнению с Hugo и Eleventy, Astro предлагает компонентную модель с поддержкой любого UI-фреймворка. Astro DB добавляет встроенную базу данных для небольших проектов.
Ключевые возможности
Zero JS
По умолчанию отправляет HTML без JavaScript — максимальная скорость загрузки. Страница весит 50-100 КБ вместо мегабайтов JS-бандла.
Islands
Интерактивные компоненты (React, Vue, Svelte) только там, где нужно. Директивы client:load, client:visible, client:idle контролируют момент гидратации.
Content Collections
Типизированный контент из Markdown/MDX с валидацией схемы через Zod. Content Layer API загружает данные из CMS, API и файловой системы.
Почему мы используем
Для контентных сайтов и блогов Astro даёт максимальную скорость загрузки — нулевой JS по умолчанию. Отличный DX с поддержкой MDX и Content Collections.
Мы выбираем Astro вместо Next.js для чисто контентных проектов: блоги, документация, маркетинговые сайты без сложной интерактивности. Core Web Vitals идеальны из коробки, что критично для SEO. Для интерактивных компонентов (формы, калькуляторы) используем Islands с React или Vue.
Сильные стороны
Самый быстрый фреймворк для контентных сайтов — Lighthouse 100/100.
Компоненты на React, Vue и Svelte в одном проекте — используйте что удобно.
Наш опыт
Мы используем Astro для быстрых контентных сайтов и документации. Lighthouse score 100/100 из коробки.
Реализованные проекты: технические блоги с MDX-контентом, документация продуктов с поиском и навигацией, маркетинговые лендинги с интерактивными калькуляторами (React Islands). Деплоим на Vercel, Netlify или в Docker на VPS клиента.
Для каких задач применяем
- Контентные сайты и блоги
- Документация проектов
- Маркетинговые лендинги
Проекты с использованием Astro
Lenta-Tissue
B2B-портал для оптовых продаж тишью бумаги с полной SEO-оптимизацией, интерактивными фильтрами и калькулятором цен. 37 …