Headless commerce: what it is, how it works and when to use it

Headless commerce separates the frontend (what the customer sees) from the backend (where data lives). Instead of a monolithic system controlling everything, you have an e-commerce backend exposing APIs and an independent frontend consuming that data. The result can be superior performance and total flexibility, or unnecessary complexity. It depends on context.

Monolith vs headless in practice

In a monolith (VTEX CMS, Shopify with Liquid), the backend generates the HTML the customer sees. Everything is coupled: changing the frontend requires respecting backend rules. In headless, the frontend is a separate project (React, Next.js, Fresh) that fetches data via API. You have total frontend freedom but need to build and maintain two systems.

Real benefits

Performance: optimized frontend with SSR, edge rendering, minimal bundle. Consistent Lighthouse 90+. Flexibility: use any framework (React, Preact, Vue, Svelte). Omnichannel: same backend feeds website, mobile app, kiosk and marketplace. Independent teams: frontend and backend evolve at different paces without blocking each other.

Honest trade-offs

Complexity: two projects to maintain instead of one. Cost: headless development costs 2-3x more than a theme. Team: needs experienced frontend developers. Features: native platform features (preview, visual editor) may not work. Debugging: problems can be in the frontend, backend or the API between them.

Practical examples

deco.cx: headless frontend with visual editor, ideal for VTEX and Shopify. Hydrogen: Shopify's headless framework with Remix, deploy on Oxygen. Custom Next.js: maximum flexibility, consumes any API. Each approach has its trade-offs. deco.cx and Hydrogen reduce complexity with opinionated frameworks. Pure Next.js gives more freedom but requires more decisions.

When headless is overkill

If the store is simple, the catalog is small, the team has no modern frontend experience, or the budget is limited, a well-built theme (Liquid, Store Framework, Nuvemshop) is more efficient. Headless is justified when performance is a competitive differentiator, when the frontend needs customization impossible in the monolith, or when the operation needs real omnichannel.