O assunto deste artigo é mais técnico, caso você tenha conhecimento você pode fazer os ajustes conforme as instruções abaixo, mas se não conseguir, pode contratar uma agência parceira para te auxiliar.

O que é CDN?

CDN significa "Content Delivery Network", que em português pode ser traduzido como "Rede de Distribuição de Conteúdo". Trata-se de uma infraestrutura global de servidores espalhados em diferentes localizações geográficas, projetada para entregar conteúdo digital aos usuários finais de forma rápida e eficiente.

O objetivo principal de uma CDN é reduzir a latência e melhorar o desempenho ao entregar conteúdo online, como páginas da web, imagens, vídeos, arquivos de áudio, downloads e outros recursos. Em vez de depender de um único servidor centralizado para fornecer todo o conteúdo, uma CDN distribui o conteúdo em vários servidores ao redor do mundo.

Quando um usuário solicita um recurso de um site ou aplicativo que utiliza uma CDN, o servidor mais próximo geograficamente ao usuário responde à solicitação, em vez de enviar a solicitação para o servidor original do conteúdo. Isso resulta em tempos de carregamento mais rápidos e melhor experiência para os usuários finais.

Além do desempenho, uma CDN também pode fornecer outros benefícios, como tolerância a falhas, escalabilidade, segurança e otimização de largura de banda, por meio de técnicas como o cache de conteúdo em servidores distribuídos.

Quais as vantagens da CDN para a minha loja?

As CDN, ou Redes de Distribuição de Conteúdo, oferecem diversas vantagens, especialmente para lojas virtuais:

Redução de Latência e Melhoria de Desempenho: A principal função de uma CDN é diminuir a latência e aprimorar o desempenho na entrega de conteúdo online (páginas da web, imagens, vídeos, arquivos de áudio, downloads, etc.). Ela distribui o conteúdo em vários servidores ao redor do mundo, permitindo que o servidor mais próximo ao usuário responda à solicitação, resultando em carregamentos mais rápidos e uma melhor experiência para o usuário final.

Tolerância a Falhas: Uma CDN oferece uma maior resistência a interrupções de serviço, pois utiliza múltiplos servidores distribuídos geograficamente. Se um servidor falhar, outros podem assumir seu papel, garantindo a continuidade do serviço.

Escalabilidade: As CDNs permitem que os e-commerces lidem facilmente com picos de tráfego, ajustando-se automaticamente para atender a demandas crescentes sem a necessidade de intervenção manual ou aumento da infraestrutura própria.

Segurança: As CDNs podem melhorar a segurança do site, fornecendo proteções adicionais contra ataques DDoS e outras ameaças cibernéticas.

Otimização de Largura de Banda: Por meio de técnicas como cache de conteúdo, as CDNs podem reduzir o uso da largura de banda, o que melhora a eficiência.

Boas práticas para adicionar novos códigos:

Visando aumentar a confiabilidade, segurança e velocidade da plataforma da Loja Integrada, estamos introduzindo o uso de CDN também nas páginas de conteúdo e não apenas em arquivos estáticos como sempre fizemos.

Para podermos retirar total benefício dos CDNs, foram necessárias algumas mudanças nas características essenciais das lojas, onde impacta diretamente na sessão do cliente que está navegando e comprando na loja.

Na prática, isso significa que elementos que retornavam informações exclusivas ao usuário navegando na loja precisaram ser alterados, sendo a maior mudança no cabeçalho das páginas, onde se encontram as informações de usuário logado e itens no carrinho.

Usuário logado e não logado

Antes
O HTML retornado era diferente para quando o usuário havia feito login ou não, além de possuir as informações pessoais do usuário já no HTML, como por exemplo o nome dele.

Depois
Em ambos os cenários de logado e não logado, o HTML retornado possui o conteúdo referente aos dois possíveis estados, e não possui nenhuma identificação do usuário, mesmo caso logado.

Como identificar usuários logados?
Monitorar a trigger user_state_changed, onde após a notificação dela, as informações referentes ao usuário logado estão disponíveis no DOM.
```
$('body').on('user_state_changed', function() {
  console.log('SITUAÇÃO DO USUÁRIO MUDOU');
});
```

Carrinho no cabeçalho (minicart)

Antes
O HTML retornado era diferente para quando o usuário possuía itens no carrinho ou não, além de possuir as informações referentes ao itens que estavam no carrinho.

Depois
Em ambos os cenários com itens no carrinho ou não, o HTML retornado possui o conteúdo referente aos dois possíveis estados, e não possui nenhuma identificação dos itens no carrinho.

Como identificar itens no carrinho?
Monitorar a trigger minicart_state_changed, onde após a notificação dela, as informações referentes ao carrinho estão disponíveis no DOM.
```
$('body').on('minicart_state_changed', function() {
  console.log('SITUAÇÃO DO MINICART MUDOU');
});
```

Recomendações

Sempre que for manipular o cabeçalho nas sessões do usuário ou carrinho, monitore as triggers e ajuste seu layout após o acionamento delas (pode ocorrer mais de uma vez e não apenas no load da página).

$('body').on('user_state_changed', function() {
  console.log('SITUAÇÃO DO USUARIO MUDOU');
});
 
$('body').on('minicart_state_changed', function() {
  console.log('ESTADO DO MINICART MUDOU');
});

O que evitar?

Quando a mudança de layout é muito grande e envolve a mudança de elementos no HTML, evite remover ou renomear os código acima mencionados, pois caso o status da sessão seja alterado, sua personalização não será capaz de obter a nova situação.

Opte por esconder os elementos descritos e criar novos, desta forma caso exista alguma mudança de estado, seu código pode ir buscar as mudanças neste DOM que está escondido e aplicar na personalização.