Astro Острова
Astro Острова (или Компоненты-острова) это паттерн из веб-архитектуры, впервые разработанный в Astro. Идея “островной архитектуры” была впервые придумана фронтэнд-архитектором Etsy - Кэти Сайлор-Миллер в 2019, и дополнена создателем Preact - Джейсоном Миллером.
Что такое Astro Остров?
Заголовок раздела Что такое Astro Остров?Термин “Astro Island” относится к интерактивному UI компоненту на статической странице HTML. На странице может существовать несколько островов, и остров всегда отображается изолированно. Думайте о них как об островах в море статичного, неинтерактивного HTML.
Статичный контент с текстом, картинками и т.д.
Источник: Islands Architecture: Jason Miller
В Astro вы можете использовать любой поддерживаемый UI фреймворк (React, Svelte, Vue, и т.д.) для рендеринга островов в браузере. Вы можете использовать разные фреймворки на одной странице или просто выбрать один.
Техника, на которой основан этот архитектурный шаблон, известна как частичная или селективная гидрация. Astro под капотом использует эту технику для ваших островов.
Как работают Острова в Astro?
Заголовок раздела Как работают Острова в Astro?Astro генерирует веб-сайты без JavaScript, по умолчанию. Используйте UI компоненты, созданные с React, Preact, Svelte, Vue, SolidJS, AlpineJS, или Lit и Astro автоматически отрендерит его в HTML заранее, а затем удалит весь JavaScript. Сайты остаются быстрыми, так как удаляется весь неиспользуемый JavaScript со страниц.
---// Пример: использование статичного React компонента на странице, без JavaScript.import MyReactComponent from '../components/MyReactComponent.jsx';---<!-- 100% HTML, никакого JavaScript не загружено страницей! --><MyReactComponent />Но иногда для создания интерактивного UI требуется JavaScript на стороне клиента. Вместо того чтобы превращать всю вашу страницу в JavaScript-приложение, как SPA, Astro просит вас создать остров.
---// Пример: использование динамичного React компонента на странице.import MyReactComponent from '../components/MyReactComponent.jsx';---<!-- Этот компонент теперь интерактивный! Весь ваш остальной сайт остается статическим, без JS. --><MyReactComponent client:load />С Astro Островами подавляющая часть вашего сайта остается чистым, легким HTML и CSS. В приведенном выше примере вы только что добавили один изолированный остров интерактивности, не изменяя при этом остальную часть страницы.
В чем преимущества Островов?
Заголовок раздела В чем преимущества Островов?Наиболее очевидным преимуществом создания с помощью Astro Островов является производительность: большая часть вашего веб-сайта преобразуется в быстрый статический HTML, а JavaScript загружается только для отдельных компонентов, которые в этом нуждаются. JavaScript - один из самых медленных ресурсов, который вы можете загружать на байт, поэтому важен каждый байт.
Еще одним преимуществом является параллельная загрузка. В приведенном выше примере остров “image carousel” с низким приоритетом не должен блокировать остров “header” с высоким приоритетом. Они загружаются параллельно и гидрируются изолированно, что означает, что заголовок сразу становится интерактивным, не дожидаясь, пока более тяжелая карусель станет интерактивным.
Более того, вы можете точно указать Astro, как и когда отображать каждый компонент. Если загрузка этой карусели изображений действительно дорога, вы можете прикрепить специальную клиентскую директиву, которая сообщает Astro загружать карусель только тогда, когда она становится видимой на странице. Если пользователь не увидит его, оно никогда не загрузится.
В Astro вы, как разработчик, должны явно указать Astro, какие компоненты на странице также должны запускаться в браузере. Astro будет гидрировать только то, что необходимо на странице, и оставит остальную часть вашего сайта в виде статического HTML.
Острова - это секрет быстродействия Astro по умолчанию!
Learn