Home Blogs Como escolher o provedor de hospedagem certo para o seu aplicativo de eCommerce de página única (SPA)
Applications

Como escolher o provedor de hospedagem certo para o seu aplicativo de eCommerce de página única (SPA)

About The Author

Outline

Quando você está trabalhando duro executando sua loja e gerenciando seu estoque, manter um servidor web pode não ser seu foco principal. Sem mencionar hospedar um SPA é um pouco mais complexo do que apenas servir um site HTML estático de um servidor.

Felizmente, a tendência para os spas de comércio eletrônico criou um mercado totalmente novo de plataformas de hospedagem all-in-one e infraestrutura de back-end sem servidor que executam aplicativos da web e sites estáticos. Essas plataformas incluem Netlify, Vercel, AWS, Firebase e Layer0 (agora Edgio). Neste post, analisamos como eles se comparam em termos de aptidão para hospedagem de spas de comércio eletrônico complexos.

Como funcionam os spas?

Para entender completamente por que os spas exigem tratamento especial de hospedagem, você precisa saber como esses sites são gerados e os desafios inerentes ao processo.

Em spas, o servidor retorna apenas uma página HTML básica com muito JavaScript responsável por alterar ou manipular dinamicamente o código HTML (ou seja, o DOM) no navegador. No entanto, o servidor ainda está envolvido no processo por razões de segurança. O código JavaScript do lado do cliente não pode se conetar a um banco de dados diretamente, pois isso pode expor dados confidenciais, como credenciais de acesso – você não pode ocultar seu código JavaScript do frontend.

Todo o processo de atualização da interface do usuário acontece no navegador (via JavaScript do lado do cliente). Isso fornece uma experiência de usuário semelhante a aplicativos móveis e resulta em melhoria de velocidade. Atualizações e alterações acontecem quase instantaneamente e o usuário não precisa esperar que uma nova página seja carregada. Claro, seu aplicativo ainda precisará de alguns dados de tempos em tempos, para que o aplicativo possa mostrar um tipo de animação de carregamento até que os dados tenham sido obtidos nos bastidores (por exemplo, via AJAX) ou pré-preencher elementos com esqueletos para que a página não pareça vazia.

Atualizar dinamicamente toda a página HTML do lado do cliente com JavaScript requer muitas instruções de JavaScript, você normalmente usa uma estrutura (React.js, Angular ou Vue.js) ou biblioteca para lidar com isso. Para comparar o desempenho dos sites Angular, React e Vue, leia este post.

O aplicativo de página única vs. Confusão do Jamstack

Um aplicativo de página única é um aplicativo web que carrega uma única página HTML estática e hidrata dinamicamente com novo conteúdo cada vez que o usuário interage com ele. Como os spas combinam páginas estáticas com JavaScript e API leve, a configuração pode ser considerada Jamstack (o nome é uma combinação de JavaScript, APIs e Markup).

A sobreposição Jamstack vs. SPA é significativa e um pouco confusa à primeira vista, mas há algumas diferenças. Por exemplo, nem todos OS SPA servem conteúdo diretamente do cache. Para melhorar o SEO e o desempenho, muitos spas modernos são construídos em estruturas isomórficas (aka JavaScript universal), o que os ajuda a melhorar a classificação SERP através de velocidades mais rápidas do site, utilizando renderização do lado do servidor e do lado do cliente.

Como o Jamstack promove a separação de código do lado do cliente e do servidor, ele não se alinha com o design isomórfico (ou JavaScript universal) – o Jamstack incentiva a utilização de APIs para funcionalidade adicional, mas não recomenda dar controle total da API sobre como os dados são consumidos e interpretados. Com a API de carregamento frontal do Jamstack, o consumo e a ingestão de conteúdo são recomendados no momento da construção. Se a necessidade surgir, funções sem servidor também podem disponibilizar APIs em tempo de execução.

O Jamstack facilita a geração de sites HTML pré-renderizados, o que oferece algumas melhorias em comparação com spas clássicos. Cada página é construída como uma página estática durante a compilação e essas páginas são facilmente armazenáveis em cache, então o resultado final é que a CDN entrega seu site, não seus servidores. Esta abordagem é barata para hospedar e rápida, já que um SPA tem que primeiro fazer pedidos para exibir conteúdo. Frameworks populares que facilitam o Jamstack “estático” incluem Nuxt.js, Next.js, Eleventy e Gatsby, embora cada um faça isso um pouco diferente.

  • Eleventy é enviado principalmente HTML pré-gerado.
  • Nuxt/Next/Gatsby e outros normalmente enviam HTML estático, e uma vez que o JavaScript é carregado, eles transformam a página em um SPA.

