Анотація. Headless-парадигма в екосистемі Shopify сформувала два домінуючих React-архітектурних патерни: Shopify Hydrogen - opinionated, Shopify-нативний фреймворк на Remix (React Router v7), що деплоїться виключно на Oxygen (edge-платформа Shopify на базі Cloudflare Workers) - та Next.js Commerce - компонований патерн від Vercel на Next.js App Router з React Server Components, що деплоїться на будь-який Node.js-хост. Цей аналіз охоплює шість архітектурних вимірів: runtime та модель деплою, дизайн шару даних, стратегію кешування та рендерингу, продуктивність у польових даних CrUX, Developer Experience та широту екосистеми, а також TCO з урахуванням ризику вендор-локіну.
Частина I - Ландшафт headless-комерції
Headless-парадигма відокремлює frontend-шар представлення від commerce-бекенду: каталогу, кошика, оформлення замовлення, інвентарю та даних про покупців. Frontend споживає commerce-примітиви через API, а не рендерить шаблони платформи. Це розділення дає два стратегічних переваги: повний інженерний контроль над продуктивністю та UX - і свободу компонувати best-of-breed сервіси незалежно від нативних можливостей платформи.
В екосистемі Shopify сформувалися дві школи думки. Перша - Shopify Hydrogen: глибока нативна інтеграція з API, аналітикою та B2B-примітивами Shopify дає найкращу довгострокову продуктивність для committed Shopify-мерчантів. Друга - Next.js Commerce: backend-агностична компонованість і архітектурна портованість дають найкращу довгострокову гнучкість для команд, чия commerce-стратегія може еволюціонувати. Ключовий висновок: продуктивність обох фреймворків при коректній реалізації знаходиться в одному порядку величин. Вибір - стратегічне архітектурне рішення, а не оптимізаційне.
Частина II - Архітектура Shopify Hydrogen
Модель loader/action (Remix). Функції loader виконуються на сервері до рендерингу компонента, отримують дані та повертають типізовані відповіді. Примітив defer() дозволяє стримити некритичні дані через Suspense-межі. Функції action обробляють мутації без клієнтських fetch-викликів. Аналога ISR/PPR у Hydrogen немає - кожен маршрут або динамічно рендериться на edge, або віддається з CDN-кешу.
Oxygen: V8 isolate runtime. Надається безкоштовно для всіх Hydrogen-деплоїв. Заснований на Cloudflare Workers: <1ms cold start (V8 isolates не потребують запуску окремого процесу), глобальне виконання на 300+ PoP Cloudflare, доступ до Cloudflare KV. Обмеження: лише Web API-поверхня, Node.js built-ins недоступні - найчастіше джерело friction при міграції.
Нативні API-клієнти Shopify. Hydrogen постачає типізовані клієнти: createStorefrontClient з APQ (стиснення GraphQL-запитів до SHA-256 хешу), createCustomerAccountClient (OAuth 2.0 PKCE для headless-аутентифікації), Cart API з оптимістичними мутаціями, хуки аналітики - сумісні з Shopify Analytics, GA4 та Meta Pixel без tag manager.
Частина III - Архітектура Next.js Commerce
RSC як zero-cost шар даних. Кожна сторінка продукту, колекції та пошуку - RSC-дерево. Завантаження даних відбувається на сервері; серверні компоненти не вносять жодного байту в клієнтський бандл. Паралельне завантаження даних імпліцитне: <ProductImages>, <PriceBlock> і <InventoryStatus> надсилають GraphQL-запити одночасно.
Трирівневий кеш Next.js 15. Full Route Cache кешує повний HTML-відповідь на CDN-шарі - TTFB при влученні в кеш 15–40ms. Data Cache кешує окремі fetch()-виклики з тегами - весь шар даних Shopify інвалідується одним викликом revalidateTag('shopify') з webhook. Partial Prerendering (PPR): статична оболонка сторінки кешується на CDN з нескінченним TTL - TTFB <50ms; динамічні секції (інвентар, ціни) стримуються з origin у межах 200–400ms.
Backend-агностицизм: патерн адаптера. Всі Shopify API-виклики інкапсульовані в lib/shopify/. Заміна Shopify на Medusa або BigCommerce потребує реалізації того ж інтерфейсу в lib/medusa/ з оновленням одного імпорту. Компонентне дерево не змінюється. Репозиторій vercel/commerce підтримує провайдери для Shopify, BigCommerce та Saleor.
Частина IV - Бенчмарки та фреймворк рішень
- TTFB (p75): Hydrogen на Oxygen: 45–90ms. Next.js Commerce з PPR: 20–50ms (CDN-кешована оболонка) + 180–350ms для першого динамічного чанку.
- LCP (p75): Hydrogen: 1.2–1.9s. Next.js Commerce з PPR: 0.8–1.4s. Перевага PPR найзначніша на мобільних у регіонах з латентністю >150ms.
- Початковий JS-бандл (gzip): Hydrogen: ~185–210 KB. Next.js Commerce: ~110–145 KB.
- Локін Hydrogen: Oxygen runtime (V8 isolate), Remix-роутер, нативні клієнти Shopify - все глибоко пов'язано з екосистемою Shopify.
- Локін Next.js Commerce:
lib/shopifyадаптер замінний за 2–5 інженерних днів. Повна портованість деплою.
Обирайте Hydrogen: бекенд Shopify на горизонті 3+ років; нативні B2B-можливості; експертиза команди у Remix; глибока інтеграція з Shopify Analytics.
Обирайте Next.js Commerce: потрібна або можлива гнучкість бекенду; команда на Next.js/RSC; інтеграція контент-комерція (блог, CMS); функції поза e-commerce (AI, SaaS); портованість деплою.
Евристика: якщо п'ятирічний roadmap - лише Shopify, обирайте Hydrogen; якщо є ймовірність еволюції бекенду - обирайте Next.js Commerce.
Для архітектурного консалтингу або реалізації headless-міграції - сервіс архітектури фронтенду | кейси | обговорити завдання.
Джерела
- Shopify. 'Hydrogen Documentation' (2026): https://shopify.dev/docs/storefronts/headless/hydrogen
- Shopify Engineering. 'Hydrogen 2.0: Built on Remix' (2024): https://shopify.engineering/hydrogen-2
- Vercel. 'Next.js Commerce': https://github.com/vercel/commerce
- React Router. 'React Router v7 Docs' (2025): https://reactrouter.com/docs
- Cloudflare. 'How Workers Works': https://developers.cloudflare.com/workers/learning/how-workers-works
- Vercel. 'Partial Prerendering in Next.js 15': https://vercel.com/blog/partial-prerendering
- Shopify. 'Storefront API Reference': https://shopify.dev/docs/api/storefront
- Google. 'Core Web Vitals': https://web.dev/articles/vitals