Розроблення фронтенду сайту на Astro
Astro — веб-фреймворк, орієнтований на контентні сайти з мінімальним JavaScript. Ключова концепція — Islands Architecture: більша частина сторінки — статичний HTML, інтерактивні компоненти (острови) завантажуються незалежно з явним управлінням гідратацією.
Islands Architecture
---
// Цей код виконується тільки на сервері (час збирання або запиту)
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('uk-UA');
---
<!-- 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-анімації.
Коли вибирати Astro
- Маркетингові сайти, лендинги
- Сайти документації (офіційна документація багатьох бібліотек)
- Блоги з тисячами статей
- Сайти, де Core Web Vitals критичні
Не підходить: приложення з тяжелою клієнтською інтерактивністю (дашборди, редактори).
Продуктивність
Astro-сайти часто отримують 100/100 у Lighthouse без додаткових оптимізацій: немає JavaScript за замовчуванням, зображення через <Image>, CSS мініфікується та інлайнується.
Терміни
Контентний сайт на Astro з Content Collections, SSG (15–50 сторінок): 1–2 тижня. Гібридний сайт з серверними маршрутами та React-островами: 2–4 тижня.