Headless на 1С-Битрикс · React или Vue на фронтенде, Битрикс — бэкенд и админка

info@wrp.ru
+7 (495) 230-20-53
Рассчитать стоимость
Создание сайтовСайт под ключКорпоративный сайтСайт-каталогB2B-порталЛичный кабинетСвой маркетплейсВысоконагруженные проектыHeadless на БитриксеPWA-приложениеРазработка модулейВсе услуги раздела
Интернет-магазиныСайт для селлеров −25%Магазин под ключМагазин на Битрикс с 1СМагазин на готовом шаблонеМагазин + CRMМагазин + маркетплейсыМагазин в TelegramМагазин + продвижениеОптовый B2B-магазинВсе услуги раздела
Перенос сайтаС бесплатной CMSС конструктора сайтовС платной CMSС самописного движкаС фреймворкаНа новые решения АспроПолная инструкция по миграции на Битрикс с сохранением SEOПеренос на другой хостингВсе услуги раздела
Аудит и ростАудит сайтаАудит интернет-магазинаSEO-аудитАудит безопасностиПовышение конверсииGEO-оптимизацияSEO-продвижениеКонтекстная рекламаВсе услуги раздела
Поддержка и развитиеПоддержка по договоруТарифы поддержкиСрочная техподдержкаПодхватим ваш БитриксМодернизацияУскорение сайтаПеревод на PHP 8Лечение от вирусовХостинг для БитриксВсе услуги раздела
Интеграции и настройкаОнлайн-оплатаОплата частямиОнлайн-кассыСлужбы доставкиМаркетплейсыМаркировка «Честный знак»Импорт от поставщиковМультирегиональностьСкидки и лояльностьТриггерные рассылкиИнтеграция по APIВсе услуги раздела
ИИ и новые каналыИИ на сайтеИИ для каталогаИИ в Битрикс24Магазин в TelegramЧат-ботыИнтеграция с АвитоВсе услуги раздела
Внедрение CRMБитрикс24RetailCRMМойСкладamoCRMВсе услуги раздела
Услуги по 1СИнтеграция с 1С1С и Битрикс241С и Ozon1С и WildberriesЭДОВнедрение 1СДоработка 1СОбслуживание 1СПереход на УТ 11Все услуги раздела
Готовые решенияШаблоны интернет-магазиновШаблоны B2B-порталовШаблоны сайтов для услугРешения АспроМодули WRPВсе решения
Лицензии 1С-БитриксКупить лицензиюПродлить лицензиюСменить редакциюЛицензии со скидкойВсе лицензии
Битрикс24Битрикс24 в облакеКоробочный Битрикс24Интернет-магазин + CRMМаркет ПлюсПродлить коробкуВсе тарифы
1СПрограммы и сервисы 1САренда 1С в облакеАренда сервера 1СПоддержка 1С:ИТС
О компанииО WRPКомандаСертификатыНаградыТехнологииОтзывыКонтакты
Работа с намиКак мы работаемГарантииПорядок оплатыОплата частямиРассрочкаРеквизиты
ИнструментыПроверка сайтаБрифыКалькуляторШаблон ТЗЧек-лист запускаВсе материалы
ЗнанияВопрос-ответСтатьиСравненияГлоссарийНовостиАкции
СотрудничествоФорматы работыПартнёрамВакансии
Все услуги и цены Кейсы Контакты

Headless-разработка на 1С-Битрикс

React или Vue для интерфейса, Битрикс — для данных и админки

В headless-архитектуре 1С-Битрикс остаётся бэкендом: каталог, заказы, пользователи, обмен с 1С и привычная админка. А интерфейс сайта пишется отдельно на React или Vue и получает данные через API. Так сайт, PWA и мобильное приложение работают от одного бэкенда.

  • 1 бэкенддля сайта, PWA и приложения
  • REST APIфронтенд ↔ 1С-Битрикс
  • SSRстраницы видны поисковикам
  • по сметепосле проектирования API
КороткоHeadless 1С-Битрикс: Битрикс — бэкенд и админка, React или Vue — интерфейсПодробнее

