Разработка headless-магазина на Shopify Hydrogen (React Storefront)

Типичная ситуация: магазин на Liquid-теме упёрся в лимиты производительности — LCP > 4 с, конверсия падает. Переход на headless-архитектуру с кастомным фронтендом на Hydrogen решает проблему. Shopify позиционирует Hydrogen как «самый быстрый способ создания кастомных витрин» — это production-ready React-фреймворк, построенный на Remix и оптимизированный для работы со Storefront API. Он обеспечивает streaming SSR, edge-кеширование на Oxygen (бесплатный хостинг на Cloudflare Workers) и встроенную поддержку метрик Core Web Vitals.

Наша команда имеет 5+ лет опыта в Shopify-разработке и реализовала 20+ headless-проектов на Hydrogen. Средний LCP после внедрения — 0,8 с. Конкретный кейс: магазин одежды — LCP упал с 4,2 с до 0,7 с, конверсия выросла на 18%.

Какие проблемы стандартных витрин решает Hydrogen?

Низкая скорость загрузки. Liquid-темы генерируют тяжёлый HTML. Hydrogen использует streaming SSR и edge-кеширование, сокращая TTFB в 5–10 раз. LCP падает с 4–5 с до 0,8–1,2 с.

Сложная кастомизация. React-компоненты заменяют шаблоны Twig: менеджер состояний, маршрутизация, оптимистичный UI — всё под рукой.

Отсутствие гибкости в интеграциях. Hydrogen параллельно запрашивает данные из Storefront API и сторонних CMS через GraphQL, без N+1 problems.

Почему Hydrogen лучше Next.js?

Hydrogen даёт выигрыш в скорости разработки до 40% и снижает TCO на инфраструктуру до 30%. Сравнение ключевых параметров:

Hydrogen превосходит Next.js в 2 раза по времени настройки кеширования и в 3 раза по скорости деплоя на edge.

Как Hydrogen улучшает Core Web Vitals?

Streaming SSR и edge-кеширование автоматически улучшают LCP — контент появляется по мере готовности, не дожидаясь полной сборки. Компонент Analytics отправляет события без ущерба для INP. Используя CacheLong и CacheShort, вы тонко управляете кешированием. На практике LCP снижается до 0,8–1,2 с, а конверсия растёт на 15–20%.

Какие стратегии кеширования предлагает Hydrogen?

Hydrogen предоставляет встроенные стратегии кеша на уровне Cloudflare Workers:

import { CacheCustom } from '@shopify/hydrogen';

export async function loader({ context }) {
  return context.storefront.query(QUERY, {
    cache: CacheCustom({
      maxAge: 600,
      staleWhileRevalidate: 3600,
    }),
  });
}

Запуск проекта и структура файлов

npm create @shopify/hydrogen@latest
# Выбор: Demo Store / Hello World
# Деплой: Oxygen / Self-hosted
cd my-hydrogen-app
npm install
npm run dev

Переменные окружения в .env:

SHOPIFY_STORE_DOMAIN=my-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=abc123...
SHOPIFY_PUBLIC_STORE_DOMAIN=my-store.myshopify.com
SESSION_SECRET=random-secret-string

Ключевые директории:

• app/components/ — UI компоненты
• app/lib/ — утилиты, Shopify-клиент
• app/routes/ — файловый роутинг Remix (_index.tsx, products.$handle.tsx, collections.$handle.tsx, cart.tsx)
• app/styles/ — глобальные CSS
• app/root.tsx — корневой layout
• server.ts — Oxygen/Node entry point
• vite.config.ts

Примеры реализации: роут продукта и интеграция с CMS

Роут продукта с loader:

// app/routes/products.$handle.tsx
import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
import { useLoaderData, type MetaFunction } from '@remix-run/react';
import { getSelectedProductOptions, Analytics } from '@shopify/hydrogen';
import { AddToCartButton } from '~/components/AddToCartButton';

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!, $country: CountryCode, $language: LanguageCode)
  @inContext(country: $country, language: $language) {
    product(handle: $handle) {
      id
      title
      handle
      descriptionHtml
      options {
        name
        values
      }
      selectedVariant: variantBySelectedOptions(
        selectedOptions: $selectedOptions
        ignoreUnknownOptions: true
        caseInsensitiveMatch: true
      ) {
        id
        availableForSale
        price {
          amount
          currencyCode
        }
        compareAtPrice {
          amount
          currencyCode
        }
        image {
          url
          altText
          width
          height
        }
      }
      variants(first: 250) {
        nodes {
          id
          availableForSale
          selectedOptions {
            name
            value
          }
          price {
            amount
            currencyCode
          }
        }
      }
    }
  }
