Como Fazer Cache de Arquivos Estáticos com Nginx

Por Que o Cache de Arquivos Estáticos é Importante

Toda vez que um usuário visita seu site, o navegador solicita dezenas de arquivos estáticos: arquivos CSS, JavaScript, imagens, fontes e muito mais. Sem um cache adequado, cada requisição chega ao seu servidor, aumentando os tempos de carregamento e o uso de banda. O Nginx, um servidor web de alto desempenho, pode melhorar isso drasticamente ao instruir os navegadores a armazenar esses arquivos localmente e ao fazer cache deles no lado do servidor.

Neste guia, você aprenderá a configurar o Nginx para fazer cache de arquivos estáticos de forma eficaz, reduzindo a latência e a carga do servidor.

Entendendo o Cache do Navegador vs. Cache no Lado do Servidor

Existem dois tipos principais de cache relevantes aqui:

• Cache do navegador: O navegador armazena os arquivos localmente com base em cabeçalhos HTTP como Cache-Control e Expires. Visitas subsequentes carregam os arquivos do disco, evitando requisições de rede.
• Cache no lado do servidor: O Nginx armazena as respostas em memória ou em disco e as serve diretamente para requisições repetidas, reduzindo a carga do backend.

Ambos são cruciais para o desempenho. Vamos abordar os dois.

Passo 1: Configurar o Cache do Navegador com Cabeçalhos Expires

A maneira mais simples de habilitar o cache do navegador é adicionar diretivas expires à sua configuração do Nginx. Isso define os cabeçalhos Expires e Cache-Control.

Abra o arquivo de configuração do seu site (por exemplo, /etc/nginx/sites-available/example.com) e adicione um bloco location para arquivos estáticos:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Isso instrui o navegador a armazenar esses arquivos em cache por um ano. A diretiva immutable indica que o arquivo nunca mudará, então o navegador nem mesmo revalidará ao recarregar.

Boa prática: Use nomes de arquivo versionados (por exemplo, style.abc123.css) para que você possa atualizar os arquivos sem quebrar o cache. Quando o arquivo muda, o nome do arquivo muda e o navegador busca a nova versão.

Passo 2: Habilitar o Cache no Lado do Servidor com Proxy Cache

Se você estiver executando um servidor de aplicação (como Node.js, Python ou PHP) atrás do Nginx, pode fazer cache das respostas estáticas no Nginx para reduzir requisições ao backend.

Primeiro, defina um caminho de cache no bloco http do nginx.conf:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m max_size=1g inactive=60m use_temp_path=off;

Depois, no seu bloco server, use-o:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    proxy_cache static_cache;
    proxy_cache_valid 200 302 1y;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_pass http://backend;
}

Isso armazena em cache as respostas bem-sucedidas por um ano e serve conteúdo obsoleto se o backend estiver fora do ar. O cabeçalho X-Cache-Status ajuda a depurar (HIT, MISS, etc.).

Passo 3: Otimizar com Compressão e HTTP/2

O cache reduz as requisições, mas você pode acelerar ainda mais as transferências habilitando a compressão gzip e o HTTP/2.

Habilite o gzip no nginx.conf:

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_min_length 1000;

O HTTP/2 multiplexa requisições e é habilitado adicionando http2 à sua diretiva listen:

listen 443 ssl http2;

Observação: o HTTP/2 exige HTTPS. Se você ainda não configurou o TLS, consulte nosso guia sobre como o HTTPS e o TLS realmente funcionam.

Comparação: Diretivas Cache-Control

Passo 4: Testar e Verificar

Depois de aplicar as alterações, recarregue o Nginx: sudo nginx -s reload. Em seguida, teste com curl:

curl -I https://example.com/style.css

Procure pelos cabeçalhos Cache-Control e Expires. Você também pode usar o DevTools do navegador (aba Network) para ver se os arquivos estão sendo servidos do cache (Status 200 ou 304).

Para o cache no lado do servidor, monitore o cabeçalho X-Cache-Status.

Armadilhas Comuns e Boas Práticas

• Não faça cache de HTML: O HTML deve ser dinâmico ou ter tempos de cache curtos para refletir atualizações.
• Use versionamento: Acrescente hashes aos nomes de arquivo para invalidar o cache quando o conteúdo mudar.
• Defina max-age apropriado: Um ano é seguro para arquivos versionados.
• Monitore o tamanho do cache: Caches no lado do servidor podem crescer; defina max_size e inactive.
• Considere um CDN: Para públicos globais, um CDN pode armazenar arquivos em cache mais perto dos usuários.

Perguntas Frequentes

Como sei se meus arquivos estão sendo armazenados em cache?

Verifique os cabeçalhos de resposta com curl -I ou o DevTools do navegador. Procure por Cache-Control: public, max-age=31536000 e cabeçalhos Expires. No DevTools, a coluna Size mostrará "(from disk cache)" para arquivos em cache.

Qual é a diferença entre expires e Cache-Control?

expires define uma data absoluta, enquanto Cache-Control usa segundos relativos. O Cache-Control tem precedência em navegadores modernos. A diretiva expires do Nginx define ambos para compatibilidade.

Posso fazer cache de conteúdo dinâmico?

Sim, mas com cautela. Use proxy_cache com TTLs curtos e considere chaves de cache baseadas em cookies ou cabeçalhos. Para conteúdo específico do usuário, use private ou evite o cache.

Acelere Seu Fluxo de Trabalho com o TryQuickToolBox

Ao otimizar o desempenho do seu site, você pode precisar comprimir imagens ou PDFs. Experimente nosso Compressor de Imagens para reduzir o tamanho das imagens sem perder qualidade, complementando sua estratégia de cache do Nginx.