Amanda | Engenheira Frontend: CDN

Entendendo de verdade como a internet entrega conteúdo em milissegundos!

O que é uma CDN (de forma que qualquer um entende)

Imagine que você mora em São Paulo e quer comprar uma pizza. Se a pizzaria fica em Tóquio, vai demorar muito pra chegar.

Agora imagine que existe uma filial da pizzaria em cada bairro do mundo 🍕
Quando você pede, a filial mais próxima entrega em minutos.

💡 Isso é o que uma CDN (Content Delivery Network) faz com sites, imagens, vídeos e arquivos.

Ela cria filiais de servidores espalhados pelo planeta, chamados de edge nodes. para entregar o conteúdo a partir do local mais próximo do usuário.

Definição técnica

Uma CDN (Content Delivery Network) é uma rede distribuída de servidores estrategicamente posicionados em vários pontos do globo (os chamados PoPs – Points of Presence).

Ela tem o objetivo de:

Reduzir a latência (tempo de viagem do dado entre servidor e usuário),
Aumentar a disponibilidade,
Distribuir carga (load balancing),
E proteger contra picos de tráfego ou ataques (DDoS).

Como a internet funciona (sem CDN)

Antes da CDN, todo acesso funcionava assim:

[Usuário em Lisboa] → [Servidor em Nova York]

Quando o navegador pede uma imagem (/banner.png) ou uma página (/index.html), o pedido viaja por cabos submarinos, roteadores e firewalls até o servidor original.

⚠️ Isso causa:

Latência alta (tempo de ida e volta enorme);
Piora de performance;
Risco de sobrecarga (milhares de pessoas acessando o mesmo servidor);
Maior custo de banda.

E com CDN?

Agora o caminho é outro:

[Usuário em Lisboa] → [Servidor CDN local (Madrid)] → [Servidor de origem]

1️⃣ O primeiro acesso busca o arquivo no servidor original (origin).
2️⃣ A CDN guarda uma cópia local (cache).
3️⃣ Os próximos acessos são servidos diretamente da CDN, a poucos quilômetros de distância.

⏱️ Resultado:

Páginas carregam em milissegundos,
O servidor original respira aliviado,
E o usuário sente o site “voar”.

Estrutura técnica da CDN

Uma CDN é composta por:

Camada	Nome técnico	Função
🌎 Global Edge Network	Edge Servers (PoPs)	Ponto de presença local mais próximo do usuário
💾 Cache Layer	Object Cache	Armazena temporariamente arquivos estáticos
🧭 Routing Layer	Anycast DNS + Load Balancer	Direciona o tráfego para o PoP ideal
🔒 Security Layer	WAF, DDoS Protection, TLS Termination	Segurança e criptografia no edge
☁️ Origin	Origin Server (ex: seu backend, S3, etc.)	Fonte original do conteúdo

Entendendo o fluxo passo a passo

Vamos destrinchar o processo de uma requisição via CDN.

Exemplo:

Você acessa https://meusite.com/banner.png.

Etapas:

DNS Resolution
- O navegador pergunta: “Onde está meusite.com?”
- A CDN responde com o endereço IP do PoP mais próximo (isso é feito via Anycast Routing).
Edge Request
- O pedido chega ao servidor edge (ex: Cloudflare, Akamai, Fastly, etc.).
- O edge procura o arquivo no seu cache local.
Cache Hit
- Se o arquivo já está lá, ele é servido imediatamente.
Cache Miss
- Se o arquivo não está no cache, o edge vai até o origin server, pega o conteúdo e guarda uma cópia localmente.
Response
- O arquivo é entregue ao usuário, e a próxima pessoa da mesma região receberá a resposta instantaneamente.

O que é “cache” e como ele funciona

Cache é como uma memória temporária, uma cópia de algo que você acessa com frequência.

A CDN mantém caches locais de:

HTML estático
CSS, JS, imagens, vídeos
Dados pré-renderizados (no caso de SSG/ISR)

Cada item no cache tem um tempo de vida (TTL – Time To Live) definido nos cabeçalhos HTTP.

Cache-Control: public, max-age=3600

➡️ Isso significa:
“Pode manter essa cópia por 1 hora antes de buscar de novo no servidor original.”