Há também plataformas de hospedagem, como Layer0, que cumprem o mesmo objetivo e velocidades ainda melhores. Com um CDN com reconhecimento de aplicativos, o Edgio pode armazenar em cache dados dinâmicos na borda 95% mais do tempo, eliminando assim o servidor no processo de entrega, que é quase exclusivamente no CDN, assim como no caso de um site estático do Jamstack. Este é um Jamstack dinâmico.

Os principais desafios dos spas

Os spas estão ganhando popularidade principalmente devido à melhoria de desempenho que oferecem. Mas o design dos SITES SPA, ou seja, lidar com todas as atualizações de UI e a renderização de conteúdo no navegador, também leva a certas limitações.

Spas não são ótimos para SEO

A maior desvantagem dos spas está conetada com SEO. Os motores de busca não entendem o conteúdo além do contentor HTML vazio. Alguns rastreadores (como o do Google) agora são supostamente capazes de interpretar JavaScript e esperar até que a página seja renderizada. Ainda assim, desde 2014 todas as fontes confiáveis em JavaScript SEO continuam dizendo que você não deve confiar no Googlebot para rastreamento JS. O carregamento de conteúdo é rastreado de forma síncrona; o conteúdo carregado de forma assíncrona não é rastreado.

Desempenho

A carga inicial para O SPA leva mais tempo do que sites estáticos, porque o navegador precisa baixar um grande pedaço de JavaScript antes que qualquer coisa seja renderizada na tela. O código deve ser analisado e executado, impactando negativamente o desempenho do site. No entanto, este código também inclui ativos para as páginas subsequentes e, como resultado, as transições de navegação de spas são extremamente rápidas.

Alguns frameworks JavaScript têm uma maneira de lidar com os problemas de desempenho dos SPAs.

  • O Next.js usa a renderização do lado do servidor para “converter” a página em HTML no servidor em cada solicitação. Isso leva muito tempo até o primeiro byte, mas os dados estão sempre atualizados.
  • Next.js pré-renderiza a página em HTML no servidor antes de cada solicitação usando a geração estática do site. O HTML pode ser globalmente armazenado em cache por uma CDN e servido instantaneamente.

Idealmente, sua opção de hospedagem deve ter recursos que remediar os desafios acima.

aplicativos de página única, aplicativos da web progressivos e páginas móveis aceleradas podem melhorar a experiência do cliente. No entanto, a velocidade do site continua sendo um problema de pilha completa envolvendo o navegador, a borda e o servidor. Uma solução completa é necessária para acelerar qualquer site, SPA e aplicativos estáticos de várias páginas.

Uma solução de hospedagem altamente eficiente para o seu eCommerce SPA deve oferecer:

Um gerador de site estático que constrói páginas HTML estáticas a partir do conteúdo de entrada, seja retirado de um CMS ou de um modelo interno.

Renderização do lado do servidor: Para spas, a renderização do lado do servidor é um pouco complicada, mas algumas iniciativas tornam esse processo um pouco mais fácil (mais sobre isso abaixo).

Como hospedar um site típico de eCommerce SPA
Abaixo, analisamos mais de perto as opções de hospedagem populares para o seu SPA e discutimos como eles abordam os desafios típicos inerentes aos sites DE SPA.

1. Os gigantes da hospedagem: Google Cloud Platform, Azure e AWS

O Google Cloud Platform, o Azure e a AWS tornaram-se o pão e a manteiga dos serviços em nuvem hoje e oferecem uma linha de recursos muito semelhante. Suas ofertas se tornaram commodities, como alguns apropriadamente colocam – cada um dos três grandes provedores inclui uma CDN com POPs em todo o mundo, JavaScript sem servidor e alguns itens para os desenvolvedores, como visualizações de ramificações e rollbacks ilimitados. Não há muita diferenciação. Por exemplo, hospedar um site na AWS exigirá o Amazon S3 para armazenamento de seus ativos estáticos, o Amazon CloudFront para CDN e o AWS Lambda com API Gateway para a API de funções sem servidor.

Estes serviços são as bases sobre as quais a nova onda de provedores intermediários constrói seus serviços. Empresas como o Vercel ou o Netlify estão essencialmente revendendo os serviços da AWS/GCP/Azure com uma marcação adicionando recursos extras.

O que torna o Layer0 diferente do grupo é que a plataforma foi construída de raiz para fornecer a hospedagem mais fácil, confiável e de melhor desempenho para sites em larga escala baseados em API, como spas de comércio eletrônico e sites de viagens.

2. Netlify