Headless-сайт на 1С-Битрикс разделён на две части: Битрикс хранит каталог, цены, заказы и пользователей, обменивается с 1С и даёт админку контент-менеджерам, а фронтенд на React (Next.js) или Vue (Nuxt) получает данные через REST API и рендерит страницы на сервере, чтобы их видели поисковики.

  • Подход оправдан для сложных интерфейсов и нескольких каналов (сайт, PWA, мобильное приложение) на одном бэкенде.
  • WRP проектирует API, делает фронтенд и бэкенд; стоимость считаем по смете.

Цены и условия

Бэкенд
1С-Битрикс
Фронтенд
React (Next.js) или Vue (Nuxt)
Цена
по смете
Исполнитель
WRP, Золотой партнёр 1С-Битрикс

Цены актуальны на . Точную смету фиксируем в договоре.Рассчитать мой проект

Что выбрать

Классический Битрикс или headless

Классический сайт на шаблонах 1С-Битрикс и headless-архитектура

Классический БитриксHeadless
Интерфейсшаблоны и компоненты Битриксалюбой, на React или Vue
Каналысайтсайт, PWA и приложение от одного API
Готовые решенияможно взять готовый шаблонфронтенд пишется под проект
Админка1С-Битрикста же — 1С-Битрикс
SEOиз коробкинужен серверный рендеринг (SSR)
КомандаPHP-разработчикиPHP и JavaScript-разработчики
Срок и бюджетменьшебольше: две части проекта

Таблица прокручивается вбок →

Если интерфейс типовой, а канал один — дешевле классический сайт: создание сайта на Битрикс.

Когда оправдано

Когда headless действительно нужен

  • Несколько каналов

    Сайт, PWA и мобильное приложение должны показывать одни и те же товары, цены и корзину.
  • Сложный интерфейс

    Конфигураторы, калькуляторы, интерактивные каталоги — то, что неудобно делать на шаблонах.
  • Скорость интерфейса

    Мгновенные переходы между страницами и работа как у приложения.
  • Своя фронтенд-команда

    У вас уже есть React- или Vue-разработчики, и им нужен понятный API.
  • Сохранить Битрикс

    Нужны обмен с 1С, админка и модули Битрикса, но интерфейс — свой.
  • Поэтапный переход

    Переводим на новый фронтенд раздел за разделом, не останавливая сайт.

Сколько это будет стоить?

Посчитаем ваш проект

Расскажите о задаче — пришлём состав работ, сроки и стоимость. До договора — никаких обязательств.

  • Смета фиксируется в договоре
  • Оплата по этапам
  • Золотой партнёр 1С-Битрикс

Как устроено

Из чего состоит headless-проект

Бэкенд 1С-Битрикс

Всё, что Битрикс умеет лучше всего, остаётся в нём.

  • Каталог и ценыИнфоблоки, торговые предложения, типы цен и склады.
  • Заказы и корзинаМодуль интернет-магазина, оплата и доставка.
  • ПользователиАвторизация, группы и права доступа.
  • Обмен с 1СШтатный обмен товарами, ценами и заказами.
  • АдминкаКонтент-менеджеры работают в привычном 1С-Битрикс.

API

Договор между бэкендом и фронтендом — проектируем первым.

  • REST APIКонтроллеры 1С-Битрикс с понятными методами для каталога, корзины и кабинета.
  • ДокументацияОписание методов и ответов для фронтенд-команды.
  • АвторизацияТокены для пользователей и приложений.
  • КешированиеБыстрые ответы API для каталога и страниц.
  • ВерсионированиеНовые версии API без поломки работающих клиентов.

Фронтенд

Интерфейс, который видят посетители.

  • React или VueNext.js или Nuxt — по задачам и вашей команде.
  • SSR и SEOСерверный рендеринг, мета-теги, микроразметка и чистые адреса.
  • PWAУстановка на экран и офлайн — PWA-сайт.
  • Дизайн-системаКомпоненты интерфейса для сайта и приложения.

Инфраструктура

Две части проекта — два процесса развёртывания.

  • ХостингСервер для Битрикса и Node.js-сервер для фронтенда.
  • CI/CDАвтоматическая сборка и выкладка обеих частей.
  • МониторингОшибки и скорость API и фронтенда.

