Headless WooCommerce betyder att du använder WooCommerce för produkter, ordrar, betalning och lager, men bygger frontend separat i React, Next.js eller Vue. Butiken blir snabbare, mer flexibel och säkrare.
Varför headless?
WooCommerce-frontend (PHP-renderade produktsidor) är inte känd för att vara snabb. En React-frontend med statiska sidor eller server-side rendering kan vara tio gånger snabbare. Dessutom får du frihet att designa exakt det gränssnitt du vill utan WooCommerce-templates begränsningar.
WooCommerce Store API
Sedan WooCommerce Blocks har Store API blivit det officiella sättet att bygga headless checkout. Det hanterar varukorg, kassa, betalning och kundkonto utan att behöva gå genom den traditionella PHP-kassasidan.
Next.js Commerce
Vercels referensimplementation. Snabb, snygg, men kräver anpassning. Bra som startpunkt. Produktsidor renderas statiskt med ISR (Incremental Static Regeneration), varukorgen är client-side.
Utmaningar
Betalningsintegrationer: Stripe fungerar bra headless. Klarna Checkout kräver att deras widget renderas, vilket kan vara knepigt i en SPA. SEO: Next.js med SSR löser det, men rent client-side React kräver extra arbete.
Plugin-kompatibilitet: många WooCommerce-plugins förutsätter PHP-rendering. Product Add-Ons, dynamisk prissättning, vissa fraktkalkylatorer. De behöver antingen API-stöd eller ombyggas.
När det lönar sig
Hög trafik, krav på unik UX, utvecklarteam som kan underhålla frontend. Om du har 200 produkter och en person som sköter butiken: det är inte värt komplexiteten. Om du har 10 000 produkter, hög trafik och ett dev-team: det är en gamechanger.