Astro 5.0

Автор
Erika
Matt Kane
Matthew Phillips

Представляем Astro 5.0! Astro Content Layer для загрузки контента из любого источника и Server Islands для сочетания кешированного статического контента с динамическим персонализированным.

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

Главные новинки релиза:

Попробуйте на astro.new или создайте проект:

npm create astro@latest

Обновление существующего проекта:

# Recommended:
npx @astrojs/upgrade


# Manual:
npm install astro
pnpm install astro
yarn add astro

upgrade guide — детали и миграция каждого изменения.

Content Layer

Astro — лучший фреймворк для content-driven сайтов; Astro 5.0 делает его ещё лучше. Astro Content Layer — гибкий подключаемый способ управления контентом: единый типобезопасный API для определения, загрузки и доступа к контенту — откуда бы он ни приходил.

src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
import { notionLoader } from "notion-astro-loader";


const blog = defineCollection({
  // Load data from Markdown files on disk
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* optionally define a schema for type-safe data */  }),
});


const database = defineCollection({
  // Automatically fetch content in one line with a loader
  loader: notionLoader({ /* ... */ })
});


const countries = defineCollection({
  // Load data from anywhere!
  loader: () => fetch('https://api.example.com/countries').then(res => res.json()),
});


export const collections = { blog, database, countries }

С Astro 2.0 content collections организуют статический контент типобезопасно. По мере роста Markdown в Git становится непрактичным — CMS, REST API, Cloudinary. Content layer объединяет всё в одном type-safe хранилище с loaders — подключаемыми функциями загрузки и трансформации.

При сборке Astro кеширует коллекции в едином type-safe хранилище.

До 5x быстрее сборка Markdown на тяжёлых сайтах, до 2x для MDX, память −25–50%. Обратная совместимость — большинству не нужны изменения. migration guide.

content collections guide.

Server Islands

Server islands — эволюция islands architecture. Server islands на сервере: статический HTML и динамические server-компоненты на одной странице.

Контент на странице может быть:

  • Полностью статическим.
  • Из БД, меняющейся чаще деплоя.
  • Персонализированным.

Раньше одна caching strategy для всего — для logged-in обычно без кеша. Server islands — лучшее из обоих миров.

A diagram showing the server island population parts of the page from the server.

Для самого динамичного контента: аватар, корзина, отзывы. Deferred islands — агрессивнее кешируйте страницу. Edge CDN — критичные части мгновенно. Custom fallback до загрузки islands.

Каждый island независимо — медленный backend не блокирует остальное.

Улучшения по обратной связи:

  • Headers внутри island для cache lifetime.
  • Server islands на платформах с автосжатием.
  • Шифрование props server islands.

Astro 5 переосмысливает «static». server islands guide.

Simplified prerendering

Static (.html при сборке) и Server (runtime). Hybrid в Astro 2.0 смешивал оба.

Матрица «какие настройки для этой фичи?» разрослась. Люди server-renderили больше нужного.

Hybrid и static объединены в default static. Отдельные маршруты в runtime — добавьте адаптер. prerender = false — Astro переключит output mode для SSR-фич.

on-demand rendering.

astro:env

astro:env — типобезопасное определение переменных окружения:

  • client или server
  • secrets — не в клиенте и не в build output
  • required vs optional
  • типы — string, number, boolean, enum
import { STRIPE_API_KEY } from 'astro:env/server';

type safe environment variables.

Vite 6

Astro 5 — один из первых фреймворков с Vite 6. Environment API — development ближе к production. Интеграции уже используют; в core — Cloudflare, Edge runtime локально.

Vite 6 announcement.

Experimental features

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


export default defineConfig({
  experimental: {
    responsiveImages: true,
    svg: true,
  }
});

Experimental: Image cropping support

fit и position для Sharp:

---
import logo from "../logo.png";
---


<Image src={logo} fit="cover" width={200} height={200} />

experimental responsive image support.

Experimental: Responsive image layouts

Автоматические srcset и sizes:

---
import { Image } from "astro:assets"
import rocket from "./rocket.jpg"
---


<Image src={rocket} width={800} height={600} layout="responsive" />

Experimental: SVG Component

Импорт .svg как Astro-компонент:

---
import Logo from '../assets/logo.svg'
---


<Logo width={100} height={100} fill="blue" />

SVG components.

Bug Fixes & more improvements

release notes.

Спасибо Bjorn Lu, Sarah Rainsberger, Ben Holmes, Michael Stramel, Nate Moore, Matthew Phillips, Florian Lefebvre, Matt Kane, Emanuele Stoppa, Rohan Godha, Armand Philippot, Kevin, Erika “Princesseuh”.

Надеемся, вам понравится Astro 5.0! Bluesky, Twitter, Mastodon или Discord.