Claude и 12 JS-фреймворков: сколько стоит код агентов и какой бандл улетает в браузер

За последний год мир веб-разработки буквально захлестнула волна так называемого «вайбкодинга» (vibe coding). В профессиональных сообществах и социальных сетях сформировался устойчивый пласт мифов: дескать, одни JavaScript-фреймворки «идеально оптимизированы под понимание искусственным интеллектом», а другие «слишком сложны для языковых моделей».

Фронтендеры начали выбирать архитектурные стеки не на основе технических требований проекта, а по субъективным ощущениям: «мне кажется, Claude лучше понимает этот фреймворк».

Известный веб-инженер, специалист по производительности веб-платформы и автор блога Read the Tea Leaves Нолан Лоусон решил проверить эти утверждения строгим языком цифр. В своем масштабном исследовании, о котором также рассказал бюллетень JavaScript Weekly #809, он устроил беспристрастный краш-тест 12 популярным стекам веб-разработки.

В бенчмарке соревновались: Astro, Hono + htmx, SvelteKit, Qwik, Nuxt, SolidStart, React Router, TanStack Start, Next.js, Gracile, Angular и чистый Vanilla JS.

Методология эксперимента: 60 независимых сборок одного приложения

Чтобы исключить фактор случайности, Лоусон разработал строгий воспроизводимый эксперимент:

1. Единое техническое задание: автономному агенту Claude Code на базе модели Sonar/Sonnet ставилась задача с нуля создать веб-приложение каталога Pokémon на базе публичного PokéAPI: поиск, постраничная навигация (пагинация), отображение характеристик и детальный экран каждого покемона.
2. Пятикратный повтор: для каждого из 12 фреймворков агент запускался по 5 независимых раз с чистым кэшем, чтобы нивелировать стохастическую погрешность вывода нейросети.
3. Автоматический контроль спецификации: готовые решения прогонялись через строгий сквозной тест-сьют (проверялись семантика дерева доступности, доступность кнопок и точность данных). Агент не мог «схалтурить» или сдать неработающий прототип.

В процессе замеров фиксировались две главные оси: стоимость генерации для разработчика (в долларах за токены API) и итоговое качество продукта для конечного пользователя (вес клиентского бандла и оценки Core Web Vitals).

Стоимость токенов: миф об «идеальном фреймворке для ИИ» разрушен

Первое фундаментальное открытие исследования: разница в стоимости генерации между большинством современных фреймворков оказалась практически несущественной!

Аналитик Гаутам Параб (Gautam Parab) обратил внимание, что доверительные интервалы затрат на токены у подавляющего большинства участников пересекаются:

• Самым экономичным стеком стал дуэт Hono + htmx: медианная стоимость сборки составила $2.67 за запуск;
• Популярные тяжеловесы (Next.js, SvelteKit, Nuxt, SolidStart) расположились в тесном коридоре $3.20–$3.80;
• Самым дорогим и капризным оказался Angular: медиана достигла $4.97, причем в ряде первых попыток агент застревал в сложных соглашениях внедрения зависимостей (Dependency Injection) и тратил миллионы токенов на самостоятельный дебаг модулей.

Разница между самым дешевым и самым дорогим вариантом составила менее 1.8x. Это полностью разбивает маркетинговый миф о том, что выбор стека способен драматически снизить счет за API при агентной разработке.

Реальный шок: вес клиентского JavaScript в браузере пользователя

Но когда Лоусон измерил объем JavaScript, который каждый фреймворк отправляет в браузер живого человека, вскрылась настоящая катастрофа:

• Astro: 0 КБ клиентского JS (чистый серверный рендеринг без навязанной гидратации);
• Hono + htmx: всего 18 КБ;
• SvelteKit: 36 КБ;
• Qwik: 42 КБ;
• Next.js / React Router / TanStack Start: от 115 КБ до 142 КБ клиентского бандла для абсолютно идентичного функционала!

Почувствуй масштаб абсурда: чтобы отобразить простую таблицу с поиском, современный React-стек заставляет пользователя скачивать в восемь раз больше скриптов, чем связка с htmx, и греть процессор смартфона компиляцией сотен килобайтов рантайма. Показатели задержек первого взаимодействия (INP) и общего времени блокировки (TBT) на мобильных устройствах у тяжелых мета-фреймворков проигрывали решениям на Astro и htmx в разы.

Главный вопрос индустрии: зачем нам тяжелый стек в эпоху агентов?

Нолан Лоусон сформулировал жесткий, но предельно честный вывод:

«Исторически мы выбирали тяжелые мета-фреймворки вроде Next.js ради удобства разработчика: чтобы нам, людям, было комфортно писать компоненты в едином JSX-синтаксисе. Но если код за нас теперь пишет агент, какого черта мы продолжаем навязывать пользователям сотни килобайтов клиентского мусора?»

Конечному посетителю твоего сайта глубоко безразлично, насколько «красиво» нейросеть скомпоновала виртуальный DOM. Пользователь платит за мобильный трафик, страдает от дерганой отрисовки и ждет отклика на нажатие кнопки.

Бенчмарк Лоусона наглядно демонстрирует: серверно-центричные подходы (Astro, htmx, классический HTML) не просто не уступают в эпоху AI-агентов, а становятся безоговорочными лидерами. Они дешевле в генерации для создателя и неизмеримо быстрее и легче для живого человека по ту сторону экрана.