Astro 4.0

Автор
Matthew Phillips
Bjorn Lu
Chris Swithinbank
Emanuele Stoppa
Erika
Martin Trapp
Nate Moore

Представляем Astro 4.0! Новые API, более быстрые сборки, обновлённая документация и уникальный инструмент разработки, который по-новому улучшает локальное dev-окружение Astro.

Что такое Astro? Astro — веб-фреймворк для контентных сайтов: блоги, маркетинг, e-commerce. Если нужен быстрый сайт с отличным SEO — Astro для вас.

Основные новинки:

Astro 4.0 доступен на npm. Попробуйте на astro.new в браузере или запустите в терминале для нового локального проекта:

# Create a new Astro 4.0 project:
npm create astro@latest

Большинство существующих кодовых баз обновятся на Astro 4.0 без проблем. Мы намеренно минимизировали изменения API — большинство изменений в integration API. См. руководство по обновлению с полным разбором каждого изменения.

The Astro Dev Toolbar

Astro 4.0 представляет Dev Toolbar — мощный способ улучшать и настраивать локальный браузерный dev-опыт с Astro. Инспектируйте страницу, находите проблемы доступности и расширяйте toolbar собственными приложениями и сторонними инструментами.

Astro Dev Toolbar появляется в браузере только при разработке и никогда не попадает в production-сборку. Toolbar скрыт внизу страницы, пока не понадобится. Наведите рядом — toolbar появится с несколькими приложениями:

Inspect: подсвечивает интерактивные UI component islands на странице. Приложение использует уникальную island architecture Astro. Подсветка islands помогает понять, какие элементы интерактивны, а какие — лёгкий статический HTML. Можно просмотреть props и открыть компонент в редакторе кода.

Audit: серия тестов на типичные проблемы доступности. Находите изображения без alt или неверные ARIA roles, не покидая браузер.

Sentry: мы сотрудничали с Sentry над первой версией toolbar. Sentry — ведущая платформа мониторинга веб-приложений, и они были рады работать с нами над новым standalone debugging tool для Astro. Возвращайтесь завтра, 6 декабря, за подробностями о партнёрстве и официальном запуске Spotlight.js!

Storyblok: Storyblok — наш Official CMS Partner — выпустил toolbar app в официальной Astro-интеграции. В Astro 4.0 все пользователи Storyblok увидят новое приложение с быстрым доступом к документации, туториалам и ресурсам сообщества Storyblok + Astro. Больше CMS-функций в будущем.

Third-Party Apps: разработчики Astro и авторы интеграций могут использовать новый Dev Toolbar API для встроенных JavaScript-приложений при разработке. Это открывает новый примитив для dev tools:

  • показ ошибок тестов и линтинга прямо в браузере;
  • открытие dev-окружения в интернет через localtunnel;
  • быстрый доступ к внешним инструментам вроде оптимизатора изображений Squoosh;
  • внутренние admin-панели команды для автоматизации задач вроде переключения аккаунтов при разработке.

Новые launch week apps для toolbar — в каталоге Astro integrations, создайте своё. В ближайшие месяцы мы продолжим улучшать toolbar. Или отключите в конфиге проекта и выполните astro preferences disable devToolbar --global для глобального отключения на машине.

Internationalization (i18n) Routing

Как фреймворк для контентных сайтов, нас часто спрашивают об интернационализации. i18n для веб-разработчика — дополнительная сложность: маршрутизация, редиректы, переводы, относительные ссылки…

Astro 4.0 представляет i18n-маршрутизацию для глобально доступных сайтов с меньшей сложностью. Автоматическая i18n-маршрутизация и низкоуровневые хелперы для работы с URL.

Встроенная маршрутизация позволяет определить локали в центральной конфигурации:

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es", "pt-br"]
  }
})

Настройте поведение:

  • Fallbacks — когда контент недоступен в локали
  • Prefixing — добавление имени локали в URL
  • Aliasing — для распространённых локалей и языковых кодов

Для 'server' сборок с SSR Astro автоматически определяет предпочитаемый язык пользователя — для адаптации контента, редиректов и кастомной маршрутизации.

