3

WebTech

Личный кабинет

Проекты, коммерческие предложения, документы и отчёты — в одном месте.

Войти Зарегистрироваться Забыли пароль?
Headless-коммерция

Отделяем витрину от бэкенда и ускоряем её до статических страниц

Коммерс-API становится единственным источником правды о товарах, ценах и остатках, а витрина собирается на Next.js: SSR для корзины и личного кабинета, ISR для каталога. Кэш раздаётся с узла рядом с покупателем, а при изменении карточки инвалидируется точечно, по тегу, без полной пересборки.

Или сразу: +7 (962) 368-39-51 Telegram

ISR
каталог из кэша без пересборки всего сайта
API
один контракт для сайта, приложения и партнёров
edge
кэш и изображения ближе к покупателю
LCP
метрики под контролем после разделения
Задачи

Почему headless-переезд не всегда даёт обещанное

С этими проблемами к нам приходят команды, которые уже попробовали разделить фронтенд и бэкенд.

Разделили стек, не имея на это причины

Команда получила два деплоя, два набора зависимостей и удвоенный объём поддержки. Если витрина меняется раз в квартал, монолит обходится дешевле.

Цена обновилась, а витрина показывает старую

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

После переезда просели позиции в поиске

Страницы отдаются пустыми, метаданные подставляются на клиенте в браузере, а старые адреса отвечают ошибкой вместо редиректа. Трафик возвращается месяцами.

Контракт API проектировали под один экран

Эндпоинты отдают ровно те поля, которые нужны текущей вёрстке. Каждая новая страница требует доработки бэкенда и отдельного релиза.

Контент-менеджер публикует вслепую

В CMS нет черновиков и превью, связанных с витриной. Текст и баннеры уходят в продакшн без проверки, а откатить публикацию нечем.

GraphQL выбрали как ярлык

Схема растёт без правил, тяжёлые запросы с глубокой вложенностью роняют бэкенд, кэширование ответов не настроено, ограничений по стоимости запроса нет.

Решения

Что входит в headless-проект

Берём цикл целиком или отдельные блоки — например, только слой кэша и инвалидации поверх существующего бэкенда.

Коммерс-API и модель данных

Главный слой: один контракт, из которого читают витрина, приложение и партнёрские интеграции.

  • Схема товара, варианта, цены, скидки, остатка и склада
  • REST для простых ресурсов, GraphQL там, где нужна выборка полей
  • Версионирование контракта и правила обратной совместимости
  • Идемпотентность операций корзины и оформления заказа

Витрина на Next.js

Фронтенд, который сам выбирает стратегию рендеринга под тип страницы.

  • SSR для корзины, поиска, оформления и личного кабинета
  • ISR и статическая генерация для каталога и SEO-страниц
  • React Server Components и стриминг там, где это уместно
  • Состояние корзины и оптимистичные обновления интерфейса

Кэш, изображения и edge

Самая недооценённая часть: именно она отвечает за скорость и за актуальность цен.

  • Кэширование ответов API по тегам: товар, категория, подборка
  • Точечная инвалидация по событию изменения карточки
  • Форматы AVIF и WebP, адаптивные размеры, отложенная загрузка
  • Раздача статики и изображений с узлов рядом с покупателем

CMS, черновики и превью

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

  • Headless CMS для описаний, баннеров и лендингов
  • Черновик, превью на витрине и публикация по расписанию
  • Связь контента с сущностями каталога вместо свободного HTML
  • Локали и мультирегиональные витрины
Процесс

Как идёт переход

