Milano Calçados
Moda e calçados · 2024 · 5 meses
Migração de VTEX CMS para VTEX IO: loja mais rápida e pronta para o headless, numa rede de 33 lojas em 5 estados.
Storefronts de alta performance, feitos para converter.
Frontend desacoplado, SEO técnico e UX à altura das melhores lojas, com VTEX FastStore, Shopify Hydrogen, Salesforce Composable Storefront e Next.js sobre qualquer engine API-first.
Headless separa a vitrine do motor de commerce. O time de front trabalha em stack moderna, a plataforma segue cuidando de catálogo, pedido e pagamento, e cada camada evolui no próprio ritmo.
As camadas de um stack headless
Front no edge, camada de APIs com contrato estável e o commerce engine como cérebro do pedido. Cada camada tem responsabilidade clara e evolui sozinha.
Web e PWANavegador e app instalável
Infra edgeCDN, SSG/ISR e cache
Storefront (head)Next.js, Remix ou Hydrogen
App e PDVMesmas APIs, outra cabeça
CMS headlessConteúdo e landing pages
Camada de APIsREST e GraphQL versionados
Commerce engineCatálogo, pedido, estoque
ERP e fiscalIntegrações inalteradas
WMS e TMSArmazém e transporte
- Web e PWANavegador e app instalável
- Infra edgeCDN, SSG/ISR e cache
- Storefront (head)Next.js, Remix ou Hydrogen
- CMS headlessConteúdo e landing pages
- App e PDVMesmas APIs, outra cabeça
- Camada de APIsREST e GraphQL versionados
- Commerce engineCatálogo, pedido, estoque
- ERP e fiscalIntegrações inalteradas
- WMS e TMSArmazém e transporte
Arquitetura de referência. O framework e o CMS mudam conforme a plataforma de commerce e a stack que a empresa já usa.
O que entregamos em headless
Quatro frentes tocadas pelo mesmo squad, do storefront à operação depois do go-live.
Storefront headless
Frontend desacoplado, em stack moderna, rodando no edge e consumindo as APIs da plataforma.
- Storefronts em Next.js, Remix, Astro e Hydrogen.
- VTEX FastStore, Shopify Hydrogen e Salesforce Composable Storefront.
- Customização visual sem as amarras de um tema.
- Deploys independentes em Vercel, Netlify ou Cloudflare.
SEO técnico e performance
HTML pré-renderizado, metadata dinâmica e dados estruturados em todas as páginas.
- SSG e ISR para milhares de páginas de produto e categoria.
- Imagens em AVIF e WebP com carregamento sob demanda.
- schema.org e dados estruturados nos resultados de busca.
- Core Web Vitals medidos com usuários reais, não só em laboratório.
PWA e multicanal
A mesma camada de APIs atende web, app, PWA e ponto de venda.
- PWA offline-first com instalação nativa.
- App mobile e PDV sobre as mesmas APIs do commerce.
- CMS headless no lugar do editor visual nativo.
- Integrações com ERP, WMS, TMS e fiscal preservadas.
Operação contínua
Depois do go-live, o storefront vira produto, com squad dedicado e evolução a cada sprint.
- Discovery, testes A/B e otimização de funil.
- Personalização, recomendação e IA aplicadas à vitrine.
- Monitoramento contínuo e resposta a incidentes.
- Novos componentes entregues a cada sprint.
O framework certo para o seu contexto
A escolha sai da plataforma de commerce, da maturidade do time de front e do tipo de catálogo, não de preferência por uma stack.
VTEX FastStoreStack composable oficial da VTEX, em Next.js e GraphQL, com SSG e ISR e integração nativa às APIs VTEX.
Shopify HydrogenFramework em Remix com hospedagem Oxygen, para marcas Shopify Plus que querem um storefront próprio.
Salesforce Composable StorefrontArquitetura de referência oficial do Salesforce Commerce Cloud, o antigo PWA Kit, em React com SCAPI.
Next.js CommerceTemplate open source da Vercel para commerce. Flexível, roda sobre qualquer engine headless.
RemixFramework full-stack focado nos fundamentos da web, com boa experiência de desenvolvimento e performance progressiva.
AstroArquitetura de ilhas, com o mínimo de JavaScript no cliente. Indicado para conteúdo e commerce leve.
Full-stack ou headless: o que muda
Seis dimensões para comparar o storefront nativo da plataforma com um front desacoplado.
Performance
No full-stack, a velocidade depende do tema e dos apps instalados. No headless, HTML pré-renderizado e cache no edge.
Customização visual
Limitada ao tema da plataforma no full-stack; livre no headless, componente a componente.
SEO técnico
Depende do tema no full-stack. No headless, metadata, dados estruturados e renderização ficam sob controle do time.
Curva de aprendizado
Baixa no full-stack. Média a alta no headless, que exige domínio de SSR, ISR, cache em edge e streaming.
Multicanal
Restrito no full-stack. Nativo no headless, com a mesma camada de APIs servindo web, app e ponto de venda.
Deploy independente
No full-stack, front e back sobem juntos. No headless, cada camada tem o próprio ciclo de deploy.
Onde o headless já roda
Um case público e cenários entregues pela CCX, descritos sem identificar os clientes.
Ler case
Moda multimarca
Cenário entregue · VTEX FastStore
Grupo de moda com três marcas migrou de um CMS monolítico para FastStore.
Varejo alimentício
Cenário entregue · PWA com checkout VTEX
Rede regional implementou um PWA headless com checkout VTEX: app instalável e modo offline para regiões com pouca conectividade.
Do diagnóstico ao storefront em produção
- 1
Diagnóstico técnico
Em até duas sessões, sem custo: arquitetura, framework, roadmap e estimativa de ganho em Core Web Vitals.
- 2
MVP
Home, listagem e página de produto no ar em 8 a 10 semanas.
- 3
Escopo completo
Catálogo complexo, várias marcas, B2B e integrações pesadas, em 3 a 6 meses ou mais.
- 4
Operação contínua
Squad dedicado, testes A/B, otimização de funil e monitoramento contínuo.
Perguntas frequentes sobre headless commerce
O que é headless commerce?
É um modelo de arquitetura em que o frontend, o storefront, fica totalmente desacoplado do backend de commerce. O storefront consome APIs para exibir catálogo, carrinho, busca e checkout, o que permite usar tecnologias modernas, como Next.js, React ou Vue, sem depender das telas nativas da plataforma.
Qual a vantagem de adotar headless?
Melhor desempenho em Core Web Vitals, liberdade visual, a mesma camada de APIs para web, app, PWA e ponto de venda, ciclos de deploy independentes do backend e espaço para testar e otimizar a experiência sem mexer no núcleo do commerce.
Headless é o mesmo que composable commerce?
Não. Headless separa frontend e backend; composable vai além e divide o backend em vários serviços. Uma loja pode ser headless com backend monolítico (VTEX tradicional com Next.js) ou headless e composable (FastStore com Algolia, Contentful e Stripe). Veja a página de composable commerce.
VTEX FastStore é headless?
Sim. FastStore é o framework headless e composable oficial da VTEX, baseado em Next.js, otimizado para Core Web Vitals, com SSG e ISR nativos e integração direta com as APIs VTEX. É a evolução natural para marcas VTEX que querem alta performance.
Posso usar Shopify Hydrogen no Brasil?
Sim. Hydrogen é o framework headless oficial da Shopify, baseado em Remix, e funciona com Shopify Plus no Brasil. A CCX já implementa Hydrogen em lojas brasileiras integradas a meios de pagamento locais, NF-e e ERPs.
Quanto demora um projeto headless?
Projetos típicos levam de 3 a 6 meses. MVPs focados em home, listagem e página de produto podem sair em 8 a 10 semanas. Escopos completos, com catálogo complexo, várias marcas, B2B ou integrações pesadas, costumam passar de 6 meses.
O SEO não piora num storefront headless?
Pelo contrário: bem implementado, o SEO melhora. Next.js e FastStore usam SSG e ISR para entregar HTML pré-renderizado, com metadata rica, dados estruturados e Core Web Vitals no verde.
Preciso refazer o ERP ou o SAP para migrar?
Não. O headless afeta o storefront e a camada de commerce. As integrações com ERP, WMS, TMS e sistemas fiscais continuam como estão; trocamos a camada visual e, às vezes, parte da orquestração de pedidos.
Guia de headless commerce
Por que o headless virou padrão, o que ele custa de verdade e como operar o storefront depois do go-live.
Por que o headless virou padrão no commerce moderno
Há dez anos, usar o storefront pronto da plataforma era vantagem: menos código, menos custo e lançamento mais rápido. Com os Core Web Vitals pesando no ranking do Google, a maior parte do tráfego no celular e a disputa visual cada vez mais sofisticada, a conta mudou.
Storefronts nativos raramente carregam rápido sem muita customização, e customizar um monólito é caro, lento e frágil. No headless, o time de front trabalha em stack moderna (Next.js, Remix, Hydrogen) e o commerce engine segue fazendo o que faz bem: catálogo, pedido e pagamento.
Os trade-offs reais de adotar headless
Headless não é almoço grátis. O time precisa dominar front moderno, com SSR, SSG, ISR, cache em edge e streaming, governar contratos de API e lidar com versionamento. O custo inicial sobe, e recursos prontos da plataforma, como editor visual e preview nativo, dão lugar a um CMS headless.
A CCX avalia com honestidade se a empresa tem maturidade para colher o retorno. Quando tem, o ganho em performance, SEO e agilidade é grande. Quando não tem, um storefront nativo otimizado pode ser o caminho mais prudente.
SEO e performance em primeiro lugar
Next.js e FastStore geram milhares de páginas de produto e categoria com HTML pronto no servidor, via SSG e ISR. Imagens saem em AVIF ou WebP com carregamento sob demanda, a metadata é dinâmica e os dados estruturados de schema.org aparecem nos resultados de busca.
A CCX instrumenta o monitoramento de usuários reais, com Vercel Speed Insights ou Datadog, para acompanhar o comportamento real da loja, não só o laboratório.
Operação contínua e evolução do produto
Migrar para headless não termina no go-live. O storefront vira produto contínuo, com squad dedicado, ciclos de discovery, testes A/B, otimização de funil e novos componentes a cada sprint.
A CCX oferece modelos de operação pós-go-live que cobrem evolução e resposta a incidentes. PWA, modo offline, experimentos, personalização, recomendação e IA ficam mais simples de implantar nessa stack.
Desenhe o seu storefront headless com a CCX.
Trinta minutos com um engenheiro da CCX, sem custo, para revisar a arquitetura atual e sair com framework, roadmap de entrega e estimativa de ganho em Core Web Vitals.