Этапы

Как мы делаем headless-проект

  1. 01

    Аналитика

    Каналы, сценарии и данные: что должен отдавать API.

    На выходе: карта сценариев

  2. 02

    Проектирование API

    Методы, форматы, авторизация и кеширование.

    На выходе: документация API

  3. 03

    Дизайн

    Интерфейс и дизайн-система компонентов.

    На выходе: макеты

  4. 04

    Бэкенд

    Каталог, заказы и API на 1С-Битрикс, обмен с 1С.

    На выходе: рабочее API

  5. 05

    Фронтенд

    React или Vue с серверным рендерингом.

    На выходе: новый сайт

  6. 06

    Запуск

    Тесты, SEO-проверка, развёртывание и поддержка.

    На выходе: сайт в работе

Кейсы

Проекты на 1С-Битрикс

Магазины и сервисы на Битриксе, которые развиваем вместе с клиентами.

Стоимость

Сколько стоит headless на 1С-Битрикс

Три варианта под разные задачи. Цены ориентировочные: точную стоимость и срок фиксируем в смете после разбора вашей задачи.

API

API для фронтенда

Каталог, корзина и кабинет по REST API.

от 150 000 ₽

4–6 недель

Выбрать тариф
  • API каталога
  • API корзины и заказов
  • Документация API

СайтЧаще заказывают

Headless-сайт

1С-Битрикс как бэкенд и сайт на Next.js или Nuxt.

от 500 000 ₽

по смете

Выбрать тариф
  • Всё из «API»
  • Фронтенд на JS-фреймворке
  • Серверный рендеринг для SEO

Сайт и приложение

Сайт и мобильное приложение

Единое API для всех каналов продаж.

от 900 000 ₽

по смете

Обсудить проект
  • Всё из «Сайта»
  • Мобильное приложение
  • Общая авторизация и корзина
  • Цены ориентировочныеИтог зависит от вашей задачи — пришлите вводные, назовём точную сумму.
  • Цена — в договореСмету и срок фиксируем до начала работ.
  • Доработки потомНовые задачи — в часах поддержки, час — 4 000 ₽.

О нас

Главные цифры нашей работы

  • 1 бэкенддля сайта, PWA и мобильного приложения
  • REST APIсвязь фронтенда с 1С-Битрикс
  • 5компетенций, подтверждённых 1С-Битрикс
  • 3 местоBitrix Awards 2024 в продаже решений Маркетплейс

Полезно знать

Что нужно знать о headless-архитектуре на 1С-Битрикс

Когда отделять фронтенд от Битрикса оправдано, что это даёт и какие задачи придётся решать заново.

Что такое headless

В классическом сайте на 1С-Битрикс и данные, и внешний вид формируются платформой: компоненты получают данные и сразу выводят HTML по шаблону. В headless-архитектуре Битрикс остаётся «бэкендом» — каталогом, корзиной, заказами, личным кабинетом, админкой, обменом с 1С, — а внешний сайт делается отдельным приложением (обычно на React/Next.js или Vue/Nuxt) и получает данные через API.

Когда это оправдано

  • Нужно несколько «витрин» на одних данных: сайт, мобильное приложение, Telegram Mini App, киоски.
  • Сложный интерактивный интерфейс: конфигураторы, личные кабинеты с большим количеством данных.
  • Отдельная фронтенд-команда, которой удобнее работать с современным стеком.
  • Высокие требования к скорости интерфейса и плавности переходов.

Когда не нужно

Для типового интернет-магазина или корпоративного сайта headless чаще усложняет жизнь: всё, что Битрикс делает «из коробки» — SEO-модуль, композитный кеш, визуальный редактор, компоненты корзины, — придётся реализовать заново. Если цель — просто ускорить сайт, обычно дешевле оптимизировать текущий: см. аудит сайта и композитный сайт.

Сравнение подходов

