Astro 7: когда PageSpeed 100% — это не маркетинг

Когда в очередной раз видишь заявления про «мгновенную загрузку» и «100% PageSpeed», хочется проверить — где тут реальность, а где маркетинг. Мой эксперимент с Astro 7 для личного портфолио показал: иногда цифры не врут. Но есть нюансы.

Из чего складывается скорость

Переход с Next.js на Astro дал прирост в Lighthouse на 30-40 пунктов. Но важно понимать, что именно здесь работает:

Zero JS по умолчанию — Astro не притаскивает hydration-бандлы без явного указания. Для сайта-портфолио с минимумом интерактива это идеально.
Islands architecture — интерактивные компоненты загружаются изолированно. Мой слайдер проектов тянет 3 КБ вместо 50 КБ в Next-реализации.
Оптимизация статики — astro:assets автоматически конвертирует SVG в JSX, ресайзит изображения и даже генерирует AVIF.

Пример конфига для изображений:

// astro.config.mjs
export default defineConfig({
  image: {
    service: {
      entrypoint: "astro/assets/services/sharp",
    },
    domains: ["images.unsplash.com"],
  },
});

Где Astro 7 реально упрощает жизнь

Роутинг без головной боли

Файловая маршрутизация в Next.js иногда приводит к кашам из getStaticPaths. В Astro достаточно положить project/[id].astro в папку pages — и динамические роуты работают из коробки. Для генерации 100+ страниц портфолио хватило простого glob-импорта:

// pages/project/[id].astro
const projects = await Astro.glob("../content/projects/*.md");

Коллекции вместо кастомных скриптов

Content Collections в Astro 7 — это как TypeScript для контента. Определяешь схему в src/content/config.ts, и получаешь валидацию + автодополнение:

import { defineCollection } from "astro:content";

const projects = defineCollection({
  schema: z.object({
    title: z.string(),
    tags: z.array(z.string()),
    priority: z.number().default(0),
  }),
});

Больше никаких fs.readFile с ручным парсингом frontmatter.

Подводные камни, которые стоит учесть

React-компоненты требуют явного hydration
Если тянете свои старые компоненты из React-экосистемы, придется явно указывать client:load или client:idle. Иначе они останутся статичным HTML.
Ограниченный SSR для динамики
Для моего блога хватило статики, но если нужно работать с auth или real-time данными, Astro — не лучший выбор. Здесь Next.js или Remix пока вне конкуренции.
Плагины vs встроенные решения
Интеграция с Tailwind или MDX требует установки отдельных пакетов. Это не недостаток, но после Next.js, где всё включено, кажется лишним шагом.

Когда Astro — хороший выбор

После недели использования могу рекомендовать Astro 7 для:

Маркетинговых сайтов и портфолио
Документации (особенно с Content Collections)
Блогов с предсказуемым контентом
Любых проектов, где важнее TTFB, чем интерактивность

Сейчас тестирую Astro + View Transitions API для анимированных переходов между страницами. Первые результаты выглядят многообещающе — нативные переходы без JS-оверхеда. Но это уже тема для следующего поста.

Источник: https://dev.to/powergr/trying-astro-7-im-impressed-my-portfolio-site-is-super-fast-and-has-a-100-pagespeed-insights-2jlj