Astro 5.1 | Astro

Astro 5.1 уже доступен! К праздникам — первый минорный релиз эры Astro 5: экспериментальные сессии, улучшенное кеширование изображений и дополнительные инструменты для Astro Actions.

В комплекте:

Экспериментально: Sessions
Кеширование удалённых изображений
Хелпер getActionPath

Чтобы обновить существующий проект, используйте CLI @astrojs/upgrade. Или обновите вручную:

# Рекомендуется:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Experimental: Sessions

Если вы строили приложения на Rails или Laravel, вы знакомы с сессиями: простой способ отслеживать данные пользователя — статус входа, flash-сообщения, корзину — при навигации по сайту. Сессии позволяют безопасно хранить временные данные, привязанные к пользователю, без клиентского хранилища. Сейчас данные могут храниться в cookie или local storage — это небезопасно, неудобно или с лимитами объёма.

Сессии хранят данные на сервере и отправляют клиенту только ID сессии как cookie. Можно get и set данные сессии в страницах и компонентах Astro, API endpoints, Astro Actions и middleware. API и данные одинаковы везде.

В компонентах и страницах Astro доступ к сессии через Astro.session:

---
export const prerender = false;
const cart = await Astro.session.get('cart');
---

<a href="/cart">🛒 {cart?.length ?? 0} items</a>

Те же данные сессии доступны в Astro Actions:

import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  addToCart: defineAction({
    input: z.object({ productId: z.string() }),
    handler: async (input, context) => {
      const cart = await context.session.get("cart");
      cart.push(input.productId);
      await context.session.set("cart", cart);
      return cart;
    },
  }),
};

Сессии работают на on-demand страницах или идеально сочетаются с server islands — островки персонализированного контента на иначе статическом сайте.

---
import CartButton from '../components/CartButton.astro';
---
<CartButton server:defer />

Drivers

Сессии Astro работают на драйверах unstorage — модулях хранения данных сессий. Unstorage поддерживает десятки провайдеров.

Когда сессии станут стабильными, официальные адаптеры Astro автоматически настроят драйвер по умолчанию. В экспериментальной фазе нужно настроить driver для выбранного адаптера. Можно использовать кроссплатформенный драйвер вроде Upstash или Redis.

Usage

Чтобы попробовать экспериментальные сессии, добавьте флаг experimental.sessions в astro.config.mjs:

Пример с filesystem driver для адаптера Node.js:

  {
    adapter: node({ mode: 'standalone' }),
    experimental: {
      session: {
        // Required: the name of the Unstorage driver
        driver: "fs",
      },
    },
  }

Подробнее — в документации экспериментального флага sessions. Обратная связь приветствуется. Детали и участие в разработке — в Sessions RFC.

Remote image caching

Вы знаете и любите встроенный <Image /> для оптимизированных изображений с автоматическим ресайзом и оптимизацией. Компонент трансформирует локальные и удалённые изображения, но кеширование между сборками было только для локальных.

Теперь Astro кеширует и удалённые изображения, снижая необходимость повторной загрузки и трансформации при каждой сборке. Используются условные запросы с If-Modified-Since или If-None-Match — кеш используется, пока исходное изображение не изменилось.

Включено для всех сайтов; работает с любым хостом, поддерживающим условные запросы. Подробнее — в новой документации по кешированию ассетов.

Особая благодарность @oliverlynch за этот вклад!

`getActionPath` helper

Astro Actions просты: actions.like() или actions.addToCart(). Но иногда нужен URL action для fetch() с кастомными заголовками или API вроде navigator.sendBeacon().

Astro 5.1 представляет getActionPath() — больше гибкости при вызове action.

Нужна авторизация лайков? Вызовите action с заголовком Authorization и опцией keepalive:

<script>
import { actions, getActionPath } from 'astro:actions'

await fetch(getActionPath(actions.like), {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({ id: 'YOUR_ID' }),
  keepalive: true
})
</script>

Подробнее — в документации getActionPath().

Bug fixes

Много отличной обратной связи с релиза Astro 5 — мы усердно исправляли проблемы. Все исправления с Astro 5.0 — в changelog.

Спасибо Florian Lefebvre (@florian-lefebvre), @oliverlynch, Sarah Rainsberger (@sarah11918), Yan (@yanthomasdev), Emanuele Stoppa (@ematipico) и всем остальным контрибьюторам. Спасибо всем, кто использует Astro и делится обратной связью. Ждём, что вы построите с Astro 5.1!