Vue.js Catalog for 1C-Bitrix: Hybrid Rendering

We often encounter projects where the standard bitrix:catalog.section component can't handle the load: dynamic filtering with 20+ parameters, infinite scroll, instant switching between grid and list. Server-side rendering of each request causes 3–6 second delays. Typical scenario: an online store with 50,000 products where every click on a filter triggers a full page reload. The user waits 5 seconds and leaves. We rewrote the frontend in Vue.js: filtering became instant, server load dropped by 40%, and SEO remained intact—the first screen is rendered on the Bitrix side. Vue catalog solves these problems through client-side reactivity while preserving server-side rendering for SEO—a hybrid approach that delivers SPA speed and static HTML indexing. Contact us to get an estimate for your project.

What problems does Vue catalog solve in Bitrix?

• Slow filtering: every AJAX request to the server redraws the entire section. Vue.js processes filtering on the client, sending only data via API. Debounce at 300 ms and optimistic UI with skeleton screens make the response instant.
• SEO risks of SPA: fully client-side rendering is poorly indexed. The hybrid approach delivers the first screen server-side (HTML with products), and Vue.js hydrates afterward—search engines see content, users get speed.
• High server load: with frequent requests (pagination, sorting), the server re-renders components. Vue catalog offloads the server: after the initial load, all logic is on the client; the API only serves JSON. Database load reduction reaches 50%.

How we implement Vue.js in Bitrix catalog: a practical case

Stack: PHP 8.1, Bitrix (D7 ORM, infoblocks v2.0), Vue 3 + Pinia, MySQL 8.0. For integration, we write a custom API controller using Bitrix\Main\Engine\Controller that returns products, facets, and pagination via a single endpoint. Example controller:

// 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; // Get via D7 ORM ElementProductTable // Return JSON: items, pagination, facets } } 

Endpoint: /bitrix/services/main/ajax.php?action=catalog.getProducts. On the frontend, Vue components:

• CatalogApp.vue — root component, manages state via Pinia store.
• ProductGrid.vue / ProductList.vue — display modes with switch without reload.
• ProductCard.vue — card with quick view in modal.
• Pagination.vue / InfiniteScroll.vue — navigation.
• SortBar.vue — sorting by price, popularity, novelty.
• FilterPanel.vue — faceted filter with multiple selection and ranges.

For more on the framework, see the Vue.js documentation.

Why hybrid rendering is critical for SEO?

Search engines (Yandex, Google) must see full HTML of products on the first request. Vue.js without server-side rendering outputs an empty #app, leading to traffic loss. We use server-side rendering for the first screen: in the Bitrix component template, we output products in a regular loop, then pass them to Vue via data-attribute:

// In the component template $initialProducts = json_encode($arResult['ITEMS']); echo '<div id="catalog-app" data-initial-products="' . htmlspecialchars($initialProducts) . '" data-iblock-id="' . $arResult['IBLOCK_ID'] . '" ></div>'; 

Vue reads data-initial-products on mount and renders the grid without AJAX. All subsequent requests are only via API. This approach gives Vue speed and static HTML indexing. In practice, this increased catalog visibility by 70% for one client (a building materials store). The official Bitrix D7 ORM documentation confirms the effectiveness of this approach.

How long does Vue catalog development take?

The cost is calculated individually for your project. Contact us for a preliminary estimate—we will offer the optimal solution.

Real-time price and stock handling

Prices in Bitrix are stored in b_catalog_price by price type. Stocks are in b_catalog_store_product. For up-to-date availability at view time, we add a quick endpoint that does not block initial load:

// Request availability for an array of products async function getAvailability(productIds) { return await api.post('/catalog/availability', { ids: productIds }); } 

We call it after rendering cards—users see prices immediately, and "in stock" badges update within a second. On the server, we use tagged caching to reset when stocks change.

Case study

An online store of building materials: catalog with 80,000 items, filtering by 20+ parameters (brand, series, size, color, material). The standard Bitrix AJAX filter made a request on each change taking 3–6 seconds (full server-side section rendering). We implemented a Vue catalog with debounced requests (300 ms) and optimistic UI (showing skeleton immediately)—subjective response time dropped to <300 ms. The first load of the section page uses Bitrix server-side rendering for correct indexing. Result: conversion increased by 25% due to convenient filtering. Ready to discuss your project? Contact us.

Comparison table: standard approach vs Vue catalog

Typical mistakes

• No hydration: Vue catalog loads empty until AJAX completes—users see a white screen. Solution: pass initial data via data-* attributes.
• Too large API responses: with 80,000 products, the filter returns all items. Use pagination (24 items) and facet aggregation on the server.
• Ignoring caching: without tagged cache, each request hits the database. Use CIBlockCache or D7 cache with tags iblock_id_XXX.
• Incorrect stock handling: for real-time, use a separate endpoint that does not burden the main query.

What’s included in the work

• Custom API controller source code for Bitrix.
• Vue components: grid, list, card, filter, pagination, sorting.
• Hybrid first-screen rendering (server-side HTML + hydration).
• Integration with prices and stocks (real-time accessibility).
• API and component documentation.
• Caching configuration and SEO meta tags.
• Test environment and training for your developers.
• 30-day post-launch support.

Order Vue catalog development—your customers will stop waiting. Get a consultation on implementation—contact us for a project estimate.