Você já parou pra pensar no que acontece entre digitar um endereço no navegador e ver a página carregada na sua tela? Como algo que pode ter sido criado em qualquer lugar no mundo chega tão rápido até a gente? Nesse artigo, vamos desvendar juntos o caminho que um site percorre até chegar até você.
Como sites são criados?
A parte que vemos e usamos para interagir com uma aplicação, ou seja, as telas, representam o que chamamos de front-end. Para sites web, o front-end é criado com linguagens de programação que rodam diretamente no navegador:
- HTML — cria a estrutura dos elementos, o esqueleto da página. Com ele conseguimos inserir elementos como textos, botões, imagens, links, etc
- CSS — ajuda a dar estilo aos componentes como cores, tamanho, posicionamento, animação
- JavaScript — permite a interação com os componentes. Com ele conseguimos, por exemplo, ter uma ação quando um usuário clica num botão
Podemos abstrair essa estrutura básica usando frameworks JavaScript como React, Angular, Astro, entre outros. Esses frameworks facilitam a construção de interfaces complexas sem precisar escrever tudo do zero.
Além do código, um site também pode conter outros arquivos estáticos como imagens, vídeos, PDFs e outros documentos que são enviados diretamente ao navegador.
Onde moram os sites que vemos na internet?
Antes de mais nada, precisamos entender que tudo que encontramos na internet está em um servidor. Eles são super computadores especializados em diferentes tarefas. Eles podem armazenar, processar, gerenciar e transferir dados e arquivos, executar programas, enviar emails, disponibilizar conteúdo na
internet, entre muitas outras funções. Veja abaixo uma imagem de um servidor.
Quando você cria um site, os arquivos de código e conteúdo precisam ficar guardados em algum lugar acessível pela internet. Esse lugar é o que chamamos de servidor de origem (ou origin server). Ele armazena a versão principal e original do seu site.
Alguns exemplos de serviços que podem servir como servidor de origem para seus arquivos estáticos são o Amazon S3, GitHub Pages, Vercel, Netlify e Cloudflare Pages. Existem ainda softwares que você pode instalar em um servidor próprio que auxiliam na comunicação com a internet como apache, nginx e outros.
Mas como o navegador sabe onde encontrar esse servidor? Cada dispositivo conectado à internet possui um endereço único chamado IP (Internet Protocol, ou Protocolo de Internet). Gosto de pensar no IP como o endereço de um computador. Assim como uma carta precisa de um endereço para chegar na casa certa, o navegador precisa do IP para encontrar o servidor certo.
O IP é formado por uma sequência de caracteres, como por exemplo: 123.456.78.9. Existem alguns protocolos (conjuntos de regras) diferentes que podem determinar diferentes formatos para os endereços de IP.
Como podemos dar um nome bonito aos nossos sites?
Mas ninguém merece ficar digitando números e letras aleatórias pra entrar em qualquer site, né? Pra nossa sorte existem os domínios, que são os nomes bonitos que usamos para acessar os sites como github.com ou dev.to.
Existem ainda diferentes níveis de domínios que se compõem pra formar o nome completo do site:
-
Top Level Domains ou Domínios de Nível Superior (TLD): são as extensões finais dos domínios de internet. Podem ainda ser dos tipos:
- De código de país como
.br,.uk,.jp - Genericos como
.com,.org,.net
- De código de país como
Second Level Domains ou Domínios de Segundo Nível (SLD): representa o nome popular do site como
amazonemamazon.comouyoutubeemyoutube.comSubdomínios: Um prefixo que pode ser adicionado antes do SLD e mostra uma subdivisão do domínio como
supportemsupport.apple.comoulearnemlearn.microsoft.com
Isso é ótimo para nós, mas os computadores ainda precisam saber qual é o IP original para conseguir levar o conteúdo até nossas máquinas. Para isso, existe o DNS (Domain Name System ou Sistema de Nomes de Domínio). Ele funciona como uma enorme lista de telefone da internet e mapeia os domínios para o endereço de IP correspondente.
Quando você digita google.com, por exemplo, o DNS traduz isso para o IP 142.250.80.46 e direciona sua chamada para o servidor correto.
O DNS é distribuído em vários servidores organizados em um sistema hierárquico como mostra a imagem abaixo.
Como acessamos o conteúdo de um site?
Agora que sabemos onde os sites moram e como damos nomes a eles, vamos entender como o conteúdo chega até você.
Quando você acessa um site, seu navegador precisa descobrir o IP do servidor que contém seus arquivos. Para isso, ele usa um resolver, um serviço que faz a busca pelo endereço IP correto. O resolver consulta a hierarquia de servidores DNS, começando pelos servidores raiz, até encontrar o IP associado ao domínio que você digitou. Com o IP, o navegador faz a requisição ao servidor correspondente e recebe o conteúdo de volta.
Parece simples, mas tem um problema: se o servidor de origem estiver nos Estados Unidos e você no Brasil, essa requisição vai percorrer uma longa distância e demorar mais tempo para chegar até você. É aí que entra a CDN (Content Delivery Network ou Rede de Entrega de Conteúdo).
Uma CDN é uma rede de servidores distribuídos pelo mundo todo que armazenam cópias dos seus arquivos em locais mais próximos dos usuários. Ao invés do navegador buscar uma imagem lá no servidor de origem nos Estados Unidos, ele pode buscar essa mesma imagem em um servidor CDN aqui no Brasil, que vai chegar muito mais rápido até você!
O fluxo funciona assim:
- O navegador quer carregar o conteúdo de um site
- A requisição vai para o servidor CDN mais próximo do usuário
- Se o servidor CDN não tiver o arquivo, ele busca no servidor de origem
- O servidor de origem envia o arquivo para o CDN
- O CDN entrega o conteúdo ao navegador
Deixando sites mais rápidos: a mágica do cache
No fluxo que descrevemos acima, se o servidor CDN precisar buscar o conteúdo no servidor de origem a cada requisição, o ganho de velocidade não seria tão grande. Nesse caso, seria melhor nem ter o servidor CDN e ir direto para o servidor de origem. A grande vantagem do CDN está no cache.
Cache é um armazenamento temporário de alta velocidade que guarda cópias de dados acessados com frequência por certo tempo. Quando um servidor CDN recebe um arquivo do servidor de origem, ele guarda uma cópia. Na próxima vez que alguém pedir o mesmo arquivo, o CDN já tem ele guardado e entrega direto, sem precisar ir até a origem de novo.
De tempos em tempos, conteúdos que não são acessados pelo cache são apagados, para que o cache mantenha sempre um registro dos conteúdos mais relevantes.
O processo funciona assim:
- O usuário faz uma requisição de conteúdo
- O servidor CDN mais próximo verifica se tem o conteúdo em cache
- Se tiver em cache → entrega direto para o navegador (rápido!)
- Se não tiver ou estiver expirado → busca no servidor de origem, guarda em cache e depois entrega
Aproveitando para passar uns conceitos para sua próxima entrevista de design de sistemas, quando o conteúdo que queremos acessar está disponível no cache, chamamos isso de cache hit, que indica o acerto. Já quando o conteúdo não está em cache, chamamos de cache miss.
O benefício do cache é diminuição de latência, ou seja, do tempo que demora para completar a requisição. O conteúdo chega mais rápido porque está mais perto. Além disso, como o CDN guarda uma cópia dos arquivos por um tempo, menos requisições são feitas ao servidor de origem, prevenindo sua sobrecarga.
Conclusão
Agora você já sabe o caminho que um site percorre até chegar na sua tela! Veja abaixo um glossário com os principais termos que vimos:
| Termo | Significado |
|---|---|
| HTML | Linguagem de marcação que define a estrutura da página |
| CSS | Linguagem de estilo que define a aparência da página |
| JavaScript | Linguagem de programação que permite interação com os componentes |
| IP | Internet Protocol - Endereço numérico único que identifica dispositivos na internet |
| DNS | Domain Name System - Sistema que traduz nomes de domínio em endereços IP |
| TLD | Domínio de nível superior como .com, .br, .org |
| SLD | Domínio de nível inferior que representa o nome do site |
| CDN | Content Delivery Network - Rede de servidores distribuídos que entregam conteúdo mais perto do usuário |
| Cache | Armazenamento temporário que guarda cópias de dados para acesso mais rápido |
Quer colocar a mão na massa e publicar seu próprio site na internet? Confira meu artigo sobre seus primeiros passos com computação em nuvem onde deployamos uma página pessoal gratuitamente usando AWS Amplify!
E aí, ficou mais claro como a internet funciona por trás dos panos? Se tiver dúvidas ou quiser compartilhar feedback, fique à vontade para me procurar!
Top comments (0)