Headless commerce
Headless commerce je prístup k e-commerce, kde je obchodný backend — katalóg, ceny, košík, objednávky, platby — oddelený od prezentačnej vrstvy a poskytuje svoje funkcie cez API. Frontend (web, mobilná aplikácia, kiosk, B2B portál) sa stavia samostatne a backend volá cez toto API.
Ako to funguje
Klasický e-shop (typicky WooCommerce alebo staršie verzie Shopify) je „monolit“: šablóna, ktorá zobrazuje stránky, a obchodná logika za ňou sú jeden celok. Headless to rozdelí — backend rieši „čo“ (aké produkty, za koľko, čo je v košíku, ako spracovať objednávku) a vystavuje to cez API; „ako“ to vyzerá a kde sa to zobrazí, je vec samostatného frontendu. Backendom môže byť hotová headless platforma (Shopify so Storefront API, commercetools, Saleor, Medusa) alebo vlastný; frontendom je zvyčajne aplikácia v Next.js alebo podobnom frameworku.
Výhoda je voľnosť a výkon. Frontend nie ste viazaní stavať v jazyku a šablónovom systéme platformy — postavíte rýchly, na mieru navrhnutý web (Core Web Vitals v zelenom, žiadne nafúknuté témy) a rovnaký backend môžete obslúžiť z viacerých kanálov naraz: verejný e-shop, B2B časť za prihlásením, mobilná aplikácia. Cena je vyššia počiatočná zložitosť: namiesto jednej inštalácie spravujete dve veci (backend + frontend) a prepojenie medzi nimi. Pre malý jednoduchý e-shop je to overkill. Oplatí sa, keď výkon alebo dizajn frontendu naráža na hranice platformy, keď potrebujete viac kanálov nad jedným katalógom, alebo keď je e-commerce dôležitou súčasťou produktu a chcete nad ním plnú kontrolu.
Pre B2B a veľkoobchod je headless častá voľba práve preto, že B2B logika (cenové hladiny, skryté ceny, množstevné zľavy, špecifický objednávkový proces) sa lepšie rieši na strane backendu a frontend si môžete prispôsobiť tomu, ako partneri reálne nakupujú — alebo mať dva frontendy nad jedným backendom (verejný a partnerský). Strange Loops stavia headless e-shopy aj B2B portály ako webové aplikácie v Next.js napojené na hotový alebo vlastný commerce backend; bližšie to rozoberajú služby e-commerce na mieru a B2B a veľkoobchodný e-shop.
Z našej praxe
Headless nie je „lepšie“ — je iné. Ak máte alebo plánujete bežný e-shop a šablónová platforma vám stačí, headless si nepýtajte; je to viac pohyblivých častí. Headless dáva zmysel, keď narážate na limity (výkon, dizajn, viac kanálov) alebo keď je e-commerce jadrom produktu. Dobrý medzikrok je hotový headless backend (Shopify Storefront API, Saleor, Medusa) + vlastný frontend — voľnosť na prezentácii bez toho, aby ste stavali aj platobnú a objednávkovú logiku od nuly.
Kedy to potrebujete
- Súčasný e-shop na šablónovej platforme je pomalý alebo dizajnovo obmedzujúci a treba rýchly frontend na mieru bez výmeny celého backendu.
- Jeden katalóg treba obslúžiť z viacerých kanálov — verejný e-shop, B2B časť za prihlásením, mobilná aplikácia.
- B2B logika (cenové hladiny, skryté ceny, množstevné zľavy) sa nezmestí do bežnej platformy a rieši sa na strane backendu.
- E-commerce je dôležitou súčasťou produktu a firma chce nad frontendom plnú kontrolu.
Najčastejšie otázky
Je headless commerce vždy lepšie ako klasický e-shop?
Nie. Pre malý jednoduchý e-shop je headless zbytočná zložitosť — spravujete dve veci namiesto jednej. Headless sa oplatí, keď klasická platforma naráža na limity (výkon, dizajn, viac kanálov) alebo keď je e-commerce jadrom produktu a chcete plnú kontrolu nad frontendom. Riešenie má zodpovedať potrebe.
Musíme si stavať vlastný commerce backend?
Nie nutne. Časté riešenie je hotový headless backend — Shopify cez Storefront API, commercetools, Saleor, Medusa — a k nemu vlastný frontend. Dostanete voľnosť na prezentácii a viac kanálov nad jedným katalógom bez toho, aby ste stavali objednávkovú, platobnú a katalógovú logiku od nuly. Vlastný backend má zmysel pri naozaj špecifických požiadavkách.
Ako headless súvisí s B2B e-shopom?
B2B e-shopy sú často headless, pretože veľkoobchodná logika (skryté ceny, cenové hladiny, množstevné zľavy, špecifický objednávkový proces) sa lepšie rieši na backende a frontend si môžete prispôsobiť tomu, ako partneri nakupujú — prípadne mať verejný aj partnerský frontend nad jedným backendom. Bližšie to rozoberá služba B2B a veľkoobchodný e-shop.
Súvisiace pojmy
Next.js
Next.js je open-source React framework od Vercel, ktorý dodáva produkčne pripravené riešenia pre routing, server-side rendering, optimalizáciu výkonu a deployment — všetko, čo holý React neobsahuje.
API
API (Application Programming Interface) je formálne definované rozhranie, cez ktoré jeden softvér komunikuje s druhým. Webové API typicky prenáša dáta cez HTTP vo formáte JSON — klient pošle požiadavku, server vráti odpoveď, pričom ani jeden nemusí vedieť nič o vnútornej implementácii toho druhého.
Core Web Vitals
Core Web Vitals sú tri metriky od Google, ktoré merajú reálny zážitok používateľa na webstránke: LCP (rýchlosť načítania hlavného obsahu), INP (odozva na interakciu) a CLS (vizuálna stabilita stránky počas načítavania). Google ich používa ako priamy faktor pre ranking.
Potrebujete s tým pomôcť?
Ak riešite niečo z toho, čo tu opisujeme, ozvite sa. Povieme vám, či a ako vieme pomôcť.