Современный быстрый SPA-сайт на WordPress через островковую архитектуру как в AstroJS

Паттерн Astro Islands — это когда страница почти полностью статическая, а JavaScript появляется только в нужных интерактивных «островках». В WordPress можно сделать очень похожее решение двумя способами: через Svelte (клиентские острова) или через HTMX (серверные гипермедиа-острова).

Вводные

Мне нравится AstroJS. Это такой современный JAM-stack фреймворк, который на мой взгляд интересней чем NextJS и NuxtJS, которые в свою очередь сегодня очень популярны.

Интересней он по 3м причинам:

• он реально открыт как OpenSource — в отличие от того же NextJS — в нем нет темных пятен и скрытых ловушек
• его легко освоить потому что можно писать на чем угодно: JSX, ReactJS, VueJS, SvelteJS …
• у него есть поддержка сообщества, включая модные нынче ShadCN, Tailwind CSS и TANStack

Что такое острова в Astro JS?

Astro популяризировал архитектуру под названием Islands Architecture https://docs.astro.build/en/concepts/islands/

Большая часть страницы рендерится как обычный статический HTML — без JavaScript. Это «море».

А интерактивные элементы (поиск, фильтры, карусели, формы, виджеты) становятся отдельными «островами». Каждый такой остров:

• Гидратируется независимо от остальных.
• Может использовать любой фреймворк (Svelte, React, Vue и т.д.).
• Загружает JavaScript только для себя.
• Может включаться сразу, при появлении в зоне видимости, в простое браузера или по действию пользователя.

В итоге сайт получается очень быстрым: почти нулевой JS по умолчанию, отличный Core Web Vitals и современная интерактивность только там, где она реально нужна.

---

Что если сделать аналогичные острова для сайта на WordPress?

В классическом WordPress нет встроенной Islands-архитектуры. Страница генерируется PHP, а JavaScript обычно подключается глобально.

Но цель Astro — минимальный JavaScript + точечная интерактивность — вполне достижима. Можно оставить привычную админку WordPress и при этом получить почти тот же эффект.

Разберём два рабочих подхода.

Вариант 1: WordPress + Svelte (Client Islands)

Самый близкий аналог классических островов Astro.

Основная страница — обычный PHP/HTML из темы. Интерактивные куски — отдельные скомпилированные Svelte-компоненты, которые монтируются только в свои контейнеры.

Как это выглядит на практике:

1. Собираешь Svelte-компоненты через Vite как отдельные entry points.
2. В WordPress выводишь пустые контейнеры (через шаблоны, блоки или шорткоды):
   
   <div id="island-search" data-props='{"placeholder":"Поиск..."}'></div>
3. Небольшой инициализатор находит эти контейнеры и монтирует нужные компоненты. Можно добавить ленивую загрузку через Intersection Observer или requestIdleCallback — получится почти полный аналог client:visible и client:idle.

Плюсы:

• Настоящая клиентская реактивность и сложная логика.
• Очень компактный JS (Svelte хорошо компилируется в минимальные JS пакеты).
• Несколько независимых островков на одной странице работают изолированно.

Минусы:

• Нужна сборка через Vite.
• Состояние живёт на клиенте — его нужно синхронизировать с сервером.

Вариант 2: WordPress + HTMX (Server / Hypermedia Islands)

Другой путь, но с похожим результатом для пользователя.

Страница почти полностью серверная. Интерактивные зоны помечаются атрибутами HTMX (hx-get, hx-post, hx-target, hx-swap и т.д.). При действии пользователя библиотека запрашивает у сервера готовый HTML-фрагмент и заменяет только нужную часть страницы.

Пример:

<input type="search"
       name="s"
       hx-get="/wp-htmx/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#search-results"
       hx-swap="innerHTML"
       placeholder="Поиск...">

<div id="search-results"></div>

Сервер (через REST, admin-ajax или плагин вроде HyperPress / Htmxpress) просто рендерит PHP-шаблон и отдаёт HTML.

Плюсы:

• Почти нулевой JavaScript (только сама библиотека HTMX).
• Вся логика остаётся на сервере — проще безопасность и работа с данными WordPress.
• Идеально для поиска, фильтров, пагинации, форм и лайв-обновлений.

Минусы:

• Сложная клиентская логика (drag-and-drop, богатые реактивные состояния) реализуется тяжелее.
• Каждый интерактивный кусок = запрос на сервер (нужен хороший кэш).

Сравнение

Критерий	Svelte Islands	HTMX Islands
Тип интерактивности	Клиентская (JS)	Серверная (HTML over the wire)
Размер JavaScript	Маленький	Минимальный
Сложность логики	Высокая (удобно)	Средняя / низкая
Близость к Astro	Очень высокая	Концептуально другая, эффект похож
Работа с данными WP	Через API / props	Напрямую в PHP
Лучше всего подходит для	Сложные виджеты и SPA-лайк куски	Фильтры, поиск, формы, списки

Выводы

Astro Islands — это не магия конкретного фреймворка, а архитектурный принцип: статика по умолчанию + точечная интерактивность.

В WordPress этот принцип можно реализовать двумя сильными способами:

• Svelte даёт настоящие клиентские острова с богатой интерактивностью и почти такой же моделью, как в Astro.
• HTMX даёт серверные «гипермедиа-острова» с минимальным JavaScript и максимальной безопасностью.

Оба подхода работают. Выбор зависит от задачи:

• Нужна сложная клиентская логика → Svelte.
• Хочется простоты, безопасности и почти нулевого JS → HTMX.
• Можно комбинировать: HTMX для большинства взаимодействий + несколько Svelte-островков для действительно сложных кусков.

Главный takeaway: не обязательно уходить в headless или полностью менять стек. Даже внутри классического WordPress можно получить лёгкий, быстрый и современный фронтенд, если мыслить островами, а не монолитным JavaScript.