Отдельная задача на старте — решить, стоит ли уходить с монолита, и если да, то какими частями.

  1. 01 1–2 недели

    Аудит и решение

    Разбираем трафик, ассортимент, частоту изменений витрины и состав команды. Показываем, что даст разделение, а что останется прежним.

  2. 02 2–4 недели

    Контракт API и модель

    Проектируем схему данных и эндпоинты под все каналы: сайт, мобильное приложение, партнёрские интеграции, фиды.

  3. 03 6–12 недель

    Витрина и кэш

    Собираем фронтенд, задаём стратегии рендеринга по типам страниц, подключаем edge-кэш и инвалидацию по тегам.

  4. 04 2–3 недели

    Переезд и контроль SEO

    Переносим адреса с редиректами, сверяем разметку и метаданные, следим за индексацией и метриками первые недели.

Когда headless оправдан, а когда это лишняя работа

Разделение витрины и бэкенда имеет смысл, когда фронтенд меняется часто и независимо от учётной системы, когда кроме сайта нужны мобильное приложение и партнёрские каналы, когда ассортимент большой и требует отдельного слоя представления. В этих случаях единый контракт API экономит время каждой команде.

Обратная ситуация тоже частая: небольшой каталог, предсказуемая вёрстка, одна команда и учётная система, которая уже отдаёт нужные данные. Здесь headless добавит второй деплой, второй набор зависимостей и постоянные расходы на синхронизацию. Мы говорим об этом прямо на этапе оценки, а не после подписания договора.

Из чего складывается стоимость headless-проекта

Основные блоки затрат: проектирование контракта API и модели данных, разработка витрины, слой кэширования и инвалидации, интеграция CMS, перенос адресов и SEO-контроль. Отдельно стоит миграция учётной системы и синхронизация остатков, если бэкенд остаётся прежним.

Дороже всего обходится не разработка, а последующая поддержка двух контуров: два релизных цикла, две среды, отдельные проверки перед выкладкой. Поэтому в оценке мы всегда показываем стоимость владения, а не только стоимость запуска, и предлагаем сократить объём до тех блоков, которые дают измеримую пользу.

Типичные ошибки и сроки: что учесть в плане

Частые ошибки: проектировать API под текущие макеты, откладывать стратегию кэширования на потом, переносить адреса без карты редиректов, не проверять метаданные на отрендеренных страницах и забывать о превью для редакторов. Каждая из них приводит к потере трафика или к ручной работе, которую можно было автоматизировать.

Реалистичные сроки для магазина среднего размера — от трёх до пяти месяцев до запуска и ещё несколько недель на стабилизацию метрик и индексации. Пилот на одной категории занимает меньше и позволяет проверить гипотезу до полного переезда.

Частые вопросы

Для магазина среднего размера с каталогом в несколько тысяч позиций — от трёх до пяти месяцев до запуска, включая проектирование контракта API, разработку витрины и перенос адресов. Если начать с пилота на одной категории, первый рабочий результат появляется через шесть-восемь недель, а остальной каталог переносится итерациями уже на проверенной схеме.

Из проектирования модели данных и API, разработки витрины, слоя кэширования и инвалидации, интеграции CMS с превью, миграции адресов и SEO-контроля. Отдельной строкой идёт поддержка: два контура означают два релизных цикла и две среды. Мы считаем и запуск, и стоимость владения, чтобы решение принималось по полной картине.

Главные риски — потеря поискового трафика при неаккуратном переносе адресов и метаданных, устаревшие данные из-за неверной стратегии кэширования и рост стоимости поддержки. Все три управляемы: карта редиректов и проверка разметки до переключения, инвалидация кэша по событию изменения товара, план развития контракта API с версионированием.

Начните с короткого аудита: объём ассортимента, частота изменений витрины, состав каналов продаж и размер команды. По этим данным видно, окупится ли разделение. Мы проводим такую оценку за одну-две недели и даём вывод вместе с вариантами: остаться на монолите, разделить только часть слоёв или идти в headless целиком.

Premium e-commerce: другие направления

Смежные задачи, которые обычно решаются в одном проекте с этой.

Обсуждаем headless-переезд?

Расскажите про ассортимент и текущую платформу — скажем прямо, нужен ли вам headless и в каком объёме.