Architektura headless Shopify w React — nasze autorskie podejście

Sklepy headless na Shopify budujemy według własnego modelu trzywarstwowego — Edge → Sync → Core — który rozdziela odpowiedzialności tak, żeby żadna pojedyncza warstwa nie stała się wąskim gardłem wydajności ani kosztu utrzymania.

Warstwa 1 — Edge

Strony katalogowe (kategorie, produkty, treści marketingowe) renderujemy statycznie albo przyrostowo (ISR) i serwujemy z sieci brzegowej (CDN), jak najbliżej użytkownika. Ceny i stany magazynowe — dane, które zmieniają się często — nie są częścią tego statycznego renderu; dociągamy je osobno, żeby nie unieważniać całej strony przy każdej zmianie ceny.

Warstwa 2 — Synchronizacja zdarzeniowa

Zamiast odpytywać Shopify o zmiany (polling), nasłuchujemy webhooków (products/update, inventory_levels/update). Gdy przychodzi zdarzenie, unieważniamy w cache wyłącznie ten jeden zasób, którego dotyczy — nie cały katalog. To podejście „różnicowe" (differencing) drastycznie zmniejsza liczbę przebudowań i utrzymuje witrynę aktualną praktycznie w czasie rzeczywistym, bez kosztu pełnego rebuildu.

Warstwa 3 — Commerce core

Dane produktowe i logikę koszyka pobieramy z Storefront API Shopify (GraphQL). Przykładowe zapytanie o produkt po slugu:

query ProductByHandle($handle: String!) {
  product(handle: $handle) {
    id
    title
    priceRange { minVariantPrice { amount currencyCode } }
    images(first: 1) { nodes { url altText } }
  }
}

Koszyk trzymamy po stronie Shopify (identyfikator koszyka w ciasteczku), a finalizację zamówienia w większości wdrożeń kierujemy na hostowany checkout Shopify — to świadoma decyzja, nie ograniczenie: zachowuje zgodność PCI DSS i pełne wsparcie metod płatności bez budowania własnej, ryzykownej warstwy płatniczej od zera.

Dlaczego to ogranicza koszty utrzymania

Rewalidacja zdarzeniowa zamiast pełnych przebudowań oznacza mniej operacji, mniejszy ruch do API i mniej okazji do błędu. Mniej własnego kodu backendowego (checkout, płatności, magazyn zostają w Shopify) to mniejsza powierzchnia, na której może coś się zepsuć — a każda z trzech warstw skaluje się i jest debugowana niezależnie od pozostałych.

Co to daje w liczbach wydajności i konwersji, opisujemy w artykule o danych i badaniach. Jeśli zastanawiasz się, czy Twój sklep w ogóle kwalifikuje się do takiej migracji, zacznij od wprowadzenia do headless Shopify.