Vue.js каталог для 1С-Битрикс: гибридный рендеринг

Мы часто встречаем проекты, где стандартный компонент bitrix:catalog.section перестаёт справляться с нагрузкой: динамическая фильтрация по 20+ параметрам, бесконечная прокрутка, мгновенное переключение между сеткой и списком. Серверный рендеринг каждого запроса приводит к тормозам 3–6 секунд. Типичный сценарий: интернет-магазин с 50 000 товаров, где каждый клик по фильтру вызывает перезагрузку страницы. Пользователь ждёт 5 секунд — и уходит. Мы переписали фронтенд на Vue.js: фильтрация стала мгновенной, сервер разгружен на 40%, а SEO не пострадало — первый экран рендерится на стороне Битрикс. Vue-каталог решает эти проблемы за счёт клиентской реактивности при сохранении серверного рендеринга для SEO — гибридный подход, который даёт скорость SPA и индексацию статического HTML. Свяжитесь с нами, чтобы получить оценку вашего проекта.

Какие проблемы решает Vue-каталог в Битриксе?

• Медленная фильтрация: каждый AJAX-запрос на сервер перерисовывает весь раздел. Vue.js обрабатывает фильтрацию на клиенте, отправляя только данные через API. Debounce 300 мс и optimistic UI скелетоны делают отклик мгновенным.
• SEO-риски SPA: полностью клиентский рендеринг хуже индексируется. Гибридный подход отдаёт первый экран сервером (HTML с товарами), а Vue.js гидратируется после — поисковики видят контент, пользователи — скорость.
• Высокая нагрузка на сервер: при частых запросах (пагинация, сортировка) сервер пересобирает компоненты. Vue-каталог разгружает сервер: после первой загрузки вся логика на клиенте, API только отдаёт JSON. Снижение нагрузки на БД достигает 50%.

Как мы внедряем Vue.js в каталог Битрикс: практический кейс

Стек: PHP 8.1, Битрикс (D7 ORM, инфоблоки v2.0), Vue 3 + Pinia, MySQL 8.0. Для интеграции пишем кастомный контроллер API на Bitrix\Main\Engine\Controller, который возвращает товары, фасеты и пагинацию через единый endpoint. Пример контроллера:

// local/components/vendor/catalog.api/ajax.php
use Bitrix\Main\Engine\Controller;
use Bitrix\Iblock\Elements\ElementProductTable;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter = [], int $page = 1, int $pageSize = 24): array
    {
        $offset = ($page - 1) * $pageSize;
        // Получение через D7 ORM ElementProductTable
        // Возврат JSON: items, pagination, facets
    }
}

Endpoint: /bitrix/services/main/ajax.php?action=catalog.getProducts. На фронте Vue-компоненты:

• CatalogApp.vue — корневой компонент, управляет состоянием через Pinia store.
• ProductGrid.vue / ProductList.vue — режимы отображения с переключением без перезагрузки.
• ProductCard.vue — карточка с быстрым просмотром в модалке.
• Pagination.vue / InfiniteScroll.vue — навигация.
• SortBar.vue — сортировка по цене, популярности, новизне.
• FilterPanel.vue — фасетный фильтр с множественным выбором и диапазонами.

Подробнее о фреймворке читайте в документации Vue.js.

Почему гибридный рендеринг критичен для SEO?

Поисковые системы (Яндекс, Google) должны видеть полный HTML товаров при первом запросе. Vue.js без серверного рендеринга выдаёт пустой #app, что приводит к потере трафика. Мы используем серверный рендеринг первого экрана: в шаблоне компонента Битрикс выводим товары обычным циклом, а затем передаём их Vue через data-attribute:

// В шаблоне компонента
$initialProducts = json_encode($arResult['ITEMS']);
echo '<div id="catalog-app"
    data-initial-products="' . htmlspecialchars($initialProducts) . '"
    data-iblock-id="' . $arResult['IBLOCK_ID'] . '"
></div>';

Vue читает data-initial-products при монтировании и рендерит сетку без AJAX. Все последующие запросы — только API. Такой подход даёт скорость Vue и индексацию статического HTML. На практике это увеличило видимость каталога на 70% для одного из клиентов (строительный магазин). Официальная документация Битрикс D7 ORM подтверждает эффективность такого подхода.

Сколько времени занимает разработка Vue-каталога?

Стоимость рассчитывается индивидуально под ваш проект. Свяжитесь с нами для предварительной оценки — мы предложим оптимальное решение.

Работа с ценами и остатками в реальном времени

Цены в Битрикс хранятся в b_catalog_price по типам цен. Остатки — в b_catalog_store_product. Для актуального наличия на момент просмотра добавляем быстрый endpoint, который не блокирует начальную загрузку:

// Запрос наличия для массива товаров
async function getAvailability(productIds) {
    return await api.post('/catalog/availability', { ids: productIds });
}

Вызываем после рендеринга карточек — пользователь видит цены сразу, а бейджи "в наличии" обновляются через секунду. На сервере используем кэширование тегированное для сброса при изменении остатков.

Случай из практики

Интернет-магазин строительных материалов: каталог с 80 000 позиций, фильтрация по 20+ параметрам (бренд, серия, размер, цвет, материал). Стандартный AJAX-фильтр Битрикс при каждом изменении делал запрос на 3–6 секунд (полный серверный рендеринг раздела). Мы внедрили Vue-каталог с debounced-запросами (300 мс) и optimistic UI (показываем скелетон сразу) — субъективное время отклика снизилось до <300 мс. Первая загрузка страницы раздела — серверный рендеринг Битрикс для корректной индексации. Результат: конверсия выросла на 25% за счёт удобства фильтрации. Готовы обсудить ваш проект? Просто свяжитесь с нами.

Таблица сравнения: стандартный подход vs Vue-каталог

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

• Отсутствие гидратации: Vue-каталог грузится пустым, пока не выполнится AJAX — пользователи видят белый экран. Решение: передавать начальные данные через data-* атрибуты.
• Слишком большие API-ответы: при 80 000 товарах фильтр возвращает все позиции. Нужна пагинация (24 шт.) и фасетная агрегация на сервере.
• Игнорирование кэширования: без тегированного кэша каждый запрос бьёт в базу. Используйте CIBlockCache или D7 cache с тегами iblock_id_XXX.
• Некорректная обработка остатков: для реального времени лучше отдельный endpoint, не нагружающий основной выдачи.

Что входит в работу

• Исходный код кастомного API-контроллера для Битрикса.
• Vue-компоненты: сетка, список, карточка, фильтр, пагинация, сортировка.
• Гибридный рендеринг первого экрана (серверный HTML + гидратация).
• Интеграция с ценами и остатками (реальный тайм accessibility).
• Документация по API и компонентам.
• Настройка кэширования и SEO-мета-тегов.
• Тестовый стенд и обучение ваших разработчиков.
• Поддержка 30 дней после запуска.

Закажите разработку Vue-каталога — и ваши клиенты перестанут ждать. Получите консультацию по внедрению — свяжитесь с нами для оценки вашего проекта.