# Гайд по Astro 3.0: от статических страниц до полнофункционального SSR
Источник: https://www.youtube.com/watch?v=e-hTm5VmofI
Канал: freeCodeCamp.org
Опубликовано: 29.09.2023
---
Веб-разработка переживает ренессанс фреймворков, ориентированных на производительность, и Astro занимает в этом процессе центральное место. В рамках подробного обучающего курса от freeCodeCamp.org популярный инструктор и спикер Джеймс Кью Квик (James Q Quick) разбирает возможности Astro 3.0. По его мнению, это один из самых захватывающих инструментов для создания быстрых сайтов с акцентом на контент: блогов, лендингов и технической документации.
## 🚀 Начало работы и философия Astro
[[JUMP:0:00]]
Astro позиционируется как универсальный фреймворк «all-in-one». Основная идея заключается в том, чтобы доставлять пользователю как можно меньше JavaScript, обеспечивая при этом высокую скорость загрузки [0:26]. Джеймс Квик подчеркивает, что Astro идеально подходит для сайтов, где контент превалирует над сложной интерактивностью.
Для старта проекта рекомендуется использовать команду:
* `npm create astro@latest` [0:48]
Критически важным техническим требованием является версия Node.js. Автор напоминает, что для работы установщика Astro версии 3 требуется Node.js 18 или выше [3:26]. Для управления версиями он рекомендует использовать NVM (Node Version Manager). При создании проекта Houston (маскот Astro) предложит выбрать шаблон: пустой, с примерами файлов или готовый блог [4:34].
## 📂 Структура проекта и магия .astro файлов
[[JUMP:6:51]]
Структура Astro проекта интуитивно понятна тем, кто работал с современными JS-фреймворками, но имеет свои особенности:
* **Директория `public/`**: файлы отсюда доступны напрямую по URL. Например, `favicon.svg` будет доступен в корне сайта [7:04].
* **Директория `src/`**: здесь живет основной код.
* **Файловый роутинг**: файлы в папке `src/pages/` автоматически становятся страницами [7:43].
Ключевой элемент системы — компоненты с расширением `.astro`. Они состоят из двух частей:
1. **Code Fence (Frontmatter)**: блок между тройными тире `---`, где пишется JavaScript или TypeScript. Этот код выполняется только на сервере во время сборки или запроса [8:10].
2. **HTML-шаблон**: идет сразу после блока JavaScript.
Джеймс объясняет концепцию «слотов» (``) в макетах (layouts). Это механизм инъекции контента страницы внутрь общей оболочки (шапки, подвала) [8:50]. Также Astro поддерживает типизацию пропсов (props) через интерфейсы TypeScript, что делает разработку более предсказуемой [9:17].
## 🎨 Стилизация и интеграция Tailwind CSS
[[JUMP:10:24]]
По умолчанию стили в Astro-компонентах изолированы (scoped). Это означает, что CSS, написанный внутри компонента, не затронет другие части сайта [11:31]. Однако для глобальных стилей предусмотрена директива `is:global`.
Джеймс Квик отдает предпочтение Tailwind CSS и демонстрирует, насколько просто интегрировать сторонние инструменты в Astro с помощью встроенных команд [12:27]:
* Команда `npx astro add tailwind` автоматически устанавливает зависимости, создает конфиг и обновляет файл `astro.config.mjs` [16:55].
* Интеграции позволяют в одну строку добавлять поддержку React, Vue, Svelte и других инструментов [17:13].
## 📚 Коллекции контента: лучший способ управления данными
[[JUMP:27:53]]
Одной из самых мощных функций Astro, по мнению Джеймса, являются Content Collections (Коллекции контента). Это строго типизированный способ управления локальными Markdown или MDX файлами [28:47].
Процесс настройки выглядит так:
1. Файлы создаются в `src/content/[название_коллекции]/`.
2. В файле `src/content/config.ts` описывается схема данных с использованием библиотеки Zod [29:39].
3. Zod позволяет проверять наличие обязательных полей (автор, дата, заголовок) и типов данных прямо на этапе разработки [33:14].
Джеймс утверждает, что это лучший опыт работы с контентом, который он когда-либо видел на любой платформе [29:00]. Для получения данных используется функция `getCollection()`, которая возвращает массив объектов с данными фронтматтера и содержимым [34:58].
## 🛠 Динамические маршруты и рендеринг контента
[[JUMP:41:04]]
Для создания страниц под каждый пост в блоге используются динамические маршруты. Файл с названием вида `[slug].astro` позволяет генерировать страницы на лету [41:18].
Основные этапы:
1. **`getStaticPaths()`**: функция, которая сообщает Astro, какие именно страницы нужно сгенерировать заранее [41:58].
2. **`render()`**: метод для преобразования Markdown в HTML-компонент [43:50].
Для оформления текста из Markdown автор советует плагин Tailwind CSS Typography. После его установки достаточно добавить класс `prose` к обертке контента, чтобы заголовки, списки и цитаты автоматически получили красивые стили [46:40].
## 🖼 Оптимизация изображений и View Transitions
[[JUMP:48:13]]
Astro включает мощный компонент `` для автоматической оптимизации. Вместо стандартного тега `![]()
` Джеймс рекомендует использовать его, так как он [49:06]:
* Преобразует изображения в формат WebP.
* Изменяет размер под нужные параметры.
* Поддерживает «ленивую загрузку» (lazy loading), предотвращая загрузку картинок вне видимости пользователя [51:45].
Интересной фишкой версии 3.0 стала поддержка View Transitions API. Добавление всего одной строки кода — компонента `` в `head` макета — позволяет создавать плавные анимации перехода между страницами, имитируя поведение одностраничного приложения (SPA) [53:16].
## 🌐 SSG против SSR: когда переходить на сервер
[[JUMP:59:31]]
По умолчанию Astro работает как генератор статических сайтов (SSG). Весь HTML создается во время сборки и развертывается на CDN [1:00:49]. Однако фреймворк поддерживает и серверный рендеринг (SSR).
Различия по мнению автора:
* **SSG**: файлы генерируются один раз. Это максимально быстро, но не подходит для персонализированного контента [1:01:28].
* **SSR**: страница генерируется на сервере в момент запроса пользователя. Это позволяет работать с живыми данными из БД и куками (cookies) [1:04:05].
Для включения SSR в конфиге нужно изменить параметр `output: 'server'` и добавить адаптер для хостинга (Netlify или Vercel) [1:04:42]. Также возможен гибридный режим, где часть страниц статические, а часть — динамические [1:08:28].
## 🛡 API-роуты и аутентификация
[[JUMP:1:09:03]]
Astro позволяет создавать полноценные API-эндпоинты. Если создать файл `.ts` в папке `pages`, он будет работать как обработчик запросов `GET`, `POST` и других [1:10:01].
Джеймс демонстрирует создание POST-запроса, который принимает JSON и возвращает данные обратно. По словам гостя, это открывает двери для создания полнофункциональных приложений с аутентификацией, где сессии пользователей отслеживаются через куки [1:15:48]. В своем полном курсе он показывает интеграцию с базой данных Xata для хранения профилей пользователей.