O Netflify se encaixa na definição de uma configuração do Jamstack – a empresa cunhou a frase! A Netlify é uma empresa de computação em nuvem que oferece soluções de hospedagem Jamstack estáticas e serviços de back-end sem servidor. O processo de implantação é simples. Isso elimina a agitação da infraestrutura de gerenciamento, permitindo que a equipe de desenvolvimento se concentre na codificação.

Há HTTP/2 padrão, HTTPS, e seu site é servido via CDN. O Netlify tem muitos recursos e um rico ecossistema de add-ons (por exemplo, Funções sem servidor, Formulários instantâneos, Identidade, Analytics e muitos outros). Você também pode criar seus próprios complementos.

O Netlify oferece suporte sólido ao cliente e é apoiado por uma comunidade de usuários que você pode consultar em caso de problemas.

Funcionalidades voltadas para o desenvolvedor

A Netlify faz esforços para simplificar a vida do desenvolvedor, oferecendo algumas soluções que melhoram a produtividade.

O Netlify Dev oferece um aumento de produtividade, permitindo que os desenvolvedores testem localmente o gerador de sites, integrações de API, funções sem servidor e regras de borda em um único servidor de desenvolvimento.

O Netlify Build permite que os desenvolvedores usem o fluxo de trabalho do Git para desenvolvimento e permite a implantação contínua – implante alterações após cada commit usando um URL exclusivo.

O Netlify Edge é uma rede de entrega para aplicações web. Os desenvolvedores podem conectá-lo ao seu fluxo de trabalho de desenvolvimento e fazê-lo lidar com tarefas complexas ou executar alguma lógica personalizada. Ele propaga os artefatos do projeto em locais em todo o mundo, semelhante a uma CDN normal, mas de forma mais inteligente e rápida.

Funções Netlify Serverless

Com o Netlify Serverless Functions, você pode escrever JavaScript ou Go APIs para executar algumas tarefas de back-end e escalar automaticamente à medida que a demanda aumenta. Embora a configuração do AWS Lambdas por conta própria possa ser bastante complexa, as funções sem servidor no Netlify são relativamente simples: Eles usam o AWS Lambda nos bastidores, mas abstraem-o para que não haja necessidade de tocar no API Gateway, nas permissões de função do IAM e no avançado AWS boilerplate.

Netlify nível livre

O Netlify também oferece um nível gratuito praticamente ilimitado que oferece muitos dos benefícios mencionados acima.

3. Vercel

O Vercel (anteriormente now.sh, Now ou Zeit) tem uma oferta semelhante ao Netlify, mas enfatiza fortemente a implantação de configuração zero, que eles chamam de uma abordagem convencional e completamente compatível com versões anteriores da implantação. Ele funciona com vários frameworks (por exemplo, Gatsby, Vue, Ember, Svelte). Depois de carregar um projeto package.json com um script de compilação, você obtém renderização totalmente estática ou híbrida fora da caixa.

O Vercel fornece uma experiência semelhante ao Netlify, onde você pode conetar seu repositório Git e colher os benefícios da implantação contínua: Implantar alterações após cada commit usando um URL exclusivo.

Funções sem servidor Vercel

A Vercel oferece funções sem servidor, que utilizam o AWS Lambda sob o capô. Com mais idiomas e regiões suportados, a oferta da Vercel é um passo do Netlify.

A Vercel também oferece uma rede de entrega robusta que pode armazenar em cache respostas de função sem servidor além dos ativos estáticos.

Embora seja baseado no AWS Lambda, a Vercel decidiu usar assinaturas de função personalizadas para o manipulador em contraste com o Netlify, que usa o formato da AWS.

4. Layer0 (Edgio)

Layer0 (Edgio) é uma solução completa para permitir Jamstack dinâmico para sites DE SPA, tornando-os carregamento instantâneo e mais fáceis de desenvolver. Ele combina técnicas avançadas de otimização para acelerar sites em grande escala, baseados em banco de dados, como spas de comércio eletrônico, juntamente com ferramentas poderosas que dão aos desenvolvedores de volta um dia por semana simplesmente colocando o código no centro do fluxo de trabalho. Edgio essencialmente traz Jamstack para grandes sites de comércio eletrônico.

O Edgio vem com um CDN-as-JavaScript que pode aumentar ou até mesmo substituir seu CDN atual e trazer todos os recursos de segurança da Web que você precisa para a borda. Layer0 também vem com um monte de tecnologias focadas em desenvolvimento que tornam todo o processo de desenvolvimento, implantação, visualização, experimentação, monitoramento, monitoramento e desenvolvimento. e executar seu frontend sem cabeça simples, incluindo URLs de visualização de pilha completa automatizada, um backend JavaScript sem servidor para frontend, monitoramento de cache avançado e muito mais.

