O que é Shopify Hydrogen e por que você deve se importar com 2022?

Nos últimos anos, o comércio sem cabeça tornou-se uma tendência predominante de comércio eletrônico que deve mudar a maneira como o comércio online opera. Shopify, uma das principais plataformas de comércio eletrônico SaaS atuais, alavancou o comércio sem cabeça para o próximo nível com Shopify Hydrogen – sua tecnologia mais recente.

Neste artigo, descobriremos por que o Shopify Hydrogen será o divisor de águas no comércio sem cabeça e como os lojistas do Shopify podem se beneficiar muito com esta mais recente tecnologia do Shopify.

=> Leia mais: Melhores exemplos de loja sem cabeça Shopify

Comércio sem cabeça antes do Shopify Hydrogen

O comércio sem cabeça refere-se à infraestrutura na qual o front-end da sua loja online é desacoplado do back-end. Simplesmente entendendo, o comércio sem cabeça permite que você separe a camada da vitrine (a “cabeça”) da própria plataforma de comércio eletrônico (para torná-la “sem cabeça”).

Mas por que queremos separar o frontend do site de sua plataforma? Porque nos dá a máxima flexibilidade para conduzir uma experiência de compra rápida, suave, consistente e personalizada com facilidade.

Com a arquitetura tradicional, a vitrine e o back-end estão fortemente conectados e normalmente são executados como um único sistema, o que limita nosso design e sua funcionalidade. Enquanto isso, a abordagem sem cabeça permite que duas camadas separadas funcionem de forma independente e se comuniquem por meio de APIs. Portanto, você tem total capacidade de personalizar uma experiência de compra única e perfeita, mantendo intacto seu back-end existente.

Se você é novo nessa tecnologia, recomendamos alguns artigos abrangentes para uma melhor compreensão do comércio headless:

• O que é comércio sem cabeça?
• 15 melhores exemplos de comércio sem cabeça   

Sempre foi possível construir uma loja headless usando Shopify como plataforma de comércio eletrônico, utilizando StorefrontAPI. No entanto, ficar sem cabeça não vem sem desafios. Normalmente é mais caro e demorado com uma variedade de tarefas complicadas que precisam ser cumpridas. Além disso, exige mais tempo e esforço na manutenção, o que pode não ser uma ótima abordagem para os lojistas da Shopify que administram uma empresa pequena e em crescimento.

Shopify Hydrogen é a solução perfeita para eliminar todas essas complexidades e custos adicionais que acompanham o desenvolvimento de uma loja sem cabeça Shopify no passado. Não há necessidade de depender de integrações de terceiros, sistemas externos ou tecnologia adicional para personalizar sua vitrine da Shopify. A Shopify quer que a Hydrogen ofereça “experiências personalizadas e dinâmicas ao comprador, impulsionadas pela plataforma e APIs da Shopify”. É por isso que acredita-se que esta mais recente tecnologia Shopify seja o futuro do desenvolvimento sem cabeça.

O que é Shopify Hydrogen

Acreditamos que o futuro do comércio na web é rápido, pessoal e dinâmico – e o Hydrogen reflete como vemos essa visão ganhando vida.

Shopify Unite 2021

Shopify Hydrogen é uma estrutura baseada em React para criar a vitrine personalizada da Shopify. Ele inclui toda a estrutura, componentes e ferramentas que os desenvolvedores precisam para começar, construir rapidamente e entregar a melhor experiência de usuário personalizada.

O objetivo final do Hydrogen é oferecer mais flexibilidade e tempo para criar e personalizar sua loja Shopify sem limitações de front-end ou integração de software externo. Enquanto isso, toda a funcionalidade de comércio de back-end da Shopify ainda funciona sem problemas. Com isso, sua loja Shopify pode obter uma abordagem sem cabeça, sem a confusão e a complicação da integração de terceiros.

