Astro 3.5

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

Сегодня вышел Astro 3.5 с новой i18n-маршрутизацией, оптимизацией prefetch и многим другим. Возможно, это один из крупнейших минорных релизов в истории Astro!

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

Чтобы воспользоваться новыми возможностями, убедитесь, что у вас установлена последняя версия Astro. Обновиться до Astro 3.5 можно командой для вашего менеджера пакетов:

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

i18n Routing (experimental)

Создавать многоязычные приложения на Astro стало проще, чем когда-либо.

Экспериментальный API i18n-маршрутизации Astro позволяет добавлять многоязычный контент с поддержкой языка по умолчанию, вычисления относительных URL страниц и учёта предпочитаемых языков браузера посетителя. Также можно задавать fallback-языки для каждого языка, чтобы посетители всегда попадали на существующий контент на сайте.

Включите экспериментальную маршрутизацию, добавив объект i18n в конфигурацию Astro с локалью по умолчанию и списком поддерживаемых языков:

astro.config.mjs
import {defineConfig} from "astro/config";


export default defineConfig({
  experimental: {
    i18n: {
      defaultLocale: "en",
      locales: ["en", "es", "pt-br"]
    }
  }
})

Организуйте папки контента по локалям в зависимости от i18n.routingStrategy, и Astro сгенерирует маршруты и покажет посетителям нужные URL.

├── src
│   ├── pages
│   │   ├── about.astro
│   │   ├── index.astro
│   │   ├── es
│   │   │   ├── about.astro
│   │   │   ├── index.astro
│   │   ├── pt-br
│   │   │   ├── about.astro
│   │   │   ├── index.astro

Вычисляйте относительные URL для ссылок с помощью getLocaleRelativeURL из нового модуля astro:i18n:

---
import {getRelativeLocaleUrl} from "astro:i18n";
const aboutUrl = getRelativeLocaleUrl("pt-br", "about");
---
<p>Learn more <a href={aboutUrl}>About</a> this site!</p>

Включение i18n-маршрутизации также даёт два новых свойства для определения языка браузера: Astro.preferredLocale и Astro.preferredLocaleList. Они объединяют заголовок Accept-Language браузера и список поддерживаемых языков сайта и позволяют автоматически учитывать предпочтения посетителя.

Подробнее об экспериментальной i18n-маршрутизации — в документации.

Prefetch

Prefetch — возможность браузера заранее загружать страницы для посетителей, чтобы они были частично загружены ещё до навигации. Для многостраничных приложений prefetch важен для скорости сайта.

Раньше prefetch в Astro был доступен через официальную интеграцию (@astrojs/prefetch). Сегодня мы переносим prefetch в ядро как opt-in функцию и расширяем её возможности.

Включите prefetch, установив prefetch:true в конфиге Astro:

astro.config.js
import { defineConfig } from 'astro/config';


export default defineConfig({
  prefetch: true
})

Помимо переноса в ядро, новый prefetch стал гибче:

  • Настройка момента prefetch: tap (касание без полного клика), hover или при попадании в viewport.
  • Стратегия на каждую ссылку через атрибут data-astro-prefetch.
  • Prefetch для всех ссылок по умолчанию (как при <ViewTransitions />).
  • Игнорирование быстрых hover и scroll, чтобы не загружать контент, на который посетитель вряд ли кликнет.

Prefetch включён по умолчанию при View Transitions, а новая реализация позволяет отключать его для отдельных ссылок:

<a href="/logout" data-astro-prefetch="false">Logout</a>

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

Content Collections Build Cache (experimental)

Крупные статические сайты с активным использованием Content Collections могут попробовать новый экспериментальный кэш сборки.

Включает несколько рефакторингов процесса сборки Astro для оптимизации обработки Content Collections — это должно заметно ускорить сборку у пользователей с большим числом коллекций.