Классический БитриксHeadless
Скорость запускаВыше, много готовогоНиже, фронтенд с нуля
Гибкость интерфейсаОграничена шаблонами компонентовПолная
SEOВстроенные инструментыНужен SSR, мета-теги и sitemap через API
КомандаPHP-разработчики БитриксаБэкенд на Битриксе + фронтенд-разработчики
ПоддержкаОдна системаДве системы и API между ними

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

  • Проектирование API: каталог, фильтры, корзина, заказы, пользователи, контент.
  • Разработка API на стороне Битрикса: REST-контроллеры D7 или GraphQL.
  • Фронтенд с серверным рендерингом для SEO.
  • Кеширование API и CDN.
  • Перенос SEO-настроек: мета-теги, канонические адреса, редиректы, микроразметка.
  • Сохранение работы администраторов: предпросмотр, редактирование контента.

Если нужен только API для внешних систем, без переделки сайта, — см. разработку API.

От чего зависит стоимость

  • Объём функций, которые нужно перенести на фронтенд.
  • Сложность каталога и фильтров.
  • Личный кабинет, B2B-логика, мультирегиональность.
  • Нужна ли поэтапная миграция без остановки текущего сайта.

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

  • Выбрать headless «потому что модно» без задачи, которую не решить классически.
  • Забыть про SSR — поисковики видят пустую страницу.
  • Делать API под конкретные экраны, а не под сущности — каждая правка дизайна требует бэкенда.
  • Не заложить поддержку двух команд после запуска.

Расскажите, какую задачу должен решить headless, — честно скажем, нужен ли он вам.

Обсудить задачу

Калькулятор

Рассчитайте headless-проект

Четыре вопроса — покажем архитектуру и пришлём оценку.

  • 4 вопроса — меньше минуты
  • Состав работ — сразу на экране
  • Смету пришлём после короткого обсуждения задачи
Что будет на фронтенде?
Сайт на 1С-Битрикс уже есть?
Какие данные отдаёт API?

Можно выбрать несколько.

Важен поиск?
Ваш расчёт

Куда прислать подробный план и смету?

Подберём решение по похожим проектам

Пришлите адрес вашего сайта или пример, который нравится, — покажем похожие кейсы из портфолио и подскажем, как сделать лучше.

Тема вопросов: headless

Вопросы о headless на 1С-Битрикс

Не нашли ответ? Позвоните +7 (495) 230-20-53 или напишите на info@wrp.ru.

Что такое headless-сайт?

Сайт, у которого интерфейс («голова») отделён от бэкенда. Бэкенд хранит данные и отдаёт их через API, а фронтенд — отдельное приложение на React или Vue — показывает их посетителям.

Зачем оставлять 1С-Битрикс, если фронтенд новый?

Битрикс даёт каталог, корзину, заказы, обмен с 1С, права пользователей и админку для контент-менеджеров — всё это не нужно писать заново.

Не пострадает ли SEO?

Нет, если фронтенд рендерит страницы на сервере (SSR): поисковики получают готовый HTML с текстами, мета-тегами и микроразметкой. Это закладываем с начала проекта.

Сколько стоит headless-проект?

Дороже классического сайта: это две части — бэкенд с API и фронтенд. Точную смету считаем после проектирования API и сценариев.

React или Vue — что выбрать?

Оба подходят. Выбираем по задачам и по тому, кто будет развивать проект: если у вас есть своя команда, берём её стек.

Можно ли перевести на headless уже работающий сайт?

Да, поэтапно: сначала API для нужных данных, затем новый фронтенд для отдельных разделов — сайт при этом продолжает работать.

Можно ли на том же API сделать мобильное приложение?

Да, в этом и смысл: сайт, PWA и приложение получают одни и те же товары, цены и корзину. Подробнее — мобильное приложение на Битрикс.

Кто будет поддерживать проект?

Мы — обе части, бэкенд и фронтенд. Или передадим документацию API вашей команде и будем поддерживать только Битрикс.

Какая редакция 1С-Битрикс нужна для корпоративного сайта?

Обычно «Старт» (7 100 ₽) или «Стандарт» (20 500 ₽, плюс формы, опросы, блоги). Сравнение — редакции 1С-Битрикс.

Нужен ли уникальный дизайн?

Если важно выделиться и сайт — главный канал продаж, да. Для быстрого старта подойдёт шаблон в фирменном стиле — дизайн сайта.

Нужно ли соблюдать 152-ФЗ на сайте?