Hydrogen é a abordagem recomendada e opinativa da Shopify para oferecer uma experiência de usuário rápida, os melhores recursos de comerciante da categoria e uma excelente experiência de desenvolvedor. É a interseção entre comércio, UX e codificação.

Neste momento, o Hydrogen é totalmente de código aberto e você pode ajudar a construir o Hydrogen testando-o e enviando feedback para torná-lo melhor.

Como o Shopify Hydrogen funciona

Trabalhando com milhões de comerciantes em todo o mundo, a equipe de desenvolvedores da Shopify percebeu que o comércio eletrônico exigia uma experiência de usuário rápida e contínua que permanecesse personalizada e contextualizada ao mesmo tempo.

Embora essa abordagem pareça promissora, ela representa um grande desafio para os desenvolvedores que estão presos entre a aplicação de várias tecnologias para uma experiência de comércio fantástica e a garantia do desempenho do site. O Hydrogen mitiga esse problema introduzindo uma estrutura com uma variedade de tecnologias que permitem criar experiências de comércio dinâmicas sem abrir mão da velocidade do site.

O Hydrogen compreende um ambiente de início rápido com componentes específicos do comércio e ferramentas de desenvolvedor que estão prontas para serem utilizadas:

• Estrutura de hidrogênio : há um plug-in Vite que oferece renderização do lado do servidor (SSR), middleware de hidratação e transformações de código de componente do cliente.
• Componentes de IU de hidrogênio: componentes, ganchos e utilitários que oferecem suporte a recursos e conceitos que já existem na Shopify.

A estrutura de hidrogênio atua como blocos de construção que permitem alcançar o equilíbrio entre ótimas experiências de comércio e experiência do usuário. A entrega desses recursos forçou a Hydrogen a utilizar o maior potencial do React e do Vite, além de prestar muita atenção ao desenvolvimento de componentes otimizados e ferramentas de desenvolvedor.

Além disso, Shopify ajuda você a economizar tempo em andaimes e configuração do design da vitrine da Shopify, incluindo um modelo inicial que inicia sua vitrine em minutos. Como esse modelo processa a estrutura básica de arquivos de um projeto que já está integrado a uma loja da Shopify, você pode pular a configuração e começar a personalizar sua vitrine rapidamente.

Além do modelo inicial, o Hydrogen acelera o processo de desenvolvimento da vitrine com todos os componentes de interface do usuário incluídos que são criados em torno dos modelos de dados da Shopify. Essas peças podem ser integradas diretamente à API do Storefront para interagir com as APIs da Shopify ou quaisquer fontes de dados de terceiros.

TL;DR: Shopify Hydrogen ajuda os comerciantes a alavancar a experiência de comércio com sua estrutura e acelerar o processo de desenvolvimento da vitrine com seus componentes de interface do usuário prontos para uso. Com isso, você pode criar experiências de comércio dinâmicas sem abrir mão do desempenho do site.

Shopify Hidrogênio vs Líquido

• Liquid : uma linguagem de template escrita em Ruby e criada pela Shopify. Essa é a espinha dorsal de todos os temas da Shopify e é usada para carregar conteúdo dinâmico nas páginas da loja.
• Hidrogênio : uma estrutura para construir a vitrine sem cabeça da Shopify.

Embora muitos desenvolvedores muitas vezes se refiram a linguagem de template e framework de forma intercambiável, na verdade existem algumas diferenças sutis entre os dois.

Um framework é uma coleção de ferramentas e componentes prontos para criar aplicativos.

Enquanto isso, uma linguagem de modelo é usada para construir páginas da web que combinam conteúdo estático, que é o mesmo em várias páginas, e conteúdo dinâmico, que muda de uma página para outra. Os modelos se concentram em funcionalidades predeterminadas e têm menos opções de personalização em comparação com uma estrutura.

Pense desta forma: um modelo é como uma pintura por números e uma estrutura é mais como um conjunto LEGO.

