Um primer em armazenar estrategicamente conteúdo dinâmico no limite: Como funciona e por que é melhor do que os CDNs tradicionais.
Quando se trata de desempenho, a maioria dos CDNs faz algumas coisas bem, eles entregam arquivos estáticos rapidamente, fornecem sobrecarga de rede para os horários de pico de tráfego e protegem contra ataques DDoS no nível da rede. Historicamente, isso significou um aumento tangível no desempenho e na segurança de ativos como imagens, vídeos e outros conteúdos estáticos. À medida que as tecnologias da web evoluíram, os benefícios acima mencionados são essencialmente apenas os riscos que foram estabelecidos quando os CDNs se tornaram parte das soluções de distribuição da web tradicionais.
O problema é que a arquitetura CDN foi desenvolvida há anos. A arquitetura de sites mudou aos trancos e aos limites, mas a maioria dos CDNs não se adaptou à paisagem em mudança.
Se você está lendo isto, você tem um site que provavelmente é arquitetado com alguma quantidade de conteúdo dinâmico renderizado no lado do servidor. Se você está usando uma CDN antiga, provavelmente está acostumado a ver algo como isto nos cabeçalhos de resposta quando você puxa as ferramentas de desenvolvimento do seu navegador.
cdn-cache: passe
Substitua o valor deste par, dependendo do seu fornecedor: Passe, perca ou conteúdo dinâmico. Tudo significa a mesma coisa.
“Esta resposta vem da sua origem porque era demasiado complicada.”
E o que isso significa para o desempenho do seu site? Isso significa que você sacrificará a velocidade porque o seu conteúdo dinâmico está quase sempre vindo da sua origem simples e simples. As suas páginas de categoria e produto, artigos e pedidos de API são enviados diretamente para a sua origem quase 100% das vezes. A maioria das CDNs sofre da mesma bluz. Se tiver sorte, pode espremer cerca de 10 a 11% das respostas dinâmicas do seu servidor no seu cache de borda. Você rapidamente descobrirá que não tem controle suficientemente granular para ajustar as regras de armazenamento em cache para criar um site que carrega instantaneamente e se parece com um aplicativo nativo.
Bem-vindo ao Edgio
Na Edgio, temos a segunda maior CDN do planeta com mais de 300 POPs globalmente dispersos e 250 TBS de capacidade. Somos seguros, eficientes e em todo o mundo. Mas, como dissemos antes, essas são apenas as apostas da mesa. No Edgio, estamos a abordar o problema da CDN de uma perspetiva diferente. Em vez de estarmos ligados a regras de vinte anos, construímos uma CDN flexível e responsiva para os próximos vinte anos e além. Desenvolvemos a primeira CDN configurável por código do mundo que dá aos seus desenvolvedores e membros da equipa de DevOps a flexibilidade e o controlo granular de que precisarão para disponibilizar websites em menos de um segundo.
Não é magia, é o futuro dos CDNs e está disponível agora
Neste ponto, provavelmente está a pensar que isto soa como magia, bem, pode parecer assim, mas não é, é o futuro da entrega de aplicações web. Em vez de separar as suas equipas de DevOps e engenharia, estamos a juntá-las permitindo que incorpore a sua lógica de CDN nos seus ambientes locais, de preparação e de produção.
Armazena facilmente o que quiser, durante quanto tempo quiser
Cada configuração do Edgio começa com um repositório de código que você possui e controla. Cada implementação é única e atómica, o que significa que pode voltar para qualquer versão em menos de um minuto. Você é livre para implantar a configuração ao lado do seu projeto ou mantê-la em um fluxo de trabalho separado. A maioria dos nossos clientes acaba incorporando as suas regras de CDN no seu canal de CI/CD e no seu fluxo normal de desenvolvimento. O resultado é uma maior velocidade de desenvolvimento sem sacrificar o desempenho e o controlo. Faça a gestão da sua CDN como se fizesse a sua base de código.
Estou habituado a publicar as minhas alterações de configuração num portal ou a fazer pedidos de API. Como é o Edgio diferente?
Não se preocupe, temos endpoints de API e uma interface de usuário tradicional disponível quando quiser, mas para maximizar totalmente a taxa de acerto do cache, o desempenho do site e a velocidade do desenvolvedor, você vai querer começar a usar o EdgeJS. Vamos mergulhar.
Quando um projeto é inicializado, você começará com um arquivo de configuração simples que inclui um conjunto de regras recomendado. Sua configuração é escrita em JavaScript, a linguagem de desenvolvimento mais popular do planeta, e implementada em segundos com a nossa CLI. Um ficheiro define os servidores de origem.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
Adicione seus endpoints de API, buckets de mídia ou qualquer outra origem que você precise. Facilmente e com algumas linhas de código.
E quanto a essa flexibilidade de armazenamento em cache?
Grande questão, é aqui que a diversão começa. Adicionamos outro arquivo para que você possa configurar suas rotas e escrever algumas regras de armazenamento em cache. Crie regras para o seu conteúdo e defina as regras de armazenamento em cache do Edge, do navegador e do service worker conforme você entender.
Vamos começar com esses ativos estáticos que os CDNs lidam tão bem.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
Com uma regra, estabelecemos algo assim para qualquer pedido:
“Se vemos uma solicitação com uma extensão de arquivo correspondente, armazená-la em cache no Edgio e no navegador do cliente por vinte e quatro horas.”
Se você está tentando isso em casa, você pode clicar em torno do seu site localmente e assistir à medida que armazenamos em cache e entregamos imagens, suas imagens, fontes, CSS e JS. Acendeie uma janela anónima para ter a certeza de que a cache do seu navegador está vazia e veja os seus acessos de cache localmente. Sim localmente. Não há necessidade de implementar isto para que funcione. Você sabe exatamente como o seu código irá interagir com a nossa CDN.
E quanto a esse conteúdo dinâmico que você mencionou?
OH, não se preocupem que não esquecemos. Estamos a apenas 10 minutos e estamos a combinar esses CDNs legados. Agora vamos ligar os pós-queimadores e deixá-los no pó. Vamos supor que você queira adicionar uma rota para algum conteúdo dinâmico.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
E traduzido isto significa o seguinte:
“Cache todas as páginas de produtos por um dia.
Quando esse cache expirar, sirva o antigo por uma hora enquanto procuramos uma nova versão.
Agora já viram a flexibilidade e compreenderam o básico. Esperemos que você esteja imaginando que tipo de impactos a implantação do seu CDN no Edgio pode ter na velocidade e no desempenho do seu site. Você pode facilmente definir suas próprias rotas e atribuir regras de armazenamento em cache a elas. Mas o que mais se pode fazer com a plataforma de aplicações do Edgio e o EdgeJS?
- Encaminhar pedidos para um caminho diferente na sua origem,
- Alterar pedidos
- Alterar respostas
- Manipule os cookies
- Servir ficheiros estáticos
- Direcione para funções sem servidor
- Volte para a renderização do lado do servidor
- Redirecionamentos
- Bloqueio de trânsito
- Purga seletiva com chaves de cache personalizadas
- Ou transformar totalmente a resposta da sua origem.
Cabe a você decidir como vai aproveitar a tecnologia de próxima geração do Edgio e os exemplos acima são apenas a ponta do iceberg. Na verdade, na Edgio estamos em constante busca do desempenho, por isso decidimos ir mais longe, para além do limite e para o navegador do seu visitante com a nossa solução única de pré-busca de HTML e ativos.
Para descobrir como você pode eliminar virtualmente os tempos de resposta da rede e transformar completamente o seu site dando-lhe a sensação de uma aplicação nativa, não deixe de conferir o nosso artigo seguinte: Reduzir as taxas de rejeição e melhorar a experiência do site com a busca preventiva por Edgio.