Como a CDN decide o que cachear

Ela segue regras definidas por cabeçalhos HTTP ou políticas manuais:

Cabeçalho	Função
`Cache-Control`	Define se e por quanto tempo algo pode ser armazenado
`ETag`	Identifica se o conteúdo mudou (hash)
`Last-Modified`	Diz a data da última atualização
`Vary`	Cria diferentes versões do cache com base em headers (ex: idioma, user-agent)

Conceitos técnicos avançados

🔹 Cache Hit Ratio

Percentual de requisições atendidas diretamente pelo cache (sem ir ao origin).
Quanto maior, melhor.

Exemplo: 98% de cache hit ratio = apenas 2% dos acessos chegam ao servidor original.

🔹 Stale-While-Revalidate

Serve uma versão “velha” do cache enquanto busca a nova em background.
Evita que o usuário espere.

Cache-Control: max-age=3600, stale-while-revalidate=60

🔹 Edge Compute / Functions at the Edge

Hoje as CDNs evoluíram: não apenas entregam conteúdo, mas executam código no edge!

Exemplos:

Cloudflare Workers
Vercel Edge Functions
Fastly Compute@Edge

💥 Isso permite rodar lógica de autenticação, A/B testing, rewrites e até renderização SSR na borda, milissegundos do usuário.

Arquitetura visual (explicação mental)

Pense assim:

🌍 Usuário em Paris
   ↓
CDN Edge (Madrid)
   ↓ cache hit
Origin (Nova York)

→ 1º acesso: Madrid vai até Nova York
→ Próximos acessos: Madrid responde direto.
→ Paris nunca mais fala com Nova York — a CDN cuida de tudo.

Como testar e ver isso na prática

Você pode ver o funcionamento de uma CDN no navegador!

✅ Passo a passo:

Abra o site com DevTools → aba Network.
Recarregue a página.
Veja os headers das requisições.

Procure por:

cf-cache-status: HIT

x-cache: HIT from CloudFront

💡 “HIT” = servido da CDN.
💀 “MISS” = veio do servidor de origem.

Cálculo real de latência

Local do usuário	Servidor sem CDN	Servidor com CDN
São Paulo → EUA	180 ms	25 ms
Tóquio → França	300 ms	40 ms
Sidney → Singapura	250 ms	30 ms

Cada milissegundo a menos = site mais rápido, SEO melhor, UX mais suave.

CDN e segurança

Além de performance, as CDNs são camadas de defesa:

🚧 WAF (Web Application Firewall)
Bloqueia ataques de SQL injection, XSS, bots, etc.
🛡️ DDoS Protection
Se 1 milhão de bots tentam te atacar, a CDN absorve tudo antes de chegar no origin.
🔐 TLS Termination
A CDN faz a negociação HTTPS por você — o tráfego até ela é criptografado, mas o origin pode continuar simples.

CDNs populares e suas especialidades

Provedor	Pontos fortes
Cloudflare	Edge functions, segurança, rede massiva
Akamai	Alta capacidade corporativa, suporte premium
Fastly	Performance e controle via VCL (config avançada)
AWS CloudFront	Integração com ecossistema AWS
Vercel Edge Network	Otimizada para apps Next.js e ISR
Bunny.net	Simples, barata e eficiente para devs

TL;DR — Resumo técnico em uma frase

Uma CDN é uma rede de servidores globais distribuídos que entrega conteúdo estático (e às vezes dinâmico) a partir da borda da rede (edge), cacheando, otimizando e protegendo a entrega de dados para reduzir latência, carga e custo.

Analogias pra fixar

CDN é como um delivery global com depósito em cada cidade.
É como um cache de internet mundial.
E como um guarda-costas e motorista pro seu site: protege e entrega rápido.

Conclusão

Sem CDN, a web moderna não existiria do jeito que conhecemos.
Tudo que você usa, YouTube, Netflix, TikTok, GitHub, Vercel, até este site, depende de CDN para funcionar com velocidade global.

Ela é o coração invisível da performance web.
E entender sua arquitetura é um divisor de águas pra quem quer dominar escalabilidade e engenharia de front-end de verdade.

Amanda | Engenheira Frontend

segunda-feira, 10 de novembro de 2025

CDN