Fast Store: Como potencializar a tecnologia do seu e-commerce com a nova tecnologia da VTEX

Com o aumento do e-commerce, que representou cerca de 11% de todo o comércio varejista no Brasil em 2021 - de acordo com o levantamento da Câmara Brasileira da Economia Digital -, cada vez mais empresas que buscam se destacar no mercado estão abrindo seus comércios eletrônicos para atender essa demanda crescente e expandir seus faturamentos. 

Afinal, apesar da flexibilização das atividades presenciais, o comércio eletrônico se mostra firme na preferência dos consumidores, que encontraram maior praticidade nessa alternativa, não apenas dentro do cenário de distanciamento da pandemia, como no próprio dia a dia.

Em outras palavras, o e-commerce passou a ser uma estratégia vital. Mas estar presente no meio digital não é o único desafio que os varejistas enfrentam. O tempo também se tornou um fator decisivo para aproveitar as oportunidades de negócios.

A VTEX, reconhecida por ser uma empresa líder no setor de e-commerce, pensou em uma ferramenta que pudesse subir lojas online mais rápido e de um jeito simples: o FastStore. 

Mais do que facilitar o trabalho do desenvolvedor, o FastStore beneficia também os varejistas, que terão seus comércios funcionando em menor tempo e com alta eficiência. 

Arquitetura VTEX JAMStack

O que tudo indica é que a plataforma VTEX aparece com o conceito de liberar a opção de escolha para qualquer plataforma Jamstack do mercado que nada mais é do que uma abordagem mais moderna para construir sites e aplicações de forma mais rápida, segura, escalável e com bom desempenho.

Muitos desenvolvedores e empresas já utilizam o JAMStack para rodar projetos globais sem precisar lidar com servidores ou infraestrutura caras, utilizando tecnologias já conhecidas como o Javascript, APIS de HTTP e Markups pré-construídos como sistemas de entrega.

Essa arquitetura se baseia principalmente na característica da pré-construção em páginas estáticas e posteriormente acopladas ao servidor back-end. Aumentando a agilidade na criação de páginas, com maior eficiência em SEO e segurança da loja. 

Dentre as vantagens de utilizar o JAMStack nos projetos é possível citar:

• Personalização: Maior liberdade para criar e otimizar o front-end com base em modelos de negócios ou necessidades de nicho do mercado ou da operação do lojista;
• Pré-renderização: Todas as páginas podem ser previamente renderizadas antes de serem publicadas, além dos arquivos serem servidos diretamente de uma CDN, possibilitando maior velocidade de carregamento;
• JavaScript consumindo APIs: Isso torna o JamStack mais dinâmico já que os arquivos estáticos são usados apenas para excluir a necessidade de um servidor mais complexo;
• Performance: Praticamente todo o conteúdo em uma aplicação JamStack é composta por HTML estáticos que são distribuídos de uma CDN, o que permite oferece maior velocidade no carregamento de conteúdo da web para o usuário final;
• Escalabilidade: Pode responder bem a grandes aumentos de uso, isso porque o front-end do JAMStack é rápido e o back-end é mais leve, tornando mais estável para a escalabilidade;
• Experiência do desenvolvedor: OS desenvolvedores podem se concentrar na criação de experiência do usuário ou em um front-end atraente, sem precisar se preocupar com problemas de back-end ou performance. 

Linguagens e tecnologias no FastStore

A FastStore dá a opção de escolher o gerador de site estático de preferência para executar localmente em uma loja VTEX em menos de 5 minutos.

Quando olhamos para o pacote de API, a sugestão da própria VTEX é o uso de GraphQL como linguagem de consulta, já para soluções de CSS a recomendação é utilizar modelos estáticos como Tailwind e Less, mas são liberadas CSS-in-JS apesar de poder prejudicar o desempenho do projeto.

Dentro da solução FastStore são suportados frameworks como Next.js e Gatsby que vamos falar a seguir.

Gatsby

O Gatsby é um SSG (Static Site Generator) muito utilizado no desenvolvimento de websites e blogs por ter uma estrutura que permite maior agilidade e facilidade para os desenvolvedores.

De forma geral e resumida, o desenvolvimento no Gatsby pode ser feito em 3 etapas. A primeira consiste em preparar uma fonte de dados que será utilizada pelo framework, logo após é necessário realizar um processo de building onde todo o código será construído em HTML, CSS e JavaScript e só após realizar a leitura dessa fonte de dados, a ferramenta irá construir recursos do site de forma estática, priorizando o desempenho. Por fim, existe a etapa da implementação, onde será possível visualizar esses arquivos já na web.

Esta tecnologia utiliza elementos do React e recursos pré-existentes o que o torna consistente para atender usuários que buscam sites de alto desempenho no carregamento e responsividade nos parâmetros de SEO. Além disso, outra vantagem é a segurança do site que utiliza este framework, por oferecer uma estrutura estática, a dificuldade é maior para invasores acessarem arquivos com dados sensíveis.

NextJS

