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

ВВЕДЕНИЕ

Первая версия Astro была выпущена 8 июня 2022 года и была революционной. Astro 2.0 был представлен 24 января 2023 года и показал удивительное улучшение.

Как утверждается на веб-сайте Astro, Astro — это универсальная веб-инфраструктура для создания быстрых веб-сайтов, ориентированных на контент.

Это быстро, потому что JavaScript не отправляется клиенту для статических сайтов, а JavaScript отправляется только тогда, когда это необходимо. Использование легковесного HTML вместо JavaScript обеспечивает более быструю загрузку страницы и более быстрое вовлечение пользователя (более короткий TTI). Чтобы обеспечить оптимальную производительность, компания Astro разработала новую интерфейсную веб-архитектуру под названием Astro Islands. Как говорится в официальном документе:

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

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

Подход Astro к многостраничным приложениям (MPA) использует создание статических сайтов и рендеринг на стороне сервера. Он похож на традиционные серверные фреймворки, такие как PHP и WordPress. Но для создания веб-сайта вам просто нужны HTML, CSS и JavaScript.

Astro — независимый от UI-технологий агностик. Это означает, что вы можете использовать предпочтительную среду JavaScript, например React, Preact, Solid, Svelte, Vue и Lit, и даже использовать их сочетание на одной странице. Здесь вы можете найти список официальных фреймворков, которые вы можете интегрировать в свой проект Astro.

АРХИТЕКТУРА ОСТРОВОВ

Идея островной архитектуры была впервые предложена фронтенд-архитектором Etsy Кэти Силор-Миллер в 2019 году и расширена в этом посте создателем Preact Джейсоном Миллером. В этой архитектуре статический неинтерактивный HTML представляет собой море, а компоненты — изолированные острова в этом море. Интерактивные острова можно создавать с использованием любых поддерживаемых фреймворков (React, Preact, Vue и т. д.). Вы можете добавить интерактивность на изолированный остров с частичной или выборочной гидратацией, в то время как подавляющая часть вашего сайта останется чистым, облегченным HTML и CSS.

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

СОСТАВ

Каталоги в проекте Astro должны быть следующими:

  • src/*: исходный код проекта (компоненты, страницы, стили и т. д.)
  • public/*: файлы и активы, которые не нужно обрабатывать во время сборки (шрифты, значки и т. д.)
  • package.json: файл JSON для менеджера пакетов для управления зависимостями.
  • astro.config.mjs: файл конфигурации Astro. (рекомендуемые)
  • tsconfig.json: файл конфигурации TypeScript. (рекомендуемые)

все компоненты Astro имеют расширение .astro. Каждый компонент Astro состоит из 4 частей: сценария компонента, шаблона компонента, сценария на стороне клиента и стиля CSS.

Скрипт компонента пишется между заборами (—-) и аналогичен формату фронтматера. В этой части вы можете импортировать другие файлы, получать API и создавать переменные, доступные в шаблоне.

Часть шаблона представляет собой расширенный набор HTML и похожа на JSX. Вы можете вводить динамические переменные, атрибуты и пользовательские теги (компоненты Astro или другие фреймворки, такие как Vue, React и т. д.) в структуру шаблона.

Все стили в теге ‹style› применяются только к содержимому, написанному непосредственно в шаблоне компонента, если оно не имеет глобального атрибута.

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

---
import Container from '../components/container/Container';
import PhotoList from '../components/photoList/PhotoList.vue';
import Layout from '../layouts/Layout.astro';
import texts from '../texts/texts';

const description="this description can be accessed in the template part"
const response = await fetch(
    "https://jsonplaceholder.typicode.com/photos?albumId=5&_start=0&_limit=20"
  );
const fetchedPhotos = await response.json();
---
<!-- END of component script -->


<Layout title={texts.TITLE}>
    
    <h1 class="header" id="header">{description}</h1>
    <Container >
        {fetchedPhotos.length>0 && <PhotoList client:load/>}
    </Container>
</Layout>
<!-- END of component template -->


<style>
 .header{
        font-size: 16px;
    }
</style>
<!-- END of css style -->


<script>
    const header=document.getElementById("header");
    header.addEventListener("click",()=>console.log("header is clicked"))
</script>
<!-- END of client-side script -->

НОВЫЕ ВОЗМОЖНОСТИ

Astro 2.0 принесла огромные улучшения по сравнению с первой версией.

  • Гибридный рендеринг
  • Расширенная коллекция контента
  • Расширенные ошибки
  • Улучшенный сервер разработки
  • Обновление сборки двигателя

Гибридный рендеринг

Я считаю, что гибридный рендеринг — самая важная функция, добавленная в Astro 2.0. До сих пор вам приходилось выбирать между созданием статического сайта и рендерингом на стороне сервера для всего вашего приложения. При выборе SSG вы теряете полную гибкость при рендеринге на сервере, тогда как при выборе SSR вы теряете производительность на статических страницах. Однако гибридный рендеринг дает вам лучшее из обоих миров. Astro классифицирует ваши страницы с помощью статического анализа без выполнения их исходного кода. Пользователь, добавив

export const prerender=true

может легко сказать Astro выполнить предварительную визуализацию страницы.

Расширенная коллекция контента

Как упоминалось ранее, Astro — это фреймворк, ориентированный на контент. В версии 2.0 команда Astro работала над улучшением работы с содержимым Markdown. Сохранение согласованности локального контента при росте веб-сайта может быть сложной задачей с помощью Markdown/MDX. Astro теперь резервирует папку содержимого в каталоге src для содержимого уценки и добавляет к ним безопасность типов. Astro гарантирует, что каждый файл имеет правильный заголовок, поскольку типы TypeScript генерируются автоматически.

Расширенные ошибки

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

Улучшенный сервер разработки

Astro 2.0 обеспечивает лучший опыт разработчиков за счет повышения производительности сервера разработки, особенно в отношении горячей перезагрузки модулей (HMR).

Обновить модуль сборки

Теперь Astro 2.0 использует последнюю версию Vite в качестве внутреннего механизма сборки.

ЗАКЛЮЧЕНИЕ

  • Astro — это сверхбыстрый JS-фреймворк с островной архитектурой.
  • Astro лучше всего подходит для случаев использования веб-сайтов, ориентированных на контент.
  • Astro 2.0 улучшает сбор контента, добавляя проверку типов в файлы Markdown/MDX в src/content.
  • Для веб-сайтов с большим количеством взаимодействий SPA лучше, чем Astros.
  • Astro прост в использовании, вы можете использовать любые любимые языки компонентов пользовательского интерфейса, которые вы уже знаете.
  • Astro 2.0 обеспечивает лучший опыт разработчиков по сравнению с Astro 1.0.
  • В Astro 2.0 вы можете использовать как SSG, так и SSR в своем проекте Astro.