Astro — это новый подход к нынешнему увлечению JavaScript: добиться большей производительности от реактивного интерфейса. Он разработан той же командой, которая создала инструмент сборки Snowpack.
Было предпринято несколько попыток улучшить производительность, избегая дорогостоящей предварительной выборки и начальной загрузки, от которых страдают React-подобные фреймворки. Это пресловутая проблема гидратации, описанная здесь.
Астро использует интересный и новый подход. Это система сборки, которая позволяет вам использовать любую платформу (React, Svelte, Vue и т. д.), а затем определяет, где лучше всего использовать отложенную загрузку. Вы можете думать об этом как о своего рода умном разделении кода, применяемом к вашему приложению во время сборки.
Таким образом, вы можете использовать ту же знакомую структуру, которую используете сейчас, но при этом получаете потенциально огромный выигрыш в производительности.
Архитектура островов
Веб-архитектуру, которую предлагает Astro, иногда называют островной архитектурой. Основная идея заключается в том, что острова — это ваши интерактивные, зависящие от JavaScript компоненты, окруженные чистой разметкой HTML/CSS.
Разделив приложение таким образом, вы можете отправить весь HTML-код прямо в браузер, чтобы пользователю было с чем взаимодействовать, в то время как части, зависящие от JavaScript, можно будет загружать только по мере необходимости. Вы даже можете указать Astro отложить выполнение JavaScript до тех пор, пока компонент не станет виден пользователю, как вы увидите ниже.
Работаем с Астро
Начнем знакомство с Astro с использования онлайн-песочницы. Нажмите здесь, чтобы открыть его.
Этот URL-адрес будет отображать простую страницу с именем Page.astro с отметкой времени. Обратите внимание, что страница (листинг 1) разбита на два раздела. Первый раздел, обозначенный первым тройным тире (---), содержит код, который будет выполняться на сервере во время сборки, а не во время выполнения. Второй раздел, обозначенный вторым тройным тире, содержит разметку, которая будет доставлена во время выполнения.
Листинг 1. Простая песочница Astro
---
import {format} from 'date-fns';
// Welcome to Astro!
// Write JavaScript & TypeScript here, in the "component script."
// This will run during the build, but never in the final output.
// Use these variables in the HTML template below.
//
// Full Syntax:
// https://docs.astro.build/core-concepts/astro-components/
const builtAt: Date = new Date();
const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Astro Playground</title>
<style>
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 15vh;
font-family: Arial;
}
.note {
margin: 0;
padding: 1rem;
border-radius: 8px;
background: #E4E5E6;
border: 1px solid #BBB;
}
</style>
</head>
<body>
<header>
<img width="60" height="80" src="https://bestofjs.org/logos/astro.svg" alt="Astro logo">
<h1>Hello, Astro!</h1>
<p class="note">
<strong>RENDERED AT:</strong><br/>
{builtAtFormatted}
</p>
</header>
</body>
</html>
Обратите внимание, как {builtAtFormatter} используется для ссылки на переменную времени сборки в разметке.
Добавьте компонент в Astro
Теперь добавим компонент. Нажмите значок плюса на панели файлов вверху, как показано на изображении 1.
Изображение 1. Добавьте компонент
ИДГВаш новый компонент получит имя по умолчанию (Component1.astro) и содержимое, как показано в листинге 2.
Листинг 2. Component1.astro
---
const name = "Component"
---
<h1>Hello {name}</h1>
Здесь мы снова имеем простое назначение и отображение переменных. Давайте воспользуемся компонентом на главной странице.
Вернитесь в Page.astro. Обратите внимание, что система любезно вставила импорт в сегмент JavaScript:
import Component from '@/Component.astro';
Вы можете использовать этот компонент, вставив <Component /> в разметку. Сделайте это, и вы увидите выходные данные дочернего компонента в окне предварительного просмотра.
Использование фреймворков с Astro
Суперсила Astro — это поддержка множества других фреймворков. Он делает это, используя свои механизмы рендеринга в процессе сборки и компилируя их в «острова» компонентов. Давайте посмотрим, как это работает.
Если вы откроете эту ссылку, вы увидите приложение Astro, в котором работает компонент Svelte. (Вот пример, демонстрирующий несколько механизмов рендеринга.)
Первое, на что следует обратить внимание в приведенной выше демонстрации Svelte, — это файл astro.config.mjs. Содержимое этого файла будет выглядеть примерно так, как показано в листинге 3.
Листинг 3. Включение средства визуализации Svelte
export default /** @type {import('astro').AstroUserConfig} */ ({
// Enable the Svelte renderer to support Svelte components.
renderers: ['@astrojs/renderer-svelte'],
});
В листинге 3 показано, как включить Svelte, чтобы движок понимал компоненты Svelte. Теперь мы можем импортировать файл Svelte прямо в файл Astro. Например, давайте добавим эту строку в /pages/index.astro:
import Counter from '../components/Counter.svelte
Теперь мы можем использовать Counter из Svelte в Astro, как показано в листинге 4.
Листинг 4. Использование компонента Svelte в Astro
<Counter client:visible>
<h1>Hello, Svelte!</h1>
</Counter>
Хотя это типичное использование Svelte, обратите внимание, что у счетчика есть свойство, специфичное для Astro: client:visible. Это означает, что компонент не будет загружен в клиент, если он не виден на странице. Таким образом, достигается некоторая детальная ленивая загрузка с минимальными усилиями.
На момент написания Astro поддерживает Svelte, React, Vue, Solid, Preact и Lit. Процесс их использования такой же, как и в Svelte. Фактически, вы можете включить несколько механизмов рендеринга и использовать их одновременно в своем приложении Astro.
Помимо интеграции, Astro также предоставляет несколько тем и стартовых версий.
Точная настройка частичной гидратации с помощью Astro
Вы видели client:visible директива в действии. Есть и другие. В каждом случае директива сначала предписывает Astro визуализировать компонент на клиенте с помощью сопутствующего JavaScript вместо выполнения рендеринга на сервере и отправки HTML. Затем он сообщает Astro, как следует увлажнять компонент.
Директивы клиента Astro
Директивы клиента Astro управляют гидратацией компонентов на странице.
<MyComponent client:load />: увлажняет компонент при загрузке страницы.<MyComponent client:idle />: увлажняет компонент, как только основной поток освобождается (используетсяrequestIdleCallback()).<MyComponent client:visible />: увлажняет компонент, как только элемент попадает в область просмотра (используетIntersectionObserver). Полезно для контента внизу страницы.<MyComponent client:media={QUERY} />: Гидратирует компонент, как только браузер соответствует данному медиа-запросу (используетmatchMedia). Полезно для переключателей боковой панели или других элементов, которые должны отображаться только на мобильных или настольных устройствах.<MyComponent client:only={string} />: Гидратирует компонент при загрузке страницы, рендеринг только на клиенте. Принимает структуру компонента в виде строки (например,"svelte").
Подход во время сборки
Поскольку Astro по своей сути является инструментом сборки, он имеет полный контроль над тем, что в конечном итоге отправляется в браузер пользователя. Это означает, что в дополнение к умным действиям с ленивым JavaScript, Astro может грамотно использовать другие ресурсы, такие как CSS.
Более того, цель Astro — превратить как можно больше JavaScript в простой HTML, что означает меньшее количество передаваемых по сети данных, меньшую смену браузеров и более быстрое взаимодействие.
В целом, хотя Astro, по общему признанию, больше ориентирован на статические сайты, это многообещающий и инновационный подход — и очень активный проект, имеющий почти 16 тысяч звезд на GitHub.
