Skip to content
Русский
Назад в каталог

astro.build

200 OK

Как Astro преобразует контент в HTML и выборочно добавляет интерактивность

Developer ToolsTailwind CSS

Обнаруженные технологии

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

Tailwind CSS

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

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

Сначала HTML, взаимодействие — в виде исключения

Astro — серверно-ориентированный фреймворк для сайтов, ориентированных на контент. Он рендерит содержимое страницы в HTML и по умолчанию не отправляет клиентский JavaScript; разработчики явно добавляют браузерный код в компоненты, которым требуется взаимодействие.

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

Область страницы Начальная доставка Поведение в браузере
Статический контент Astro HTML с серверным рендерингом По умолчанию без среды выполнения компонентов
Гидратированный остров HTML и код выбранного компонента Активируется независимо
Несколько островов HTML и код, выбранный для каждого острова Каждый остров может использовать собственный приоритет загрузки

Время гидратации задается явно. client:load отдает приоритет элементу управления, необходимому немедленно, client:idle откладывает работу до простоя браузера, а client:visible ожидает, пока компонент приблизится к области просмотра.

Интеграции и структурированный контент

Astro может использовать React, Preact, Svelte, Vue, Solid, HTMX, веб-компоненты и другие UI-подходы для интерактивных областей. Это позволяет выборочно переиспользовать знакомые системы компонентов, не превращая весь документ в единое приложение с клиентским рендерингом.

К полезным направлениям экосистемы, указанным в поддерживаемом репозитории, относятся:

  • UI-интеграции для React, Preact, Solid, Svelte и Vue.
  • Поддержка среды выполнения Node и адаптеры развертывания.
  • Инструменты публикации, такие как интеграции MDX, RSS и карты сайта.
  • Интеграция для работы со скриптами через Partytown.

Коллекции контента организуют и проверяют Markdown и связанные записи с типобезопасностью TypeScript. На практике команда может определить единообразную структуру статей или документации, выявлять недопустимые поля контента и выполнять запросы к целостной коллекции, а не рассматривать каждый файл как несвязанный с другими.

Свидетельства и результаты реализации

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

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

Continue exploring

More published records in Developer Tools.

View all alternatives

Gatsby связывает сайты на React со структурированным контентом и гибким рендерингом

Developer ToolsGoogle Analytics

Next.js добавляет в React маршрутизацию, рендеринг и серверные возможности

Developer ToolsGoogle AnalyticsNext.js

nuxt.com

200 OK

Создавайте сайты и приложения на Vue с маршрутизацией, серверной логикой и гибким рендерингом

Developer ToolsNuxtVercel