Фреймворки Astro 5

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 …

Подробнее
Обсудить задачу Рассчитать ROI