i18n-маршрутизация появилась как экспериментальная функция в Astro 3.5. Сегодня она стабильна в Astro 4.0. Читайте руководство по интернационализации Astro.

Incremental Content Caching (Experimental)

Astro 4.0 представляет Incremental Content Caching — экспериментальную функцию для ускорения сборки крупных сайтов.

Кодовая база сайта собирается дольше с ростом. Статические сайты страдают сильнее — одни и те же страницы пересобираются при каждой сборке. В Astro 4.0 мы добавили кэширование, чтобы сократить дублирующую работу в astro build.

На реальной кодовой базе Astro Docs соответствующий шаг astro build сократился с 133.20s до 10.46s — примерно на 92%. Полное время сборки — с 4 мин 58 с до чуть больше 60 с, на 80% быстрее. Похожие результаты в других реальных сценариях.

Инкрементальное кэширование контента интегрируется с Content Collections API. Astro отслеживает изменения в collection через внутренний build manifest и переиспользует неизменённые записи из кэша.

Экспериментальная поддержка появилась в Astro 3.5 как «Content Collections Build Cache». В 4.0 остаётся экспериментальной. Включите experimental.contentCollectionCache для более быстрых сборок.

New View Transition APIs

Astro 3.0 представил View Transitions — API для интерактивного app-like опыта на server-rendered HTML с минимальным client-side JavaScript. С View Transitions в Astro можно:

  • Анимировать навигацию между страницами без тяжёлого SPA.
  • Сохранять stateful UI между страницами — видеоплееры, карты.
  • Морфить общий элемент с одной страницы на другую автоматически.
  • Сдвигать и затухать элементы для выразительности.

С момента запуска мы продолжаем улучшать поддержку. Astro 4.0 расширяет View Transitions более настраиваемыми API и новыми сценариями:

  • Forms: View Transitions работают со статическими HTML-формами и динамическими клиентскими формами — transition при отправке формы вместо навигации по ссылке.
  • Prefetching: prefetch ссылки при hover, tap или появлении на странице. Включение/отключение для отдельной ссылки.
  • Route Announcer: встроенная функция для assistive technologies.
  • Низкоуровневый JavaScript API navigate() для ручной навигации.
  • Полная система lifecycle events для кастомизации загрузки — можно заменить встроенный алгоритм swap своим.

Мы продолжим продвигать View Transitions и их способность давать опыт тяжёлого client-side SPA на server-rendered HTML с небольшим количеством JavaScript. Больше функций впереди!

Огромная благодарность @martrapp за вклад в эти API в Astro 4.0. Читайте обновлённое руководство или новый туториал.

Redesigned logging

Astro CLI получил обновление логирования в релизе 4.0:

  • Убрано лишнее логирование: раньше в типичных сценариях было двойное логирование.
  • Более компактные ошибки: меньше строк в терминале — меньше прокрутки при ошибках.
  • Улучшенные stack traces: по умолчанию без бесполезных Vite runtime internals.

Команды dev и build Astro стали ещё удобнее для чтения и отладки в Astro 4.0.

Redesigned documentation

Starlight — официальный шаблон документации Astro со всеми лучшими практиками за два года работы над docs.astro.build.

Сегодня мы замкнули круг: docs.astro.build теперь на Starlight!

Улучшения нашей документации теперь улучшают Starlight для всех. Благодаря Astro docs в Starlight появились Expressive Code и новый Algolia plugin. Впереди — интерактивное дерево файлов и викторина с выбором ответа.

Благодарим core maintainer @TheOtterlord за значительный вклад в этот апгрейд. Новая документация: docs.astro.build. Кодовая база или Discord — если хотите узнать больше!

Get Started with Astro 4.0

Astro 4.0 доступен на npm. https://astro.new/ — попробуйте в браузере, или в терминале для нового проекта:

# Create a new Astro 4.0 project:
npm create astro@latest

Обновляетесь на Astro 4.0? См. руководство по обновлению v4.0 с деталями по каждому изменению.