Ми знаємо не з чуток: штатний особистий кабінет в 1С-Бітрікс — це набір PHP-компонентів bitrix:sale.personal.*, які рендеряться на сервері, віддають повну HTML-сторінку та при будь-якій дії користувача (зміна адреси доставки, перегляд статусу замовлення) виконують повний page reload. На невеликих магазинах це терпимо. Коли в кабінеті з'являється історія замовлень на 200+ позицій, система лояльності, кілька адрес доставки, документи та інтеграція із зовнішніми сервісами — штатний підхід стає вузьким місцем по UX та продуктивності.
Особистий кабінет React для Бітрікс — це рішення, яке вирішує цю проблему: сервер віддає тільки дані через REST, інтерфейс живе в браузері. Це дає миттєві переходи між розділами, оновлення даних без перезавантаження, можливість будувати складні інтерактивні форми без перекомпоновки сторінки. За даними нашого кейсу, React-кабінет скорочує час завантаження на 70% та знижує операційні витрати на підтримку.
Як React-кабінет підвищує продуктивність?
При серверному рендерингу кожен перехід — це новий запит, який збирає всю сторінку заново. React-кабінет завантажує тільки дані: список замовлень, профіль, історію. Браузер оновлює тільки потрібну частину інтерфейсу. Наприклад, перемикання між вкладками «Замовлення» та «Адреси» займає 50–100 мс замість 1–2 секунд повного перезавантаження. Це підтверджено нашими кейсами: час завантаження сторінки замовлень скоротився з 4,2 до 0,9 секунди — в 4,7 рази швидше.
Архітектура інтеграції
Є два принципово різних способи вбудувати React-кабінет в Бітрікс.
Варіант 1: React всередині шаблону Бітрікс. На PHP-сторінці /personal/ монтується React-додаток в контейнер <div id="personal-root"></div>. Бітрікс відповідає за авторизацію, SEO (title, meta), загальний layout (шапка, футер). React керує тільки вмістом кабінету. Роутинг — через React Router з BrowserRouter, історія браузера синхронізується з URL. Цей варіант простіший в інтеграції: авторизація через стандартний $USER->Login(), сесія Бітрікс передається автоматично, CSRF-токен береться з BX.bitrix_sessid().
Варіант 2: SPA з JWT-авторизацією. React-додаток живе окремо (окремий домен або піддомен), взаємодіє з Бітрікс виключно через REST API з JWT-токенами. Авторизація — через кастомний endpoint, токен зберігається в httpOnly cookie або localStorage. Цей варіант виправданий, коли кабінет має працювати і з мобільним додатком, і з веб-версією через одне API. Для більшості проєктів оптимальний Варіант 1 — він простіший у підтримці, не потребує окремого деплою, авторизація вже вирішена.
| Параметр | React всередині шаблону | Окреме SPA |
|---|---|---|
| Складність розгортання | Низька (один сайт) | Висока (CORS, окремий хостинг) |
| Авторизація | Використовує сесію Бітрікс | JWT-токени, кастомна |
| Швидкість роботи | Швидко (без перезавантаження) | Швидко (без перезавантаження) |
| SEO сторінок кабінету | Підтримується | Погана (потрібна ізоляція) |
| Сумісність з модулями | Повна | Обмежена (тільки REST) |
API-шар на стороні Бітрікс
React-компоненти працюють з даними через AJAX-запити до Бітрікс. Для цього створюється контролер в /local/php_interface/include/api/personal/:
// Приклад: endpoint для списку замовлень class PersonalOrdersController extends \Bitrix\Main\Engine\Controller { public function getListAction(int $page = 1, int $limit = 20): array { $userId = \Bitrix\Main\Engine\CurrentUser::get()->getId(); $orderList = \Bitrix\Sale\Order::getList([ 'filter' => ['USER_ID' => $userId], 'select' => ['ID', 'DATE_INSERT', 'PRICE', 'STATUS_ID', 'CURRENCY'], 'order' => ['DATE_INSERT' => 'DESC'], 'limit' => $limit, 'offset' => ($page - 1) * $limit, ]); $orders = []; while ($order = $orderList->fetch()) { $orders[] = $order; } return [ 'orders' => $orders, 'total' => \Bitrix\Sale\Internals\OrderTable::getCount(['USER_ID' => $userId]), ]; } } Роутинг в Бітрікс через local/ajax/personal.php з диспетчером або через \Bitrix\Main\Engine\Router. Для CSRF-захисту всі POST-запити з React передають заголовок BX-Ajax: true та токен сесії.
Структура React-додатку
src/ personal/ api/ # axios-інстанс, типи запитів components/ # перевикористовувані UI-елементи pages/ Orders/ # історія замовлень OrderDetail/ # детальна сторінка замовлення Profile/ # дані профілю Addresses/ # адреси доставки Loyalty/ # бонусна програма store/ # стан (Zustand або Redux Toolkit) App.tsx router.tsx Управління станом: для простих кабінетів достатньо React Query (кеш запитів + синхронізація) без глобального стора. Для складних — Zustand як легша альтернатива Redux.
Кейс: кабінет для B2B-дистриб'ютора (наш клієнт)
Ми реалізували цей проєкт для одного з наших клієнтів — оптового постачальника електроніки з ~1 500 активних клієнтських акаунтів. Задача: особистий кабінет для менеджерів клієнта — можливість бачити історію закупівель, формувати повторне замовлення з історії, керувати кількома юридичними особами в одному акаунті, завантажувати закриваючі документи. Штатний Бітрікс-кабінет не підтримував мультиюросіб в принципі, а історія замовлень на 3 000+ рядків рендерилася сервером 4–6 секунд.
Детальніше про реалізацію
-
API-контролер для замовлень з серверною пагінацією, фільтрацією за датою/статусом та пошуком за номером замовлення. Запит на сторінку з 50 позицій — 80–120 мс проти 4+ секунд при повному рендері.
-
Мультиюрособи через кастомну таблицю
local_personal_company(зв'язокuser_id → company_id), перемикач компаній у шапці кабінету з перезавантаженням контексту через React QueryinvalidateQueries. -
«Повторити замовлення» — кнопка в історії, яка додає всі позиції замовлення в кошик через
\Bitrix\Sale\Basket::create()та робить bulk-insert товарів. На фронті — анімований індикатор, тостове повідомлення про успіх. -
Документи — інтеграція з 1С: замовлення документів через REST 1С, статус генерації через polling кожні 3 секунди, завантаження PDF напряму з 1С за тимчасовим посиланням.
| Метрика | До | Після |
|---|---|---|
| Завантаження сторінки замовлень | 4.2 сек | 0.9 сек |
| Повторне замовлення | 5 кроків, 2 хвилини | 1 клік, 3 секунди |
| Звернення в підтримку по документах | ~40/міс | ~8/міс |
Дані з реального проєкту
Зменшення кількості звернень в підтримку на 80% дозволило клієнту заощадити близько 25 000 грн щомісяця. Це дозволяє зекономити бюджет на підтримку та спрямувати ресурси на розвиток.
Що входить в розробку кабінету під ключ?
- Проєктування API: ендпоінти, структура даних, пагінація, фільтрація.
- Розробка серверної частини: контролери, авторизація, права доступу.
- Розробка React-додатку: роутинг, компоненти, управління станом.
- Інтеграція з модулями Бітрікс:
sale,catalog,crmпри необхідності. - Збірка, деплой, налаштування кешування API-відповідей.
- Документація по API та структурі компонентів.
- Навчання адміністраторів: як додавати нові розділи або змінювати дані.
- Гарантія: ми підтримуємо працездатність збірки та API протягом 3 місяців після здачі.
Орієнтовні терміни та вартість
Базовий кабінет (профіль + замовлення + адреси) — 3–4 тижні, орієнтовна вартість від 120 000 грн. Повнофункціональний B2B-кабінет з мультиюрособами, інтеграцією з 1С та документообігом — 2–4 місяці, вартість від 400 000 грн. Терміни та ціну уточнюємо після аудиту ваших вимог на безкоштовній консультації.
Чому обирають React для особистого кабінету?
React-кабінет в 3–5 разів швидший за штатний на сторінках з великими обсягами даних. Він дозволяє будувати інтерфейси, які неможливо реалізувати на штатних компонентах — наприклад, мультиюрособи, динамічні фільтри, редагування в реальному часі. Крім того, React-додаток простіше підтримувати та розширювати завдяки модульній архітектурі. Наша команда має 10+ років досвіду в розробці на React та інтеграції з 1С-Бітрікс, реалізовано 15+ проєктів особистих кабінетів. Якщо у вас складний кабінет з унікальною логікою — це правильний вибір.
Замовте безкоштовну консультацію: ми оцінимо ваш проєкт і запропонуємо оптимальне рішення. Працюємо під ключ: від проєктування API до деплою та навчання. Отримайте консультацію — ми розповімо, як React прискорить ваш кабінет та знизить витрати на підтримку.