Astro: Обзор

Добро пожаловать в курс по Astro — одному из самых быстрорастущих веб-фреймворков для создания высокопроизводительных сайтов. Astro переосмысливает подход к веб-разработке: вместо того чтобы отправлять в браузер тонны JavaScript, он генерирует чистый HTML с минимальным количеством клиентского кода.

Что такое Astro?

Astro — это фреймворк для создания многостраничных приложений (MPA), разработанный специально для контентно-ориентированных проектов: блогов, документаций, маркетинговых лендингов и корпоративных сайтов. Его ключевая идея проста и революционна — по умолчанию не отправлять JavaScript в браузер.

В мире, где средний вес JavaScript-бандла растёт с каждым годом, Astro предлагает радикально другой подход. Компоненты рендерятся на сервере в чистый HTML, и только те части страницы, которым действительно нужна интерактивность, получают JavaScript-код.

Почему Astro стал популярным

С момента выхода версии 1.0 в 2022 году Astro стремительно набрал популярность:

• Победитель наград JavaScript Rising Star несколько лет подряд
• Используется такими компаниями как Google, Microsoft и Netlify
• Более 40 000 звёзд на GitHub
• Отличные показатели Core Web Vitals — сайты на Astro регулярно получают 100/100 в Lighthouse

Структура курса

Этот раздел разбит на 7 основных модулей, охватывающих всё необходимое для продуктивной работы с Astro:

Модуль	Тема	Что изучим
1	Обзор	Знакомство с курсом и возможностями Astro
2	Введение	Концепции, сравнение с другими фреймворками
3	Установка	Создание проекта, структура файлов
4	Компоненты	.astro файлы, frontmatter, шаблоны
5	Страницы и роутинг	Файловый роутинг, динамические маршруты
6	Макеты (Layouts)	Создание переиспользуемых макетов
7	Islands Architecture	Частичная гидратация и производительность

Ключевые концепции, которые мы изучим

🏝️ Islands Architecture

Интерактивные “острова” встраиваются в статический HTML. Только они получают JavaScript — остальная страница остаётся чистым HTML.

⚡ Zero JS by Default

Astro не отправляет никакого JavaScript по умолчанию. Вы явно указываете, каким компонентам нужна гидратация.

🔧 Multi-Framework Support

Astro позволяет использовать компоненты из React, Vue, Svelte, Solid и других фреймворков в одном проекте одновременно.

📚 Content Collections

Встроенная система управления контентом с типизацией TypeScript: Markdown, MDX, и любые JSON/YAML данные.

🚀 Файловый роутинг

Структура файлов в папке src/pages/ автоматически становится структурой URL вашего сайта.

Пример кода Astro

Вот как выглядит типичный компонент Astro — вам это быстро станет знакомым:

---
// Это frontmatter — серверный JavaScript
import Header from '../components/Header.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
const { title } = Astro.props;
---

<!-- Это шаблон — обычный HTML с выражениями -->
<Header />
<h1>{title}</h1>
<ul>
  {posts.map(post => (
    <li>
      <a href={'/blog/' + post.slug}>{post.data.title}</a>
    </li>
  ))}
</ul>

<style>
  h1 {
    color: #FF5D01;
    font-size: 2rem;
  }
</style>

Обратите внимание на три части:

1. Frontmatter (между ---) — серверный JavaScript, выполняется при сборке
2. Шаблон — HTML с возможностью вставлять выражения через {}
3. Стили — скопированные CSS-стили, изолированные для этого компонента

Требования к курсу

Перед началом курса рекомендуется иметь базовые знания:

• HTML/CSS — понимание структуры страниц и стилей
• JavaScript/TypeScript — базовый синтаксис ES6+
• Node.js — умение работать с npm или pnpm
• React (желательно) — опыт с JSX будет полезен, но не обязателен

Интерактивная демонстрация

Изучите ключевые возможности и модули курса. Переключайтесь между вкладками, кликайте на карточки чтобы узнать подробнее: