Shopify Hydrogen vs Next.js Commerce: яку архітектуру обрати для магазину у 2026

Два React-архітектурних патерни домінують сьогодні в headless-розробці для Shopify: 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