No FastStore tbm é possível utilizar o Next.js que é um framework para React que também possui renderização estática e por servidor, além de ter suporte ao TyoeScript e um tratamento de rotas interessante para o desenvolvimento de projetos.

Muitas das funcionalidades do Next.js são perceptíveis em aplicações em produção, uma vez que possui dois pontos principais em seu objetivo de tornar uma aplicação React mais performática e questões relacionadas a indexação do conteúdo da página pelos motores de busca.

Neste ponto de indexação, o Next.js torna o desempenho em SEO de projetos no FastStore muito mais atrativos nos mecanismos de busca, além de complementar a solução com várias funcionalidades baseadas em React.

Existem alguns formatos que podem ser destacados no Next.js, são eles:

SSR - Server Side Rendering

Fornece ao usuário um carregamento mais eficiente da aplicação, já que parte da renderização é feita no servidor. O SSR inverte o processo padrão trazendo o esforço não mais para o browser do cliente e sim para o próprio servidor.

Com isso temos carregamentos mais eficientes e uma melhor adesão a SEO.

SSG - Static Site Generation

É um formato de renderização em que as páginas de aplicação são renderizadas na fase de build da aplicação, neste formato é superior ao SSR, pelo fato de não ter uma renderização por demanda.

Com isso podemos definir conteúdos mais importantes e deixá-los pré populados com informações, já que não precisaríamos renderizar ela novamente, tornando o carregamento do site muito mais rápido.

ISR - Incremental Static Regeneration

Com esse formato, podemos unir com o SSG, podendo ter a renderização de alguns conteúdos pela build, mas tendo também uma revalidação desse conteúdo. Ou seja, o Next.JS gera o html/conteúdo em tempo de build ou até em tempo de demanda e com isso gera um cache daquela página. 

Com isso, a página gerada que está em cache tem um tempo máximo de uso, ou seja quando o primeiro usuário acessar aquela página irá carregar com o load time normal, após este primeiro carregamento será usado em outros acessos, pulando toda a parte de load time.

Como desenvolver uma loja com Fast Store - Step By Step

Neste capitulo você terá acesso a um passo a passo de como desenvolver uma loja com FastStore. São apenas 5 etapas que comprovam o quanto esta solução veio para facilitar a etapa de desenvolvimento de lojas na VTEX. Confira a seguir:

1. Faça o clone do repositório base do Fast Store:

Para iniciar sua loja na FastStore, você terá duas opções, fazê-la utilizando a tecnologia NextJS ou a tecnologia GatsbyJS, como já falamos nos capítulos anteriores. 

Para esse passo a passo, vamos escolher NextJS:

​​npx degit vtex-sites/gatsby.store codeby.store && cd codeby.store

2. Instale as dependências:

yarn install

3. Altere o arquivo store.config.js: 

Nesse arquivo você deverá alterar as seguintes informações:

• Dados de SEO;
• Substitua o valor storeId pelo id VTEX da sua conta;
• Substitua os valores storeUrl e checkoutUrl pelos URLs de produção correspondentes da sua loja;
• Vá para a propriedade lighthouse.pages e adicione os caminhos das páginas que você deseja acompanhar o desempenho ao longo do tempo;
• Vá para a propriedade cypress.pages e adicione os caminhos das páginas que você deseja testar de ponta a ponta antes de cada lançamento.

4. Execute agora a sua loja localmente:

Diferentemente do VTEX IO, com Fast Store você pode programar localmente sem a necessidade de se conectar nos servidores da VTEX, está com certeza é uma atualização interessante desta nova solução.

yarn develop

5. Comece agora alterando algo simples:

No Visual Studio Code, acesse o arquivo ./src/components/ui/Logo/logo.module.scss e substitua ​​~/public/brandless-neutral.png pelo seu logo.

E o primeiro item de personalização da sua loja estará pronto:

Conclusão

A plataforma VTEX é uma solução baseada em nuvem, oferecida como Software as a Service (SaaS). Com a VTEX, seu software central é hospedado e mantido pela própria VTEX, reduzindo significativamente o tempo, as dores de cabeça e o trabalho não orçado que os proprietários de sites de código aberto normalmente enfrentam.

Como podemos ver, a nova solução FastStore se preocupa em garantir excelente desempenho através de uma incrível UX, estabilidade, para o e-commerce não perder vendas por problemas com o provedor, além de se atentar ao Analytics e SEO, para que o lojista tenha acesso a análises eficientes e alcance um tráfego orgânico maior. 

A nova tecnologia já está sendo utilizada por alguns players do mercado como o mercado Carrefour e a Marin Brasil que mostram ótimos resultados relacionados a carregamento e SEO, em breve será possível ter analises mais detalhadas sobre estes projetos.

Além de ser uma ótima solução para novos entrantes no mercado de e-commerce, o FastStore também traz facilidade para migração de lojas, inclusive entre as tecnologias da própria plataforma VTEX.

Isso sem contar que ele também permite integrar a vitrine da loja ao VTEX Headless CMS, Sistema de Gerenciamento de Conteúdo da VTEX que possibilita que outras pessoas editem o conteúdo do front-end sem precisar mexer no seu código.