Astro 3.0

Автор
Matthew Phillips
Erika
Emanuele Stoppa
Bjorn Lu
Nate Moore

Представляем Astro 3.0!

Astro 3.0 — первый крупный веб-фреймворк с поддержкой View Transitions API. Fade, slide, morph и даже сохранение состояния элементов между страницами — с лёгкостью. До недавнего времени это было возможно только в JavaScript SPA. Благодаря развитию веб-платформы эти возможности теперь доступны всем в Astro 3.0.

Другие новинки релиза:

  • Image Optimization (stable): без флага, лучше, чем когда-либо.
  • Faster Rendering Performance: компоненты Astro рендерятся на 30–75% быстрее.
  • SSR Enhancements for Serverless: новые способы подключения к хостингу.
  • HMR Enhancements for JSX: Fast Refresh для React и Preact.
  • Optimized Build Output: более чистый и производительный HTML.

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

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

Обновляете существующий проект? См. руководство по обновлению v3.0.

Astro View Transitions

View Transitions — набор новых платформенных API для нативных переходов между страницами в браузере. Исторически это было возможно только в SPA, но браузеры и авторы спецификаций работали над нативными page transitions, и Astro 3.0 — первый фреймворк, выводящий их в мейнстрим.

С Astro View Transitions вы можете:

  • Morph — морфить постоянные элементы с одной страницы на другую
  • Fade — плавно показывать и скрывать контент
  • Slide — сдвигать контент для большей выразительности
  • Persist — сохранять общий UI между страницами, с обновлением или без

Лучшее в View Transitions в Astro — простота. Двумя строками кода можно добавить тонкую fade-анимацию. Импортируйте ViewTransitions и добавьте в <head> любой страницы:

src/pages/index.astro
---
// Note: Make sure you add the "<ViewTransitions />" component
// to other pages as well, and not just one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

Пользователи Astro имели ранний доступ к View Transitions с Astro 2.9. Сообщество экспериментировало и формировало финальный API. Несколько любимых демо:

Смотрите демо View Transitions от Joe Bell.

Скоро: page transitions без JavaScript

Попробуйте live demo от Maxi Ferreira.

Каждое демо ощущается как нативное клиентское приложение. Но это не так. Всё — серверный HTML, оживлённый Astro 3.0 и View Transitions API.

Мы много работали над View Transitions во всех браузерах, включая те, что ещё не поддерживают нативные API. Astro 3.0 включает fallback — небольшой скрипт ~3kb, который Astro добавляет автоматически.

Подробнее — в руководстве View Transitions и статье Chrome о browser APIs. Также о пути к View Transitions — в блоге Chrome Developers.

Faster Rendering Performance

Производительность рендеринга заметно выросла в Astro 3.0: большинство компонентов рендерятся на 30% быстрее (против Astro 2.9). В сложных бенчмарках ускорение до 75%.

Это результат рефакторинга, начатого в Astro 2.10 и завершённого в 3.0. Мы убрали лишний код из горячих путей пайплайна сборки и оптимизировали остальное. Лишние генераторы и async-код были главными виновниками. Каждая миллисекунда на счету!

Image Optimization (stable)

Оптимизация изображений стабильна в Astro 3.0 и доступна во всех проектах.

Импортируйте изображения из кодовой базы и размещайте на странице через встроенный <Image>. Astro сделает остальное: пайплайн сборки обнаружит и оптимизирует каждое изображение. В финальном теге будут width и height для защиты от Cumulative Layout Shift (CLS).

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---


<Image src={myImage} alt="A very cool penguin!" />

С июньского поста об оптимизации изображений мы добавили:

Подробнее — в руководстве Images.

SSR Enhancements for Serverless

В понедельник мы объявили официальное партнёрство по хостингу с Vercel. Совместная работа позволила значительно улучшить SSR в Astro 3.0 — для всех пользователей, независимо от хостинга:

  • Per-Route Code Splitting — отдельные серверные файлы для каждого маршрута. Пользователи serverless (Vercel, Netlify, Cloudflare и др.) получают лучшую производительность за счёт меньшей загрузки неиспользуемого кода.
  • Edge Middleware — Astro может бандлить middleware для edge. Edge middleware распределён глобально и работает ближе к пользователям.
  • Host Customization: адаптеры (@astrojs/node, @astrojs/vercel) сообщают Astro о поддерживаемых возможностях. Astro использует это для полезных предупреждений в dev и предотвращения ошибок в production.

Всё доступно на Vercel сегодня; любой адаптер можно обновить. В ближайшие месяцы мы поможем maintainers принести эти возможности на другие платформы.

HMR Enhancements for JSX

React Fast Refresh работает в Astro 3.0 благодаря крупному рефакторингу JSX. Пользователи React, Preact и Solid.js увидят заметное улучшение HMR и стабильности dev-сервера.

Fast Refresh — когда локальные изменения попадают в браузер без перезагрузки страницы. Уникальное отличие от обычного HMR: обновления приходят без сброса текущего состояния UI.

На демо ниже страница не перезагружается и счётчик не сбрасывается, хотя разработчик меняет шаблон. Это Fast Refresh.

Редактор кода рядом с окном React-компонента с таймером. При сохранении изменений обновляются только изменённые элементы — таймер продолжает работать.

Если вы строили модалку или многошаговый UI, знаете раздражение от сброса состояния после каждого изменения. Fast Refresh решает это.

Optimized Build Output

В 3.0 улучшили общий вывод сборки:

  • HTML Minification: Astro 3.0 минифицирует весь HTML автоматически — меньший payload и быстрее ответ.
  • Component IDs: шумные классы astro-XXXXXX заменены атрибутом data-astro-cid-hash. Атрибуты class="" читабельнее, HTML организованнее.
  • CSS Inlining: Astro 3.0 автоматически инлайнит небольшие куски CSS в HTML — лучше производительность загрузки, чем при множестве отдельных CSS-запросов.

Try Astro 3.0 Today

Astro 3.0 доступен на npm. Посетите https://astro.new/ или выполните:

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

Обновляете существующий проект? См. руководство по обновлению v3.0.