Пропустить до содержимого

Astro Острова

Astro является пионером и популяризатором фронтенд-архитектуры под названием Острова. Архитектура Островов обеспечивает более высокую производительность фронтенда, помогая вам избежать монолитных паттернов JavaScript и автоматически удаляя весь несущественный JavaScript со страницы. Разработчики могут продолжать использовать свои любимые компоненты UI и фреймворки с Astro, получая все эти преимущества.

Краткая история

Заголовок раздела Краткая история

Термин “component island” был впервые предложен фронтенд-архитектором Etsy Кэти Сайлор-Миллер в 2019 году. Затем эта идея была развита и задокументирована в этом посте создателем Preact Джейсоном Миллером 11 августа 2020 года.

Общая идея архитектуры “островов” обманчиво проста: рендерите HTML-страницы на сервере и вставляйте заполнители или слоты вокруг высокодинамичных областей […], которые затем могут быть “гидрированы” на клиенте в небольшие автономные виджеты, повторно используя их исходный HTML, рендеримый на сервере. — Джейсон Миллер, создатель Preact

Техника, на которой основан этот архитектурный паттерн, также известна как частичная или селективная гидратация.

В отличие от этого, большинство веб-фреймворков на базе JavaScript гидратируют и рендерят весь веб-сайт как одно большое JavaScript-приложение (также известное как одностраничное приложение, или SPA). SPA обеспечивают простоту и мощность, но страдают от проблем с производительностью загрузки страниц из-за интенсивного использования JavaScript на стороне клиента.

SPA занимают свое место, даже встроенные в страницу Astro. Однако SPA лишены встроенной возможности селективной и стратегической гидратации, что делает их тяжелым выбором для большинства современных веб-проектов.

Astro стал популярным как первый основной веб-фреймворк на JavaScript с встроенной селективной гидратацией, использующим паттерн “островных компонентов”, впервые предложенный Сайлор-Миллер.

Что такое остров?

Заголовок раздела Что такое остров?

В Astro под “островом” понимается любой интерактивный компонент пользовательского интерфейса на странице. Думайте об острове как об интерактивном виджете, плавающем в море статичного, легкого, рендеримого сервером HTML.

Header (интерактивный остров)
Sidebar (статичный HTML)

Статичный контент с текстом, картинками и т.д.

Image carousel (интерактивный остров)
Footer (статичный HTML)

Источник: Islands Architecture: Jason Miller

Остров всегда работает изолированно от других островов на странице, и на странице может существовать несколько островов. Острова могут обмениваться состоянием и взаимодействовать друг с другом, даже если они работают в разных контекстах компонентов.

Такая гибкость позволяет Astro поддерживать множество UI-фреймворков, таких как React, Preact, Svelte, Vue и SolidJS. Поскольку они независимы, вы можете даже смешивать несколько фреймворков на одной странице.

Создание острова

Заголовок раздела Создание острова

По умолчанию Astro автоматически переводит каждый компонент UI в HTML и CSS, убирая весь JavaScript на стороне клиента.

src/pages/index.astro
<MyReactComponent />

Это может показаться строгим, но именно такое поведение по умолчанию обеспечивает быстродействие сайтов Astro и защищает разработчиков от случайной отправки ненужного или нежелательного JavaScript, который может замедлить работу их сайта.

Для превращения любого статичного компонента пользовательского интерфейса в интерактивный остров требуется только директива client:*. Затем Astro автоматически собирает и упаковывает ваш JavaScript на стороне клиента для оптимизации производительности.

src/pages/index.astro
<!-- Теперь этот компонент интерактивен на странице!
     Остальная часть вашего сайта остается статичной. -->
<MyReactComponent client:load />

При использовании островов клиентский JavaScript загружается только для явно интерактивных компонентов, которые вы отмечаете с помощью директив client:*.

А поскольку взаимодействие настраивается на уровне компонентов, вы можете устанавливать различные приоритеты загрузки для каждого компонента в зависимости от его использования. Например, client:idle указывает компоненту загружаться, когда браузер простаивает, а client:visible указывает компоненту загружаться только после того, как он попадает в область видимости.

В чем преимущества Островов?

Заголовок раздела В чем преимущества Островов?

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

Еще одно преимущество — параллельная загрузка. На приведенной выше иллюстрации низкоприоритетному острову “карусель изображений” не нужно блокировать высокоприоритетный остров “заголовок”. Оба загружаются параллельно и гидратируются изолированно, что означает, что заголовок становится интерактивным немедленно, не дожидаясь более тяжелой карусели, расположенной ниже на странице.

Что еще лучше, вы можете указать Astro, как и когда именно отображать каждый компонент. Если карусель изображений требует долгой загрузки, вы можете подключить специальную клиентскую директиву, которая скажет Astro загружать карусель только тогда, когда она становится видимой на странице. Если пользователь ее никогда не увидит, она и не загрузится.

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

Острова — это секрет быстродействия Astro по умолчанию!