Да: политика обработки данных, согласия на формах, cookie-уведомление. Настраиваем при разработке — сайт под 152-ФЗ.

Кто пишет тексты для сайта?

Можем мы: собираем информацию на брифе и пишем тексты под услуги и запросы. Если тексты есть — вычитаем и адаптируем под структуру.

Что такое лендинг и когда он нужен?

Одностраничный сайт под одно предложение или рекламную кампанию. Хорош для теста спроса; для постоянного трафика из поиска лучше полноценный сайт.

Будет ли сайт быстро загружаться?

Да: оптимизируем изображения, шрифты и кеш, проверяем Google PageSpeed. Быстрый сайт лучше конвертирует и ранжируется.

Можно ли самому менять содержимое сайта?

Да, в визуальном редакторе 1С-Битрикс меняете тексты, фото и цены без программиста. Проведём обучение и оставим инструкции.

Можно ли сделать многоязычный сайт?

Да, английская, китайская и другие версии с отдельными адресами и переводом интерфейса.

Сколько страниц должно быть на сайте компании?

Столько, сколько у вас услуг и направлений: отдельная страница на каждую услугу работает лучше одной общей — и для клиентов, и для поиска.

Как сайт будет собирать заявки?

Формы на страницах услуг, квиз-калькулятор, онлайн-чат и кнопки мессенджеров; все заявки — в почту и CRM с указанием страницы и источника.

Какую CMS выбрать для сайта компании?

Для сайта, который будет расти и интегрироваться с 1С и CRM, — 1С-Битрикс. Для простой визитки без развития хватит конструктора, но потом его придётся переделывать.

Делаете ли вы мобильную версию?

Все сайты адаптивные: корректно выглядят на телефонах и планшетах — мобильная версия.

Можно ли связать сайт с 1С?

Да. Настраиваем двусторонний обмен: товары, цены и остатки из 1С на сайт, заказы и статусы — обратно. Работаем с «Управлением торговлей», «Бухгалтерией», «УНФ», «КА» и ERP — подробнее об интеграции с 1С.

Куда будут попадать заказы и заявки — нужна ли CRM?

Для небольшого потока хватит уведомлений на почту и раздела заявок в Битриксе. Если менеджеров несколько и важно не терять клиентов — подключим Битрикс24: заявки, звонки и переписка в одной карточке. Подробнее — внедрение Битрикс24.

У меня уже есть сайт на другой CMS. Можно перенести его на Битрикс?

Да, переносим страницы, товары, пользователей и заказы с сохранением адресов и позиций в поиске: настраиваем 301-редиректы и проверяем индексацию. Подробнее — перенос сайта на Битрикс.

Кто будет поддерживать сайт после запуска?

Мы. Исправление ошибок по ТЗ — бесплатно, дальше — техническая поддержка по договору: обновления Битрикса, доработки, резервные копии и помощь вашей команде. 85% клиентов продолжают работать с нами после запуска.

Поможете с продвижением в Яндексе и Google?

Да. SEO-основу закладываем при разработке, а после запуска можно заказать SEO-продвижение: семантика, структура, тексты, техническая оптимизация и ссылки.

Как понять, какие каналы рекламы приносят заявки и продажи?

Настраиваем Яндекс Метрику с целями и электронной коммерцией, связываем заявки и заказы с источниками и рекламными кампаниями. Подробнее — веб-аналитика.

Обсудим headless-проект

Расскажите о каналах и интерфейсе, который нужен, — скажем, оправдан ли headless, и подготовим смету.

  1. Свяжемся в течение рабочего дня и уточним задачу.
  2. За 1–2 дня подготовим КП: что сделать, в какие сроки и за какие деньги. Простой проект — быстрее.
  3. Вы решаете, начинать ли работу. До договора — никаких обязательств.

Удобнее письменно? Заполнить бриф на разработку интернет-сервиса — займёт 3–4 минуты, предварительную оценку пришлём за 1–2 рабочих дня.

Заявка

Обсудим ваш проект

Оставьте контакты — ответим в рабочее время по почте или в мессенджере, уточним задачу и назовём сроки и стоимость.

Или позвоните: +7 (495) 230-20-53, Пн–Пт 10:00–19:00