ASTRO
#astro#ssg#static#html#no-js

Astro: минимальная статическая страница без клиентского JS

Страница Astro по умолчанию рендерится в HTML при сборке. Без островков и client: директив клиентский JavaScript не отправляется.

Как использовать

  1. Создай .astro файл в src/pages/ (например about.astro). Пиши разметку или используй Layout; не добавляй компоненты с client:load/visible.
  2. При output: static (по умолчанию) страница соберётся в статический HTML при astro build. Клиентский JS не подключается.
  3. Для интерактива подключай островки с client: директивой только там, где нужно.

В Astro по умолчанию компоненты рендерятся в HTML на этапе сборки. Если не импортировать островки (React, Vue и т.д.) и не использовать директивы client:load / client:visible, в браузер не отправляется клиентский JavaScript — страница остаётся чисто статической. Проблема: ожидание интерактива там, где нет островков — кнопки не реагируют. И наоборот: для страниц «О нас», контактов, текстовых лендингов лишний JS не нужен. Симптомы: «ничего не кликается» на странице без островков или раздутый JS там, где достаточно HTML. Ниже — минимальная статическая страница и вариант с Layout по документации Astro; проверка и когда добавлять островки.

Решение

По умолчанию Astro рендерит компоненты в HTML при сборке. Без островков и client-директив клиентский JS не отправляется. Документация: Astro component syntax, Static SSG.

Минимальная страница без Layout:

---
// src/pages/about.astro
---
<html lang="ru">
  <head>
    <title>О проекте</title>
  </head>
  <body>
    <h1>О проекте</h1>
    <p>Контент отрендерится в HTML при сборке. Никакого клиентского JS.</p>
  </body>
</html>

С Layout (рекомендуется):

---
// src/pages/about.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="О проекте">
  <h1>О проекте</h1>
  <p>Весь текст — статический HTML. Скрипты только из Layout, если там нет островков.</p>
</BaseLayout>

Используйте такие страницы для лендингов, «О нас», контактов, страниц с только текстом и ссылками. При output: "static" (по умолчанию) они превращаются в статические HTML при astro build. Клиентский JS добавляется только компонентам с директивами client:*. См. Статический вывод по умолчанию.

Проверка

  1. Сборка — выполните pnpm build, откройте сгенерированный HTML в dist/pages/about.html (или ваш путь). В нём не должно быть тегов script с бандлами островков для этой страницы (если не подключали островки). Контент страницы должен быть в HTML.

  2. Сеть в браузере — откройте страницу через pnpm preview или раздачу dist. Во вкладке Network отфильтруйте по JS: для чисто статической страницы без островков не должно быть запросов к чанкам островков этой страницы.

  3. Интерактив — на такой странице кнопки и формы без островков не работают (нет обработчиков). Если нужна кнопка или форма — добавьте островок с client:load или client:visible или используйте Actions на странице с prerender: false.

Типичные ошибки

  • Ожидание интерактива без островка — без компонента с client:load/visible клиентский JS не подключается. Добавьте островок и директиву только на нужные блоки.
  • Layout с островками — если BaseLayout или другой общий layout подключает компоненты с client:*, они появятся на всех страницах, использующих этот layout. Для «минимального HTML» используйте layout без островков или отдельный layout для статических страниц.
  • output: server/hybrid — поведение то же: страница без островков рендерится в HTML (на сервере при запросе или при build в hybrid). Отличие в том, что можно добавить prerender: false для динамических маршрутов.

Где применять

  • Лендинги, «О нас», контакты, политика: только текст и ссылки, максимальная скорость и SEO без интерактива.
  • Совместно с островами: основная разметка статическая, интерактивные блоки подключаются точечно через client:load/visible. См. Content Collections для списков постов.

Связанные сниппеты: Статический вывод по умолчанию, Островок React с client:load, Content Collections: фильтр и сортировка.

Похожие сниппеты