No caso do Shopify, graças à linguagem do template, é possível reutilizar os elementos estáticos que definem o layout de uma página web, enquanto migra dinamicamente os dados de uma loja do Shopify para a página. Combinando o Liquid com outras linguagens de modelagem, como HTML, CSS, JavaScript, você pode criar e personalizar um tema da Shopify.

O Hydrogen inclui toda a estrutura, componentes e ferramentas necessárias para criar vitrines personalizadas da Shopify. Com sua estrutura e componentes de interface do usuário, o Hydrogen ajuda você a criar vitrines personalizadas que podem oferecer a melhor experiência do usuário.

Como o Liquid requer elementos estáticos e não estáticos para construir um tema, pode-se ver que o Liquid apresenta algumas limitações na personalização e desempenho da vitrine. Além disso, é demorado criar e personalizar um tema usando o Liquid. Portanto, o Hydrogen serve como a solução de próxima geração para vitrines baseadas em Shopify, graças à abertura infinitas de possibilidades para criar UX e UI de sites exclusivos. Prevê-se que o Hydrogen seja desenvolvido para substituir o Liquid no desenvolvimento da loja Shopify.

Neste momento, tanto o Liquid quanto o Hydrogen são totalmente de código aberto no GitHub para que todos possam baixar e experimentar.

Por que ficar sem cabeça com Shopify Hydrogen

1. Otimize o desempenho do site

Um dos benefícios óbvios de seguir a abordagem headless com Shopify Hydrogen é o excelente desempenho do site, especialmente a velocidade do site.

Ao separar o front-end de seu back-end, você adquire a capacidade de desbloquear uma velocidade de página de carregamento extremamente rápida, mantendo todo o conteúdo e funcionalidades dinâmicos no back-end. Mudar para Shopify Hydrogen pode ajudá-lo a reduzir a velocidade de carregamento da página de alguns segundos para milissegundos, aproveitando assim os Core Web Vitals da loja.

Em suma, a solução headless da Shopify permite que você forneça conteúdo totalmente personalizado e dinâmico que pode ser personalizado em tempo hábil, sem diminuir a velocidade do servidor e do seu site. Com isso, você pode satisfazer todos os visitantes e clientes que chegam à sua loja.

2. Melhor capacidade de escala

Outro problema comum que geralmente anda de mãos dadas com a otimização da velocidade do site é a escalabilidade. Antes do Hydrogen, os desenvolvedores lutavam para determinar a relação entre velocidade e experiência do site quando se trata de otimização do site.

Qualquer desenvolvedor experiente reconhecerá bem o fato de que pode ser descomplicado oferecer uma experiência de compra altamente interativa e personalizada com um desempenho da Web ultrarrápido se houver tráfego relativamente baixo. No entanto, à medida que sua loja cresce, o site não consegue lidar com um novo fluxo de visitantes todos os dias, levando a problemas de velocidade e desempenho ruim do site.

Agora, Shopify Hydrogen resolveu esse problema desde sua raiz com Shopify Oxygen – a solução global de hospedagem para vitrines Hydrogen que será lançada em 2022. Você não precisa depender de serviços de hospedagem de terceiros, pois sua loja Shopify será hospedada diretamente em Oxigênio.

Shopify investiu fortemente na estrutura global da Oxygen com mais de 100 locais de servidores em todo o mundo. O Oxygen garante que seus clientes sempre desfrutarão do carregamento instantâneo da loja, independentemente de suas localizações. Essa infraestrutura futura permite uma comunicação rápida entre o conteúdo dinâmico da vitrine e as estruturas de comércio, deixando as questões de velocidade e escalabilidade uma história do passado.

Shopify afirma que o Oxygen é a maneira mais rápida de implantar experiências de comércio apoiadas pela Shopify. A combinação de hidrogênio e oxigênio está abrindo caminho para o comércio moderno sem cabeça em um futuro próximo.

3. Mais liberdade de design

