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.
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.