В коммерческих предложениях веб-студий всё чаще встречаются слова Vue, React, Nuxt и Next. Заказчику сложно понять, что за ними стоит: улучшение сайта, способ увеличить смету или просто привычка разработчиков. Мы используем фреймворки в части проектов и сознательно отказываемся от них в других. В этой статье — без жаргона о том, что такое фронтенд-фреймворк, какие они бывают, что дают бизнесу и в каких случаях без них сайт будет лучше.
Что такое фронтенд и зачем ему фреймворк
Фронтенд — это всё, что работает в браузере посетителя: вёрстка, стили, анимации, реакция на клики, отправка форм без перезагрузки страницы, фильтрация каталога, пересчёт корзины. Бэкенд — серверная часть, которая хранит данные, обрабатывает заказы и отвечает на запросы. На классическом сайте фронтенд скромный: HTML-страницы формирует сервер, а JavaScript добавляет немного интерактивности — слайдер, маску телефона, всплывающее окно.
Когда интерактивности становится много, писать её «вручную» на чистом JavaScript неудобно. Код разрастается, элементы интерфейса начинают зависеть друг от друга, и любое изменение превращается в поиск того, что сломается в другом месте. Фреймворк решает эту проблему: он даёт структуру, в которой интерфейс собирается из независимых компонентов, а изменения данных автоматически отражаются на экране. Кнопка «В корзину», мини-корзина в шапке и счётчик товаров обновляются синхронно, без ручной связки каждого элемента.
Проще говоря, фреймворк — это каркас для сложных интерфейсов. Для страницы «О компании» он не нужен, для конфигуратора кухни с десятками опций и мгновенным пересчётом цены — практически обязателен.
Основные фреймворки и их особенности
Vue
Прогрессивный фреймворк с мягким порогом входа. Его можно подключить к отдельному блоку классического сайта или построить на нём всё приложение. Популярен в российских студиях, хорошо сочетается с Битриксом и Laravel.
Nuxt
Надстройка над Vue для полноценных сайтов: серверный рендеринг, генерация статических страниц, маршрутизация, SEO-настройки. Используется, когда весь сайт строится на Vue и должен хорошо индексироваться.
React
Библиотека для построения интерфейсов с самой большой экосистемой и сообществом. Стандарт для сложных веб-приложений, личных кабинетов и сервисов, а также основа мобильной разработки на React Native.
Next
Фреймворк над React с серверным рендерингом, статической генерацией и оптимизацией изображений. Популярен для крупных магазинов, медиа и headless-проектов.
Есть и другие решения — Angular для крупных корпоративных систем, Svelte и Astro, которые делают ставку на минимальный объём JavaScript в браузере. Но в разработке сайтов для малого и среднего бизнеса в России чаще всего встречаются именно Vue/Nuxt и React/Next, поэтому сосредоточимся на них.
Принципиальной разницы в возможностях между Vue и React для типичного сайта нет: всё, что можно сделать на одном, можно сделать и на другом. Выбор обычно определяется компетенциями команды, требованиями к интеграции с существующей системой и тем, кто будет поддерживать проект в будущем.
Три способа использовать фреймворк на сайте
Точечные компоненты внутри классического сайта
Сайт работает на CMS, страницы формирует сервер, а отдельные сложные блоки — калькулятор, фильтр каталога, форма многошагового заказа — сделаны на Vue или React. Это самый распространённый и, как правило, самый рациональный вариант для бизнеса. Редакторы работают в привычной админке, SEO обеспечивается средствами CMS, а интерактив там, где он нужен, получается современным и быстрым.
Одностраничное приложение
Весь интерфейс загружается один раз, а дальше переходы между разделами происходят без перезагрузки страницы, данные подгружаются через API. Так устроены личные кабинеты, панели управления, внутренние сервисы. Для публичного сайта в чистом виде такой подход плох: поисковым системам сложнее индексировать содержимое, а первая загрузка тяжелее.
Серверный рендеринг и статическая генерация
Nuxt и Next формируют HTML на сервере или заранее, при сборке, а в браузере страница «оживает» и работает как приложение. Посетитель и поисковый робот сразу получают готовый контент, а дальнейшая навигация происходит быстро. Это подход для полноценных сайтов на фреймворке, в том числе headless-витрин над CMS или платформой магазина.
Что фреймворк даёт бизнесу
Первое — удобство для пользователя в сложных сценариях. Фильтр каталога, который обновляет результаты мгновенно, без перезагрузки и прокрутки наверх, корзина, в которой можно поменять количество и сразу увидеть итог со скидкой, калькулятор стоимости с подсказками — всё это заметно повышает конверсию. В одном из наших проектов, магазине напольных покрытий, переделка калькулятора площади и раскладки на Vue увеличила долю посетителей, дошедших до корзины из карточки товара, примерно на 18%.
Второе — скорость развития интерфейса. Компонентный подход позволяет переиспользовать элементы: однажды сделанная карточка товара, кнопка или модальное окно применяются по всему сайту и меняются в одном месте. Новые разделы собираются быстрее, а вероятность «сломать что-то рядом» ниже.
Третье — возможность построить на одном стеке и сайт, и личный кабинет, и мобильное приложение. Это важно для компаний, которые развивают цифровые сервисы, а не только сайт-витрину.
Фреймворк не делает сайт автоматически быстрым. Неправильно настроенное приложение на React может загружать мегабайты JavaScript и открываться на смартфоне медленнее, чем обычный сайт на CMS. Скорость — результат архитектуры и дисциплины разработчиков, а не выбора технологии.
Когда фреймворк не нужен
Многие сайты прекрасно обходятся без фреймворков. Корпоративный сайт с услугами, кейсами и новостями, лендинг, визитка, блог — их интерактивность ограничивается формами, меню и слайдерами. Для таких задач достаточно аккуратной вёрстки и небольшого количества JavaScript. Добавление фреймворка увеличит стоимость разработки, усложнит поддержку и не даст заметной пользы посетителю.
Ещё один аргумент против — кадровый. Сайт на классической CMS с минимумом JavaScript сможет поддерживать практически любой веб-разработчик. Проект на Nuxt или Next требует специалиста, который знает конкретный фреймворк, его версию и экосистему. Фреймворки развиваются быстро, и проект, сделанный на устаревшей мажорной версии, через несколько лет может потребовать серьёзного обновления.
| Задача | Нужен ли фреймворк | Почему |
|---|---|---|
| Сайт-визитка, лендинг | Нет | Интерактивность минимальна, важнее скорость и простота |
| Корпоративный сайт | Обычно нет | Достаточно CMS и лёгкого JavaScript |
| Магазин с интерактивными фильтрами и калькуляторами | Точечно | Компоненты на Vue или React внутри CMS |
| Личный кабинет клиента | Да | Много состояний, данных и сценариев |
| Конфигуратор продукта | Да | Сложная логика и мгновенная реакция интерфейса |
| Headless-витрина, мультиканальный проект | Да, Nuxt или Next | Серверный рендеринг и работа с API |
SEO и производительность сайтов на фреймворках
Самая частая проблема, с которой к нам приходят владельцы сайтов на фреймворках, — плохая индексация. Сайт сделан как одностраничное приложение, и поисковый робот при первом обращении видит пустой контейнер вместо контента. Современные поисковые системы умеют выполнять JavaScript, но делают это с задержкой и не всегда полностью. Для публичных страниц надёжнее отдавать готовый HTML — через серверный рендеринг или статическую генерацию.
Вторая проблема — вес. Каждая библиотека, подключённая «для удобства», увеличивает объём кода, который браузер должен загрузить, разобрать и выполнить. На мощном компьютере это незаметно, на бюджетном смартфоне — секунды задержки до того, как кнопки начнут реагировать на нажатия. Поэтому мы контролируем размер сборки, разбиваем код на части, которые загружаются по мере необходимости, и регулярно замеряем показатели на реальных устройствах.
- Публичные страницы отдаются готовым HTML через серверный рендеринг или генерацию
- Для каждой страницы формируются title, description, канонический адрес и микроразметка
- Код разбит на части и подгружается по требованию
- Изображения оптимизируются и загружаются лениво
- Размер JavaScript контролируется при каждой сборке
- Показатели скорости проверяются на среднем смартфоне и мобильном интернете
Как выбрать технологию для своего проекта
Заказчику не обязательно разбираться в различиях между Vue и React. Гораздо полезнее правильно описать задачи: какие сценарии должны быть на сайте, насколько сложные взаимодействия, есть ли личный кабинет, нужны ли мобильные приложения, кто будет поддерживать проект через год. По этим ответам технология выбирается почти однозначно. Если подрядчик предлагает фреймворк, попросите объяснить, какую конкретную задачу он решает и сколько стоил бы проект без него.
Мы в большинстве случаев используем Vue или Nuxt для проектов на Битриксе и Laravel и React или Next — для headless-витрин и сервисов, где важна большая экосистема. Подробнее о связке системы управления и отдельной витрины мы рассказывали в статье о headless CMS, а о сайтах вообще без серверной логики — в материале о статических сайтах.
Главное
Фронтенд-фреймворки — Vue, Nuxt, React, Next — нужны для сложных интерактивных интерфейсов: конфигураторов, личных кабинетов, динамичных каталогов, headless-витрин. В этих задачах они ускоряют разработку и делают сайт удобнее для пользователя.
Для простых сайтов фреймворк — лишняя сложность и расходы. Оптимальная стратегия для большинства компаний — классическая CMS с точечными компонентами на фреймворке там, где это действительно повышает конверсию. Решение стоит принимать от задач бизнеса, а не от названия технологии в смете. Если вы планируете проект и сомневаетесь в выборе стека, опишите сценарии на сайте — и мы подскажем, что подойдёт, на консультации по контактам студии.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
