Nevermind

Знакомство с Astro: создан для сайтов, ориентированных на контент

2 мин

1. Действительно ли нам нужно столько JavaScript?

Современные фронтенд-фреймворки, такие как React, Vue и Svelte, значительно улучшили процесс разработки сложных веб-приложений. Но когда мы используем их для создания блогов, портфолио, документации или маркетинговых сайтов, возникает вопрос: действительно ли сайтам, предназначенным прежде всего для представления контента, нужно загружать всю страницу как одностраничное приложение (SPA)?

Обычно ответ — «нет». Для таких сайтов главная потребность пользователя заключается в быстром доступе к контенту. Избыток JavaScript, напротив, замедляет время до интерактивности (TTI), ухудшая пользовательский опыт и SEO.

Astro появился именно для решения этой проблемы.

2. Основная идея Astro: сначала контент, по умолчанию без JS

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

Для этого Astro предложил два ключевых нововведения:

  • По умолчанию без JavaScript (Zero-JS by Default): Astro во время сборки преобразует все ваши UI-компоненты, независимо от того, написаны они на React, Vue или Svelte, в чистый HTML. Поэтому браузер получает статическую страницу и не должен загружать JS-среду какого-либо фреймворка, что обеспечивает очень быструю загрузку.
  • Островная архитектура (Islands Architecture): В этом заключается суть Astro. В «океане» статического HTML любой компонент, которому нужно взаимодействие на стороне клиента, можно отметить как «остров». Astro отдельно упаковывает и загружает JavaScript, необходимый этим островам, а остальная часть страницы остается полностью статической.

3. Как работают «острова»?

В Astro компонент можно отметить как интерактивный остров, добавив директиву client:*.

Например, предположим, что у нас есть написанный на React компонент счетчика Counter.jsx. На странице Astro его можно использовать так:

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---
<html>
  <body>
    <h1>Astro 示例</h1>
    <p>这是一个静态的段落，它不会加载任何 JS。</p>

    {/* 这个组件是一个交互式岛屿 */}
    <Counter client:load />

    <p>这是另一个静态段落。</p>
  </body>
</html>

Директива client:load сообщает Astro:

  1. Отобразить начальный HTML компонента Counter на сервере.
  2. Создать отдельный JS-пакет для компонента Counter.
  3. Автоматически загрузить этот JS-пакет при загрузке страницы и «активировать» (hydrate) компонент, сделав его интерактивным.

Astro также предлагает более точные директивы загрузки, например client:idle (загрузка во время простоя браузера) и client:visible (загрузка, когда компонент появляется в области просмотра), позволяя еще лучше оптимизировать производительность.

4. Независимость от фреймворка

Еще одно важное достоинство Astro — его открытость к UI-фреймворкам. В одном проекте Astro можно одновременно использовать компоненты из разных фреймворков, таких как React, Vue, Svelte, SolidJS и Lit. Это дает командам огромную гибкость в совместной работе и выборе технологий.

Заключение

Astro не стремится заменить React или Vue, а предлагает более подходящее решение для определенных сценариев. Если ваш проект — сайт, сосредоточенный на контенте и предъявляющий очень высокие требования к производительности и SEO (например, сам этот блог построен на Astro), то Astro, несомненно, является отличным выбором, который стоит изучить глубже. Он прекрасно сочетает преимущества производительности статических сайтов с удобством разработки на современных фреймворках.

Astro Jamstack Производительность SSG