Contexto
Com base nas boas práticas adotadas por outros players do mercado, optou-se por migrar a arquitetura front-end do modelo Headless customizado para a FastStore, produto nativo da VTEX. O objetivo central foi melhorar os indicadores de SEO e performance, gerando ganhos diretos para o negócio. A implantação seguiu um plano de rollout faseado, cobrindo sequencialmente Home, PDP, Busca e Vitrine.
Objetivos
- Performance e Core Web Vitals: Melhoras significativas nas avaliações do Google Lighthouse e PageSpeed Insights, viabilizadas pela adoção do JAMStack com SSG e ISR no carregamento das páginas.
- Redução de custos e complexidade: O uso de componentes nativos da FastStore e ferramentas pré-configuradas reduziu o tempo de desenvolvimento e o esforço de manutenção, tornando o ambiente mais eficiente para os times de engenharia.
- Gestão centralizada de campanhas: A integração com CMS centralizado permitiu que as áreas de negócio gerenciassem alterações de campanhas e conteúdo do site de forma autônoma, sem dependência técnica.
Tecnologias Utilizadas
- Next.js: Framework base da FastStore, responsável pelo SSG/ISR e pela camada de renderização das páginas.
- JAMStack: Arquitetura de entrega estática com regeneração incremental, garantindo velocidade de carregamento e escalabilidade.
- FastStore (VTEX): Produto de storefront nativo da VTEX, com componentes otimizados para e-commerce e integração nativa com a plataforma.
- GraphQL: Utilizado nas consultas das páginas de PDP, com ganhos expressivos de performance ao buscar apenas os dados necessários para cada renderização.
Desafios e Aprendizados
O principal desafio foi a conversão e reescrita dos componentes customizados existentes para os padrões da FastStore, respeitando o prazo de entrega faseado. A necessidade de manter a operação do site em produção durante a migração exigiu planejamento cuidadoso de cada fase do rollout, evitando impactos na experiência de compra dos clientes.