Островки Astro

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

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

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

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

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

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

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

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

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

В Astro островок – это улучшенный UI-компонент на в остальном статичной HTML-странице.

Клиентский островок — это интерактивный JavaScript UI-компонент, который гидратируется отдельно от остальной части страницы, в то время как серверный островок — это UI-компонент, который серверно рендерит своё динамическое содержимое отдельно от остальной части страницы.

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

Компонентные островки

Компоненты Astro — это строительные блоки шаблона вашей страницы. Они рендерятся в статический HTML без клиентского выполнения.

Представьте себе клиентский островок как интерактивный виджет, плавающий в океане в остальном статичного, лёгкого, серверного HTML. Серверные островки могут добавляться для персонализированных или динамических серверно рендеренных элементов, например, для отображения изображения профиля вошедшего пользователя.

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

Карусель изображений (интерактивный островок)

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

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

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

Клиентские островки

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

<MyReactComponent />

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

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

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

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

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

Преимущества клиентских островков

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

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

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

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

Клиентские островки — это секрет успеха производительности Astro «по умолчанию»!

Подробнее об использовании компонентов JavaScript-фреймворков (EN) в вашем проекте.

Серверные островки

Серверные островки позволяют вынести ресурсоёмкий или медленный серверный код из основного процесса рендеринга, что упрощает сочетание высокопроизводительного статичного HTML и динамических компонентов, генерируемых сервером.

Добавьте директиву server:defer (EN) к любому компоненту Astro на странице, чтобы превратить его в отдельный серверный островок:

---
import Avatar from "../components/Avatar.astro";
---
<Avatar server:defer />

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

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

Эта схема рендеринга разработана таким образом, чтобы быть переносимой. Она не зависит от какой-либо серверной инфраструктуры, поэтому будет работать с любым хостом — от сервера Node.js в контейнере Docker до выбранной вами платформы бессерверных решений.

Преимущества серверных островков

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

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

Пример сайта, который выигрывает от серверных островков Astro, — это витрина интернет-магазина. Хотя основной контент страниц товаров изменяется редко, на этих страницах обычно присутствуют динамические элементы:

Аватар пользователя в шапке.
Специальные предложения и скидки на товар.
Отзывы пользователей.

Используя серверные островки для этих элементов, ваш посетитель сразу увидит самую важную часть страницы — товар. Универсальные аватары, индикаторы загрузки и объявления магазина могут быть отображены как запасной контент, пока персонализированные данные не станут доступны.

Подробнее об использовании серверных островков (EN) в вашем проекте.

Внести свой вклад Сообщество Sponsor