В современном мире веб-разработки выбор между Single-Page Application (SPA) и Multi-Page Application (MPA) зачастую воспринимается как вынужденное компромиссное решение. SPA обеспечивают богатую интерактивность и плавность работы, но часто сопровождаются большими JavaScript-бандлами, сложной архитектурой и длительным временем загрузки. В свою очередь, традиционные серверные MPA быстро загружаются и проще в реализации, но могут проигрывать в части пользовательского опыта, создавая ощущение медлительности и ограниченной динамики. Однако, подобное противопоставление далеко не всегда оправдано. Сегодня возможно объединить лучшие стороны обоих подходов, используя novаторские технологии, такие как Eta, HTMX и Lit.
Такое сочетание формирует мощную fullstack архитектуру, позволяющую создавать быстрые, отзывчивые и при этом легковесные веб-приложения с минимальной нагрузкой на клиентскую часть. Основа этой стратегии — максимальное перенесение логики на сервер, что обеспечивает быструю первичную отрисовку страниц и снижение трафика за счёт снижения объёмов JavaScript, передаваемого браузеру. В качестве серверного шаблонизатора выбран Eta — простой и эффективный движок для рендеринга HTML с использованием JavaScript. Его легковесность и производительность идеально подходят для быстрого формирования полноценных HTML-страниц. Eta не нагружает проект излишними возможностями, фокусируясь на выполнении одной задачи — рендере шаблонов на сервере, что повышает скорость загрузки и улучшает опыт пользователей, особенно на мобильных устройствах и медленных сетях.
Однако одной отрисовки HTML на сервере недостаточно для повышения интерактивности. Современный пользователь ожидает мгновенного обновления контента без перезагрузки страницы, динамического фильтра и сортировки списков, плавного подтверждения действий и прочих удобств. Именно здесь в игру вступает HTMX — библиотека, позволяющая превратить любые HTML-элементы в интерактивные, добавляя им простые атрибуты для выполнения AJAX-запросов и обновления частей страницы. Благодаря HTMX можно получать с сервера маленькие HTML-сниппеты и заменять ими соответствующую часть DOM. Такой подход сохраняет серверно-центричную логику, избегая громоздких клиентских фреймворков и сложного написания JavaScript для каждого взаимодействия.
Это позволяет покрыть около 90% всех интерактивных операций в приложении без лишних усилий и с высокой производительностью. Тем не менее, бывают сценарии, где требуется сложная клиентская логика, управляемое состояние и динамическое поведение, с которым одними лишь HTML-атрибутами HTMX не справиться. Для таких участков архитектуры задействуется Lit — библиотека для создания веб-компонентов, обладающих внутренним состоянием и сложной логикой. Web Components, построенные с помощью Lit, выступают в роли «островков интерактивности» внутри общей серверной структуры. Примером служит компонент постраничной навигации (pagination), который строится с помощью Lit, получает начальные параметры с сервера через Eta и самостоятельно управляет отображением кнопок и переходом страниц на клиенте.
Интеграция Lit и HTMX построена тонко и элегантно. Компонент Lit обрабатывает локальные изменения UI и состояния, а для загрузки новых данных с сервера использует HTMX. Важно, что HTMX в кнопках постраничной навигации применяет атрибут hx-vals с префиксом js:, что позволяет динамически формировать тело POST-запроса на JavaScript, например, включая текущие фильтры и параметры поиска. Это сочетание даёт гибкость клиентской логики и мощь серверного рендеринга без излишних накладных расходов на фронтенд. Особое внимание уделено плавности переходов между состояниями страницы.
Здесь применяется View Transitions API браузеров, в сочетании с поддержкой HTMX. Включение глобального параметра htmx.config.globalViewTransitions активирует нативные анимации переходов между DOM-состояниями, создавая гладкий пользовательский опыт без сложных JS-анимаций. При необходимости анимации можно selectively отключать, прибегая к атрибутам вроде data-no-transition и CSS-классам, что позволяет избежать отвлекающих эффектов при небольших и быстрых обновлениях.
Таким образом весь стек работает гармонично: Eta формирует полные HTML-страницы на сервере, отрисовывая сразу и статические данные, и web-компоненты; Lit обеспечивает мощную, локальную клиентскую логику для сложных частей интерфейса с сохранением реактивности; HTMX связывает бизнес-логику сервера с динамическими элементами клиента, обслуживая асинхронные запросы и обновления частей страницы минимальным кодом. Выбор такой архитектуры даёт множество преимуществ. Во-первых, он снижает размер JavaScript-бандла, что сокращает время загрузки и увеличивает общую скорость. Примером служит сравнение размера js на главной странице — около 151KB против сотен килобайт и мегабайт у типичных React SPA и Next.js приложений.
Во-вторых, распределение ответственности между Eta, HTMX и Lit избавляет от излишней сложности, что облегчает сопровождение и масштабирование. В-третьих, подход обеспечивает высокую доступность и кроссбраузерность благодаря минимальному применению специализированного JS. Подобная fullstack архитектура подходит для проектов, где важна быстрая загрузка, качественный пользовательский опыт и умеренная интерактивность без необходимости разворачивать полностью SPA с множеством клиентских состояний. Это может быть корпоративный сайт с динамическими списками, административные панели с фильтрацией, новостные или рекламные площадки, а также различные сервисы с контентом, регулярно обновляющимся и фильтруемым. В итоге Eta, HTMX и Lit представляют собой три технологических столпа, которые в сочетании позволяют избежать классической дилеммы выбора между SPA и MPA.
Вместо жертвы удобства ради производительности или наоборот, разработчик получает гибкий и масштабируемый инструмент, позволяющий создавать современные веб-приложения с отличным сочетанием скорости, отзывчивости и поддержки клиентской логики. Такой подход стоит рассмотреть тем, кто стремится к простоте, превосходной производительности и продуманному UX без излишней сложности и тяжелых клиентских фреймворков.
