Это часть 3 нашей серии о «Будущем Astro», охватывающей три крупные функции, запланированные для Astro в 2024 году. Этот пост представляет Server Islands: новый примитив островной архитектуры, позволяющий отдавать статические CDN-кэшируемые HTML-оболочки страниц с внедрённым динамическим контентом.
В 2021 году Astro впервые предложил новую frontend-архитектуру — Islands. Острова уникальны тем, что позволяют Astro автоматически убирать весь неиспользуемый JavaScript со страницы, обеспечивая более высокую производительность без отказа от любимых UI-компонентов на этапе разработки (React, Svelte, Vue и т.д.).
Но производительность frontend — не единственная проблема в вебе. Как вы доставляете сайт пользователю может быть важнее, чем что вы доставляете, и разработчикам часто приходится делать сложный выбор: производительность или персонализация?
Производительность: Отдавать страницы как статический HTML и агрессивно кэшировать. Вы не сможете персонализировать страницы для пользователя, но преимущества производительности, экономия и простота статических CDN-деплоев не сравнятся ни с чем.
Персонализация: Отдавать страницы как динамический HTML, рендеримый по требованию. Запрос идёт через дата-центр, возможно, на другом конце света — это замедляет работу и повышает риск провала Core Web Vitals Google. Однако уровень контроля и персонализации с динамическими ответами сложно отвергнуть.
Производительность и персонализация не должны быть взаимоисключающими. Мы верим, что островная архитектура даёт ответ и на эту проблему, и сейчас работаем над новой функцией, которая объединит лучшее из обоих миров: Server Islands.
Server Islands
Server Islands — новый примитив, который мы исследуем для Astro, строящийся на существующей островной frontend-архитектуре. Вы определяете server island так же, как client island, но вместо директивы client:* используете новую директиву server:defer:
<UserButton server:defer />Это говорит Astro пропустить рендер этого компонента в начальном ответе и «отложить» его рендер на потом. Это позволяет кэшировать статическую страницу за CDN с начальным placeholder-контентом. Когда динамический HTML загружен, он заменяет server island на странице результатом отложенного рендера.
Вы можете увидеть это в прототипе ниже. Статическая страница загружается мгновенно с большей частью контента (21 мс в этом примере на Vercel). HTML отложенного динамического компонента рендерится отдельно, и Astro собирает всё обратно, когда отложенный рендер завершён.
Концептуально это похоже на Suspense в React, Solid и т.д., но с ключевым отличием: отложенный остров рендерится как отдельный HTTP-запрос. Мы намеренно избегали стриминга статического контента и островов в одном ответе, чтобы упростить жизнь вашему CDN.
Перенеся весь динамический HTML в отложенные server islands, вы получаете лучшее из обоих миров:
- Производительность: Мгновенная статическая HTML-оболочка страницы, кэшируемая в глобальном CDN.
- Персонализация: Динамический контент, внедряемый где угодно на странице.
Server islands не подойдут для каждого use case. Некоторым страницам может понадобиться столько динамического контента, что имеет смысл рендерить всю страницу на сервере. Другие сайты могут по-прежнему получать динамический контент как JSON из API endpoints.
Однако мы считаем, что server islands имеют смысл для подавляющего большинства персонализированного контента на контентных сайтах. Сайты, которые мы видим на Astro, часто смешивают динамический и статический контент на странице. Для тех, кто сейчас не может использовать CDN-кэширование, server islands, вероятно, дадут большой выигрыш в производительности.
Следующие шаги
Мы на фазе проектирования этой функции и обдумываем компромиссы разных реализаций, но прототипирование уже идёт.
Следите за экспериментальной поддержкой Server Islands в Astro в ближайшее время. Мы часто запускаем новые функции за экспериментальными флагами до стабилизации — это даёт пользователям время попробовать новые API и дать обратную связь. Если хотите участвовать раньше, загляните в RFC и присоединяйтесь к обсуждениям.