Vercel e Shopify reconstroem o framework Hydrogen como open source e agnóstico de runtime

Vercel e Shopify anunciaram na conferência Vercel Ship 26 em Nova York que estão reconstruindo completamente o framework Hydrogen para comércio sem cabeceira, tornando-o código aberto e agnóstico em relação ao runtime — agora ele será capaz de executar em qualquer ambiente onde JavaScript seja executado, não apenas em conjunção com um stack específico.

O que vai mudar na nova arquitetura

Hydrogen anteriormente simplificou o lançamento de vitrines sem cabeceira mas era difícil de portar entre stacks. A nova versão é aberta e não está vinculada a um runtime: os desenvolvedores poderão construir uma loja em Svelte, Nuxt, Next.js ou em seu próprio framework.

• Anúncio feito na conferência Vercel Ship 26 em Nova York
• Nova versão do Hydrogen — código aberto e agnóstico ao runtime
• Svelte, Nuxt, Next.js e frameworks arbitrários suportados
• Arquitetura dividida em três camadas: core, client e server

Como a camada core é estruturada

Anteriormente, cada equipe escrevia código "adesivo" por conta própria para trabalhar com a API Shopify — por exemplo, para formatar preços: a API retorna não um número, mas seu próprio tipo MoneyV2, onde o valor é codificado como uma string. Agora essa lógica é extraída para uma camada core comum baseada em Intl.NumberFormat padrão: o desenvolvedor chama a função formatMoney pronta para usar e obtém um preço formatado sem escrever e manter seu próprio envoltório. Quando a API Shopify muda, a atualização se torna trivial, não uma correção manual em cada projeto.

O que a camada client faz

A camada client lida com soluções repetidas para renderização — principalmente o estado do carrinho de compras. Anteriormente, todos que construíam um aplicativo comercial escreviam sua própria versão de um provedor de carrinho: métodos para adicionar, atualizar e remover itens, aplicar descontos, trabalhar com moeda, estados de erro, sincronização entre abas do navegador. Na nova versão do Hydrogen, o estado do carrinho é conectado por uma importação simples do gancho useCart, não reescrito do zero em cada projeto.

O que isso significa

Vercel e Shopify extraem a lógica repetida de lojas online — formatação de preço, estado do carrinho — em uma camada aberta comum que é corrigida e melhorada uma vez para todos, em vez de cada equipe resolver as mesmas tarefas repetidas vezes em seu próprio stack.

Perguntas frequentes

Em quais frameworks posso usar o novo Hydrogen?

O framework é agnóstico ao runtime e explicitamente suporta Svelte, Nuxt, Next.js, e também permite conectar seu próprio framework de desenvolvedor.

De quais camadas consiste a nova arquitetura Hydrogen?

Os desenvolvedores distinguem três camadas: core (lógica geral para trabalhar com a API Shopify), client (estado da UI e carrinho) e server.