Разработка фронтенда сайта на Astro
Astro — веб-фреймворк, ориентированный на контентные сайты с минимальным JavaScript. Ключевая концепция — Islands Architecture: большая часть страницы — статический HTML, интерактивные компоненты (острова) загружаются независимо с явным управлением гидрацией.
Islands Architecture
---
// Этот код выполняется только на сервере (build time или request time)
import HeavyChart from '../components/Chart.tsx';
import StaticHero from '../components/Hero.astro';
---
<html>
<body>
<!-- Статичный HTML, 0 JavaScript -->
<StaticHero title="Заголовок" />
<!-- Интерактивный React-компонент загружается только при видимости -->
<HeavyChart client:visible data={chartData} />
<!-- Загружается немедленно, гидрируется на клиенте -->
<Counter client:load />
</body>
</html>
Директивы гидрации:
-
client:load— сразу -
client:idle— когда браузер не занят -
client:visible— когда попадает в viewport -
client:media="(max-width: 768px)"— при условии media query -
client:only="react"— только клиент (без SSR для этого компонента)
Astro компоненты
---
// Component Script — сервер (TypeScript)
interface Props {
title: string;
posts: Post[];
}
const { title, posts } = Astro.props;
const formattedDate = new Date().toLocaleDateString('ru-RU');
---
<!-- Component Template — HTML + JSX-подобный синтаксис -->
<section>
<h2>{title}</h2>
<p>Обновлено: {formattedDate}</p>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
</section>
<style>
/* Scoped CSS */
section { max-width: 800px; margin: 0 auto; }
</style>
Content Collections
Типизированная работа с Markdown/MDX контентом:
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog', ({ data }) => !data.draft);
posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
Поддержка нескольких фреймворков
Astro поддерживает React, Vue, Svelte, Solid, Preact компоненты в одном проекте:
npx astro add react vue svelte
---
import ReactCounter from './Counter.tsx'; // React
import VueWidget from './Widget.vue'; // Vue
---
<ReactCounter client:load />
<VueWidget client:visible />
View Transitions
Плавные переходы между страницами без SPA-архитектуры:
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions />
</head>
Использует нативный Navigation API браузера с fallback на CSS animations.
Когда выбирать Astro
- Маркетинговые сайты, лендинги
- Документационные сайты (официальная документация многих библиотек)
- Блоги с тысячами статей
- Сайты, где Core Web Vitals критичны
Не подходит: приложения с тяжёлой клиентской интерактивностью (дашборды, редакторы).
Производительность
Astro-сайты часто получают 100/100 в Lighthouse без дополнительных оптимизаций: нет JavaScript по умолчанию, изображения через <Image>, CSS минифицируется и инлайнится.
Сроки
Контентный сайт на Astro с Content Collections, SSG (15–50 страниц): 1–2 недели. Гибридный сайт с серверными маршрутами и React-островами: 2–4 недели.