Shopify Hydrogen: quando vale a pena ir headless

Hydrogen é o framework headless do Shopify, construído sobre Remix (React). Ele permite criar storefronts customizados que consomem a Storefront API do Shopify. O resultado é controle total sobre o frontend com performance de edge via Oxygen (hosting do Shopify). Mas vale a pena abrir mão da simplicidade do Liquid?

Como funciona

Hydrogen é um projeto Remix com helpers específicos para Shopify: hooks para cart, product, collection e customer. O deploy acontece no Oxygen (CDN global do Shopify) ou em qualquer provedor Node.js. As páginas são server-rendered com streaming, o que garante LCP rápido. O Storefront API fornece dados de catálogo, checkout e conta do cliente via GraphQL.

Hydrogen vs Liquid: trade-offs

Liquid é simples: temas prontos, editor visual, deploy em um clique. Hydrogen exige time React, build pipeline, hosting e mais manutenção. A vantagem do Hydrogen: experiências completamente customizadas, performance superior, integração com qualquer backend adicional e reutilização de componentes React. A desvantagem: custo de desenvolvimento 2-3x maior.

Quando faz sentido

Hydrogen faz sentido quando: a marca precisa de uma experiência visual única que o Liquid não entrega, a performance é diferencial competitivo, o time já trabalha com React, ou a loja precisa integrar dados de múltiplas fontes (CMS, PIM, ERP) no frontend.

Quando não faz sentido

Não faz sentido quando: o orçamento é limitado, o time não tem experiência React, a loja é simples e um tema Liquid bem feito resolve, ou a operação não tem volume que justifique o investimento em infraestrutura headless.