Como o Hydrogen segue uma abordagem sem cabeça que separa a vitrine do seu site Shopify do back-end que contém todos os dados e funcionalidades do site, ele apresenta mais flexibilidade e liberdade para criar e personalizar sua vitrine da maneira que você deseja. A capacidade de design com Shopify Hydrogen é infinita e você pode criar designs exclusivos de UX/UI para oferecer uma experiência de compra personalizada e dinâmica aos visitantes.

A utilização de uma ferramenta de criação de páginas especializada em vitrines de hidrogênio pode tornar o processo de design ainda mais rápido e suave. Os lojistas da Shopify podem simplesmente arrastar e soltar o layout do zero ou usar modelos e blocos pré-fabricados para criar páginas sem nenhuma habilidade de codificação ou design envolvida.

Além disso, como os front-ends e back-ends do seu site da Shopify se comunicam por meio da API, você pode fazer alterações no design do front-end livremente, sem se preocupar em complicar ou quebrar as funções de back-end, o que geralmente acontece com o comércio tradicional.

4. Excelente experiência comercial

Embora o marketing personalizado para negócios de comércio eletrônico não seja algo novo (tome as recomendações de produtos da Amazon como um exemplo popular), essa não é uma abordagem comum que as lojas sem headless podem adotar facilmente.

O Shopify Hydrogen com flexibilidades de front-end e CMS separado apresenta uma solução simples e leve que qualquer loja do Shopify pode utilizar. Você tem controle total sobre o design da vitrine e o gerenciamento de conteúdo para personalizar as vitrinas personalizadas para satisfazer os clientes. Além disso, a combinação de hidrogênio com oxigênio garante uma velocidade de carregamento de página de milissegundos, mantendo o desempenho da web estável.

Uma ótima experiência de comércio não deve visar apenas a satisfação dos clientes, mas equilibrar cuidadosamente a experiência do cliente e a capacidade da loja. Shopify Hydrogen ajuda você a ter uma experiência de comércio excepcional que pode satisfazer o desempenho da loja e a experiência do cliente ao mesmo tempo.

5. Desenvolvimento rápido

Ao utilizar a estrutura básica e os componentes de interface do usuário prontos para uso, o Shopify Hydrogen pode acelerar o desenvolvimento de front-end e, ao mesmo tempo, oferecer aos comerciantes uma capacidade infinita de design. Além disso, o Hydrogen ajuda a reduzir toda a complexidade que geralmente vem com integrações de terceiros e softwares necessários para construir uma vitrine personalizada no passado.

Assim, o Shopify Hydrogen é uma das rotas mais rápidas que as lojas Shopify podem adotar para obter os melhores recursos de comércio sem cabeça sem o processo de desenvolvimento longo, complexo e caro.

Limitações do Shopify Hydrogen

Como o Shopify Hydrogen está disponível apenas na visualização do desenvolvedor, ainda não há muito o que dizer sobre esse desenvolvimento sem cabeça desenvolvido pelo Shopify. No momento, o hidrogênio só pode ser usado para construir vitrines da Shopify. Quaisquer outros tipos de vitrines personalizadas, incluindo aplicativos móveis, videogames e dispositivos inteligentes não são compatíveis no momento. Atualizaremos esta tecnologia mais recente da Shopify regularmente para informá-lo sobre outras possíveis limitações e desvantagens.

Ficando sem cabeça com o SimiCart hoje

Embora existam muitas abordagens para o comércio sem cabeça, Shopify Hydrogen é definitivamente um divisor de águas que podemos esperar muito mais no futuro. Embora não substitua a Liquid tão cedo, seguir as últimas tendências de tecnologia pode levar você um passo à frente de seus concorrentes.

Se você deseja ter capacidade de design ilimitada, velocidade de página extremamente rápida e controle total sobre a vitrine para oferecer uma excelente experiência de comércio, Shopify headless é definitivamente o caminho que você deve seguir. Deixe-nos ajudá-lo a capacitar sua loja Shopify com comércio sem cabeça.