Headless commerce

O que é headless commerce?

O headless commerce é uma arquitetura onde o storefront (a camada de apresentação que os clientes veem) é desacoplado do backend de comércio (produtos, preços, carrinho e pedidos). As duas camadas se comunicam através de APIs, em vez de estarem agrupadas em um único sistema. “Headless” (sem cabeça) significa que o backend roda sem uma “cabeça” integrada própria — o frontend é construído separadamente e busca dados através da API.

Por que o headless commerce é importante?

Com um frontend independente, você pode construir exatamente a experiência que sua marca precisa, sem ficar preso à estrutura padrão de um tema. Isso geralmente significa melhor desempenho e flexibilidade, além de facilitar a entrega do mesmo conteúdo para web, aplicativo e outros canais a partir de um único backend. A desvantagem é um aumento significativo na complexidade técnica e no custo de desenvolvimento, pois você mesmo precisa construir e manter o frontend.

Casos de uso comuns

• Marcas que desejam uma loja única e rápida e dispõem de recursos de desenvolvedor para isso.
• Cenários omnichannel onde web, aplicativo móvel e loja física compartilham os mesmos dados de produto.
• Sites ricos em conteúdo construídos em um CMS separado integrado acima dos dados de comércio.
• Empresas que otimizam os Core Web Vitals sem as limitações de um tema.

Perspectiva da Shopify

Na Shopify, o headless é normalmente construído com o Hydrogen (framework React da Shopify) hospedado no Oxygen, consumindo dados via Storefront API (GraphQL). O tema clássico em Liquid deixa de renderizar o storefront. Note que o processo de finalização de compra (checkout) ainda roda no checkout hospedado pela Shopify por motivos de segurança e PCI — você substitui o frontend, não o fluxo de pagamento.