Desenvolvedores Layer0 ❤

Edgio torna a implantação DO SPA instantânea e simples.

Ao combinar interfaces modernas de comércio eletrônico SPA e uma CDN-como-JavaScript com taxa de acerto de 95% de cache para conteúdo dinâmico na borda e um backend para frontend Node.js, o Edgio ajuda sites complexos a otimizar a velocidade em toda a pilha. Layer0 (agora Edgio) é a única plataforma que garante tempos médios de sub-segundos maiores de Content Paint (LCP) para sites de comércio eletrônico em grande escala.

Como o Netlify e o Vercel, o Layer0 (agora Edgio) permite que os desenvolvedores usem o fluxo de trabalho do Git para o desenvolvimento e possibilitem a implantação contínua – implante alterações após cada commit usando um URL exclusivo.

Edgio é a sua plataforma tudo-em-um para desenvolver, implantar, visualizar, experimentar, monitorar, e execute seu frontend de comércio eletrônico SPA que permite que você:

  • Utilize Jamstack para eCommerce através de renderização pré e just-in-time
  • Ative a rede de latência zero por meio de pré-busca de dados de APIs de catálogo de produtos
  • Configure o EDGE nativamente em seu aplicativo (CDN-as-JavaScript)
  • Execute regras de borda localmente e em pré-prod
  • Crie URLs de visualização a partir do GitHub, GitLab ou BitBucket com cada novo branch e push
  • Execute divisões na borda para testes A/B de desempenho, implanta canary e personalização
  • JavaScript sem servidor que é muito mais fácil e confiável do que o AWS Lambda

O que torna Layer0 diferente do Netlify e Vercel

Netlify e Vercel se concentram em sites estáticos. Eles funcionam bem para sites menores que podem ser estáticos, enquanto o Edgio é voltado especificamente para sites maiores, dinâmicos, frequentemente em mudança e mais complexos. Essa distinção é importante, especialmente se você está procurando uma maneira eficiente de hospedar seu site DE eCommerce SPA.

Além disso, o Netlify e o Vercel têm limitações em quantas páginas podem suportar, e seus clientes geralmente têm menos páginas em média. O Edgio, por outro lado, suporta sites com milhões de páginas.

Para sites complexos e dinâmicos, compostos por milhares de páginas, criar páginas “estáticas” durante cada compilação aumenta exponencialmente o tempo de compilação e requer compilações sempre que houver a menor mudança de dados. A pré-renderização não vai cortar para sites de comércio eletrônico dinâmicos com milhares de SKUs, Testes A/B, preços dinâmicos, pesquisas de inventário em tempo real e promoções. JavaScript sem servidor pode lidar com conteúdo renderizado em linha, on-the-fly, no lado do servidor consistentemente armazenado em cache na borda do CDN-as-JavaScript.

É exatamente aqui que o Edgio mostra sua principal vantagem sobre as ofertas de infraestrutura competitivas e coloca os princípios do Jamstack dinâmico a funcionar. O service worker CDN-as-JavaScript busca inteligentemente suas páginas dinâmicas antes que seu visitante toque em um link. Nossas ferramentas de rede e monitoramento garantem que os dados dinâmicos sejam armazenados em cache pelo menos 95% do tempo, protegendo seu banco de dados das solicitações extras criadas por pré-busca.

O processo de desenvolvimento e implantação do Edgio coloca os desenvolvedores no centro do processo, dando a eles todos os controles e simplificando o processo de manutenção.

Ferramentas de rede e monitoramento Layer0

Resumo

Como o ranking do Google em breve se concentrará mais na experiência do usuário e na velocidade da página, executar um site rápido aumentará significativamente os rankings e as conversões de SEO. Acelerar sites dinâmicos de comércio eletrônico é um desafio, mas também uma oportunidade que, se aproveitada corretamente, pode ganhar uma vantagem competitiva e aumentar sua receita.

Na Layer0 (Edgio), conhecemos os pontos problemáticos dos operadores de comércio eletrônico que executam spas dinâmicos e sabem como acelerar esses sites. Não ajudamos apenas aplicativos de comércio eletrônico complexos e dinâmicos a atingir velocidades de sub-segundos – o Edgio também foi construído com rápido desenvolvimento e ajudou as equipes a aumentar sua velocidade. O crescimento dos resultados e os custos reduzidos de DevOps são ganhos secundários.

Nós não ganhamos a menos que nossos clientes o façam. Nós aceleramos com sucesso os spas de comércio eletrônico dinâmicos, ajudando-os a garantir sua posição no cenário de comércio eletrônico altamente competitivo – confira nosso portfólio para exemplos executados no Edgio.