O que acontece quando você visita uma URL?

A jornada de um clique

Toda vez que você digita uma URL ou clica em um link, uma sequência complexa de eventos acontece em milissegundos. Entender esta jornada é a fundação do desenvolvimento web: porque toda feature que você constrói em Rails é parte deste ciclo.

Vamos rastrear o que acontece quando você visita https://example.com/courses.

---

Passo 1: o navegador analisa a URL

O navegador divide a URL em partes:

https://example.com/courses?sort=newest
│       │            │       │
Scheme  Host         Path    Query String

Parte	Valor	Propósito
Scheme	https	Protocolo a usar (HTTP ou HTTPS)
Host	example.com	Qual servidor contactar
Path	/courses	Qual recurso no servidor
Query string	sort=newest	Parâmetros adicionais

O navegador agora sabe o que quer e onde encontrar.

---

Passo 2: consulta DNS: encontrando o endereço

Nomes de domínio como example.com são para humanos. Computadores precisam de endereços IP (como 23.215.0.136, um dos endereços pra que o example.com resolvia em 2025). O Sistema de Nomes de Domínio (DNS) traduz entre os dois.

flowchart LR
  B["Navegador: onde está example.com?"] --> L["Cache local"] --> R["Cache do roteador"] --> I["DNS do provedor"] --> RT["DNS raiz"] --> C["DNS .com"] --> E["DNS do example.com"] --> A["Resposta: 23.215.0.136"]

Isso é como procurar um número de telefone na lista de contatos:

• Primeiro, verificar se já sabe (cache)
• Se não, perguntar a alguém que possa saber (servidores DNS)
• No fim, obter o número (endereço IP)

No desenvolvimento Rails, localhost resolve para 127.0.0.1: sua própria máquina. Sem necessidade de consulta DNS.

---

Passo 3: conexão TCP: estabelecendo contato

Agora o navegador sabe o endereço IP. Ele estabelece uma conexão TCP: um canal de comunicação bidirecional confiável.

sequenceDiagram
  participant B as Navegador
  participant S as Servidor
  B->>S: SYN ("Podemos conversar?")
  S-->>B: SYN-ACK ("Sim, pode ir")
  B->>S: ACK ("Ótimo, começando")
  Note over B,S: Conexão estabelecida!

Este é o three-way handshake: como um telefone tocando, sendo atendido, e o chamador dizendo "alô."

Para HTTPS, um handshake TLS adicional acontece para criptografar a conexão.

---

Passo 4: requisição HTTP: pedindo a página

Com a conexão estabelecida, o navegador envia uma requisição HTTP:

GET /courses?sort=newest HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
Accept: text/html
Accept-Language: pt-BR,pt;q=0.9
Cookie: session_id=abc123

Esta é uma mensagem estruturada que diz:

• GET: Quero recuperar (não criar ou modificar)
• /courses?sort=newest: Este recurso específico
• Host: example.com: Neste servidor
• Accept: text/html: Quero HTML de volta
• Cookie: Aqui está meu identificador de sessão

---

Passo 5: processamento no servidor: Rails assume

O servidor recebe a requisição e passa para sua aplicação Rails:

flowchart TB
  R["Requisição HTTP"] --> W["Nginx / Puma (servidor web)"] --> M["Pilha de middleware do Rails"] --> RT["Router (config/routes.rb)"] --> C["Action do controller"] --> MO["Model (consulta ao banco)"] --> V["View (template HTML)"] --> RS["Resposta HTTP"]

Em termos Rails:

# Neste app, a lista de cursos fica em /catalog/roadmap
# config/routes.rb
namespace :catalog do
  get "roadmap", to: "courses#index", as: :roadmap
end

# app/controllers/catalog/courses_controller.rb
def index
  result = Catalog::ListCoursesQuery.call(authenticated: current_user.present?)
  @courses_by_level = result.courses_by_level
  # ...
end

# app/views/catalog/courses/index.html.erb
# Gera HTML usando @courses_by_level

---

Passo 6: resposta HTTP: a resposta

O servidor envia de volta uma resposta HTTP:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 12847
Set-Cookie: session_id=abc123; path=/; HttpOnly

<!DOCTYPE html>
<html>
  <head><title>Cursos</title></head>
  <body>
    <h1>Todos os Cursos</h1>
    ...
  </body>
</html>

Esta resposta contém:

• Código de status (200 OK): A requisição teve sucesso
• Headers: Metadados sobre a resposta
• Body: O conteúdo real (HTML neste caso)

---

Passo 7: renderização do navegador: mostrando a página

O navegador recebe o HTML e:

1. Analisa o HTML em uma árvore DOM
2. Busca recursos adicionais (CSS, JavaScript, imagens)
3. Aplica estilos CSS
4. Executa JavaScript
5. Pinta o resultado final na tela

Cada recurso adicional (arquivo CSS, imagem, bundle JS) dispara seu próprio mini ciclo requisição-resposta.

---

O quadro completo

sequenceDiagram
  participant B as Navegador
  participant D as DNS
  participant S as Servidor (Rails)
  B->>B: 1. Interpreta a URL
  B->>D: 2. Consulta DNS
  D-->>B: Endereço IP
  B->>S: 3. Handshake TCP
  S-->>B: Conexão OK
  B->>S: 4. Requisição HTTP
  S->>S: 5. Rota → Controller → Model → View
  S-->>B: 6. Resposta HTTP
  B->>B: 7. Renderiza

Tudo isso acontece em menos de um segundo para uma aplicação bem construída.

---

Por que isso importa para desenvolvedores Rails

Todo conceito Rails mapeia para uma parte deste ciclo:

Passo do Ciclo	Conceito Rails
Parsing de URL	routes.rb, path helpers
Requisição HTTP	params, objeto request
Processamento servidor	Controllers, models, services
Resposta HTTP	render, redirect_to, status codes
Cookies/Sessions	session, cookies, autenticação
Cache	Fragment caching, ETags, HTTP caching

Entender o ciclo completo ajuda você a debugar problemas, otimizar performance e construir features que trabalham com a web em vez de contra ela.

---

Resumo

Passo	O Que Acontece
1. Parsing de URL	Navegador divide URL em scheme, host, path, query
2. Consulta DNS	Nome de domínio → endereço IP
3. Handshake TCP	Estabelecer conexão confiável
4. Requisição HTTP	Navegador pede um recurso
5. Processamento servidor	Rails roteia, processa, consulta banco
6. Resposta HTTP	Servidor envia status code, headers e body
7. Renderização navegador	HTML → DOM → pintar na tela