Пользователи статических сайтов могут включить новый кэш, добавив флаг в конфиг Astro:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    contentCollectionCache: true,
  },
})

При включении файлы, сгенерированные из content collections, сохраняются в cacheDir (по умолчанию node_modules/.astro) и переиспользуются между сборками. Большинство CI-сред автоматически восстанавливают файлы в node_modules/.

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

При проблемах с экспериментальной функцией дайте нам знать!

Кэш можно обойти для одной сборки флагом --force:

astro build --force

Form support in View Transitions

Роутер <ViewTransitions /> теперь обрабатывает отправку форм — те же анимированные переходы и сохранение состояния UI при POST, что уже есть для ссылок <a>. С этим дополнением анимации возможны во всех сценариях:

  • Переходы по ссылкам между страницами.
  • Изменение состояния в формах (например, настройки сайта).
  • Ручная навигация через API navigate().

Сейчас функция opt-in, но с Astro 4.0 будет включена по умолчанию. Чтобы включить, добавьте проп handleForms к <ViewTransitions /> на странице:

src/layouts/MainLayout.astro
---
import { ViewTransitions } from 'astro:transitions';
---


<html>
  <head>
    <!-- ... -->
    <ViewTransitions handleForms />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Как и для ссылок, можно отключить обработку отправки формы через data-astro-reload:

src/components/Contact.astro
<form class="contact-form" action="/request" method="post" data-astro-reload>
  <!-- ...-->
</form>

Поддержка форм работает для method="get" и method="post".

Image optimization improvements

Astro assets продолжает улучшаться; в 3.5:

  • Исходные изображения, не используемые вне пайплайна оптимизации, удаляются из финальной сборки. При большом числе таких файлов (например, миниатюр) это снижает объём хранилища и время деплоя.
  • Новое свойство propertiesToHash позволяет указать, какие свойства getImage() / <Image /> / <Picture /> использовать для хеширования файлов при локальных трансформациях. Для большинства сервисов это src, width, quality и т.п.
  • <Picture /> теперь использует jpg и jpeg как fallback, если исходник в этих форматах.

Integration Hooks to add Middleware

Теперь интеграция Astro может добавлять middleware от имени пользователя. Раньше для стороннего middleware пользователь создавал src/middleware.ts сам. Теперь достаточно добавить интеграцию.

Для авторов интеграций — новая функция addMiddleware в хуке astro:config:setup. Она позволяет указать модуль middleware и порядок применения:

my-package/middleware.js
import { defineMiddleware } from 'astro:middleware';


export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();


  if(response.headers.get('content-type') === 'text/html') {
    let html = await response.text();
    html = minify(html);
    return new Response(html, {
      status: response.status,
      headers: response.headers
    });
  }


  return response;
});

Middleware интеграции можно указать так, чтобы он выполнялся до или после middleware приложения (в src/middleware.{js,ts}):

my-package/integration.js
export function myIntegration() {
  return {
    name: 'my-integration',
    hooks: {
      'astro:config:setup': ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: 'my-package/middleware',
          order: 'pre'
        });
      }
    }
  };
}

Multiple code themes (experimental)

Astro недавно перешёл на shikiji для подсветки синтаксиса; теперь добавлена поддержка нескольких тем через markdown.shikiConfig.experimentalThemes.

Это упрощает светлую и тёмную тему для code blocks. Пример:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  markdown: {
    shikiConfig: {
      experimentalThemes: {
        light: 'github-light',
        dark: 'github-dark'
      }
    }
  }
});

Qwik Integration

От сообщества — интеграция Astro для Qwik! Установка:

npx astro add @qwikdev/astro

Или вручную:

astro.config.mjs
import { defineConfig } from 'astro/config';
import qwikdev from '@qwikdev/astro';


export default defineConfig({
  integrations: [qwikdev()],
});

Подробнее — в посте блога; при проблемах — репозиторий интеграции.

Bug Fixes

В релизе также исправления ошибок. См. release notes.