Astro 2.6 | Astro

Вышел Astro 2.6 — крупный релиз! Несколько экспериментальных функций стабилизированы и доступны без флага experimental:

Middleware
Hybrid SSR output mode
Custom client directives
CSS inlining

Astro 2.6 также добавляет новые функции, включая экспериментальные redirects:

Redirects (experimental): редиректы отдельных страниц в конфиге Astro.
Markdoc improvements: Markdoc наравне с MDX в Astro.
Language tool improvements: обновление расширения Astro VSCode на Volar.

Если Astro уже установлен, обновитесь до 2.6:

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

Заодно обновите интеграции и адаптеры @astrojs/*!

Middleware

Middleware стабилен и доступен без экспериментального флага. Middleware выполняет код до или после рендеринга страницы. Новый уровень контроля: аутентификация, редиректы, изменение заголовков и др.

export async function onRequest(context, next) {
  // Do something before the request is handled.
  const response = await next()
  // Or, do something before the response is returned.
  return response
}

Astro 2.6 также ввёл объект locals для передачи данных из middleware. Данные в locals доступны в Astro.locals на любой странице и в API endpoint.

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

// Example: A simple authentication check in middleware.
export async function onRequest({ cookies, locals }, next) {
  // Check for the "sid" user session ID cookie.
  // Return a 405 (Not Allowed) if the cookie is missing.
  const sessionId = cookies.get("sid");
  if (!sessionId) {
    return new Response(null, {status: 405});
  }
  // Use your own `getUser()` function to validate the user.
  // Return a 405 (Not Allowed) if the user isn't real.
  const user = await getUser(sessionId);
  if (!user) {
    return new Response(null, {status: 405});
  }
  // Attach the loaded user to the `locals` object.
  // Now, it can be read in the page route!
  locals.user = user;
  // Return `next()` to return the response.
  return next();
}

locals.user гарантированно доступен в любом рендере страницы или API handler.

---
const { user } = Astro.locals
---

<h1>Hello {user.name}!</h1>

Middleware впервые появился за экспериментальным флагом в Astro 2.4. API стабилен. См. руководство по Middleware.

Hybrid SSR Output Mode

Гибридный SSR output mode стабилен. output: "hybrid" позволяет смешивать интерактивные API endpoints и страницы при статическом pre-render по умолчанию.

export default defineConfig({
  output: "hybrid",
  adapter: netlify(),
})

Режим "hybrid" сближает static и dynamic. Та же SSR-функциональность, что в "server", но каждая страница по умолчанию статически pre-rendered — как в "static". В отличие от "static", hybrid включает сервер в сборку для динамических страниц и API.

Например, агентство может добавить динамический обработчик формы «Связаться с нами» на статический сайт: output: "hybrid" (и deploy adapter). Поведение «static by default» сохраняется, а endpoint формы помечается export const prerender = false.

// Mark the page as `prerender = false` to skip pre-rendering
// and run the API endpoint in the server on every submission.
export const prerender = false

export function post({ request }) {
  // ...
}

Функцию внёс @MoustaphaDev через public roadmap и RFC. Спасибо!

Custom client directives

Пользовательские client directives стабильны для разработчиков и авторов интеграций.

Client directives — основа island architecture Astro. Они управляют загрузкой интерактивного UI на уровне компонента: client:idle, client:visible и др. Раньше нельзя было определять свои — теперь можно.

Например, client:hover загружает и гидратирует компонент только при наведении:

import { defineConfig } from "astro/config"
import onHoverDirective from "./directives/client-hover.js"

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

После добавления интеграции используйте client:hover:

<Counter client:hover />

Создавайте свои директивы или публикуйте на npm!

Custom client directives появились в Astro 2.5 за флагом. API стабилен. См. руководство.

CSS inlining

Astro 2.6 добавляет опцию автоматического инлайнинга небольших фрагментов CSS в HTML — меньше запросов и внешних таблиц стилей. Попробуйте inlineStylesheets: "auto":

import { defineConfig } from "astro/config"

export default defineConfig({
  build: {
    inlineStylesheets: "auto",
  },
})

Автоинлайнинг CSS, вероятно, станет поведением по умолчанию в Astro 3.0. См. Configuration Reference.

Функцию внёс @lilnasy. Спасибо!

Redirects (experimental)

Astro 2.6 добавляет экспериментальные redirects. Включите experimental.redirects:

import { defineConfig } from "astro/config"

export default defineConfig({
  redirects: {
    "/old": "/new",
  },
  experimental: {
    redirects: true,
  },
})

Редиректы традиционно оставались на усмотрение разработчика — сложно на разных хостах и одинаково в dev и production.

Новый API redirects в конфиге Astro работает везде и оптимизируется адаптером. Netlify adapter конвертирует redirects в _redirects для CDN.

Цель — надёжная настройка redirects на всех хостах и адаптерах. Ждём обратную связь в Discord.

Markdoc Improvements

Поддержка Markdoc улучшена в @astrojs/markdoc: паритет с Markdown и MDX — автогенерация id в заголовках, лучшая подсветка, extends в конфиге.

Мы работаем со Stripe над авторингом контента. Рост экосистемы Markdoc радует!

Language Tool Improvements

Языковые инструменты Astro получили крупное обновление с 2.0 @astrojs/language-server и расширением VSCode. Завершена миграция на Volar.

Volar — фреймворк языковых инструментов от команды Vue. Как Vite внутри Astro, Volar позволяет меньше изобретать велосипед и больше строить функции. VSCode, astro check и другие потребители language server выиграют.

Volar становится стандартом для языковых инструментов — мы рады поддерживать проект.

Особая благодарность Johnson Chu (maintainer Volar)!