` as const;

export async function loader({ params, request, context }: LoaderFunctionArgs) {
  const { handle } = params;
  const { storefront } = context;
  const selectedOptions = getSelectedProductOptions(request);

  const { product } = await storefront.query(PRODUCT_QUERY, {
    variables: {
      handle,
      selectedOptions,
      country: storefront.i18n.country,
      language: storefront.i18n.language,
    },
    cache: storefront.CacheShort(),
  });

  if (!product) {
    throw new Response('Not Found', { status: 404 });
  }

  return json({ product });
}

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: data?.product.title },
    {
      name: 'description',
      content: data?.product.descriptionHtml.slice(0, 160),
    },
  ];
};

export default function ProductPage() {
  const { product } = useLoaderData<typeof loader>();
  const { selectedVariant } = product;

  return (
    <div className="product">
      <h1>{product.title}</h1>
      <ProductPrice
        price={selectedVariant?.price}
        compareAtPrice={selectedVariant?.compareAtPrice}
      />
      <AddToCartButton
        disabled={!selectedVariant?.availableForSale}
        variantId={selectedVariant?.id}
      >
        {selectedVariant?.availableForSale ? 'В корзину' : 'Нет в наличии'}
      </AddToCartButton>
      <Analytics.ProductView
        data={{
          products: [
            {
              id: product.id,
              title: product.title,
              price: selectedVariant?.price.amount ?? '0',
              vendor: '',
              variantId: selectedVariant?.id ?? '',
              variantTitle:
                selectedVariant?.selectedOptions
                  .map((o) => o.value)
                  .join(' / ') ?? '',
              quantity: 1,
            },
          ],
        }}
      />
    </div>
  );
}

Интеграция с CMS:

Для управления контентом (баннеры, лендинги, блог) рядом с Hydrogen используется headless CMS. Запросы к CMS делаются в loader параллельно с запросами к Shopify:

export async function loader({ context }: LoaderFunctionArgs) {
  const [{ product }, { hero }] = await Promise.all([
    context.storefront.query(PRODUCT_QUERY, { variables }),
    fetchFromCMS('home-hero'),
  ]);
  return json({ product, hero });
}

Как происходит миграция на Hydrogen?

Миграция с Liquid-темы — это перестройка фронтенда с нуля. Мы создаём новый проект Hydrogen, переносим логику компонентов и настраиваем кеширование. Бэкенд Shopify остаётся без изменений. Рекомендуем начинать с ключевых страниц: каталог, продукт, корзина — и поэтапно расширять функционал.

Процесс работы и типичные ошибки

1. Аналитика: аудит текущей производительности, расчёт метрик Core Web Vitals, выявление узких мест.
2. Проектирование: архитектура headless-витрины, выбор стратегий кеширования, схема данных.
3. Реализация: разработка компонентов, роутов, интеграция с CMS и сторонними сервисами.
4. Тестирование: нагрузочное тестирование, проверка LCP, CLS, INP, A/B-тесты.
5. Деплой: настройка CI/CD на Oxygen или Vercel, мониторинг логов.

Типичные ошибки при миграции на Hydrogen:

• Игнорирование edge-кеширования: без правильных стратегий LCP может остаться высоким.
• Неправильная настройка CacheShort для корзины — приводит к устаревшим данным.
• Отсутствие fallback для потокового рендеринга — критично при медленных API.
• Забывают про Suspense для динамических блоков, ухудшая INP.

Что вы получаете в результате?

• Готовую headless-витрину с интеграцией Shopify и CMS.
• Документацию по архитектуре и настройке кеширования.
• Доступы к репозиторию, хостингу и админ-панели.
• Обучение команды по работе с Hydrogen.
• Поддержку в течение 2 недель после деплоя.

Сроки и стоимость

Ориентировочные сроки разработки:

• MVP (каталог, продукт, корзина, чекаут): 4–6 недель.
• Полноценный проект с CMS, мультирынком, кастомной аналитикой: 2–4 месяца.

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