Armazenamento em cache de conteúdo estático e dinâmico: como funciona?

Qual é a diferença entre conteúdo estático e dinâmico?

Conteúdo estático é qualquer arquivo armazenado em um servidor e sempre é exibido aos usuários da mesma forma. Arquivos HTML e imagens são exemplos desse tipo de conteúdo. Para entender melhor o conteúdo estático, pense em um jornal. Após a publicação, qualquer pessoa que comprar uma cópia verá os mesmos artigos e as mesmas fotos, não importa o que aconteça durante o dia.

Já o conteúdo dinâmico muda com base em fatores específicos do usuário, como a hora do acesso, o local e o dispositivo. Uma página web dinâmica aparece de modo diferente para cada pessoa e muda de acordo com a interação do usuário. É como se um jornal fosse reescrito enquanto você lê. Assim, as páginas web ficam mais personalizadas e interativas.

Um site de notícias moderno é um bom exemplo de conteúdo dinâmico: ao contrário de um jornal, os artigos são atualizados ao longo do dia e a página principal pode exibir manchetes diferentes com base no local ou no status de login do visitante. Páginas de Redes sociais são outro exemplo: o feed de notícias do Facebook é totalmente distinto para cada usuário. Além disso, é possível interagir com o conteúdo para alterá-lo curtindo, compartilhando ou comentando nas postagens.

Uma página web dinâmica não é armazenada como arquivos HTML estáticos. Em vez disso, scripts do servidor geram um arquivo HTML em resposta a eventos (como interações ou logins do usuário) e o enviam ao navegador web. E como o conteúdo dinâmico é gerado no servidor, normalmente é exibido por servidores de origem, e não no cache.

Por muito tempo acreditou-se que era impossível armazenar em cache o conteúdo dinâmico. Mas novas tecnologias permitem que sites exibam conteúdo dinâmico armazenado em cache e isso reduz significativamente a latência e mantém a experiência do usuário interativa.

Como o conteúdo estático é armazenado em cache?

O processo normal é salvar uma cópia do arquivo estático em cache (por exemplo, uma imagem) quando o conteúdo é exibido, de modo que ele fique mais perto do usuário e seja veiculado mais rapidamente na próxima vez. Navegadores e Redes de distribuição de conteúdo (CDNs) podem armazenar conteúdo estático em cache por um período definido e exibi-lo aos usuários enquanto ele for solicitado. Isso é possível porque o conteúdo estático não muda com o passar do tempo, ou seja, o mesmo arquivo é mostrado repetidamente.

Como funciona o armazenamento em cache de conteúdo dinâmico?

O conteúdo dinâmico é gerado por scripts que alteram o conteúdo na página. Quando você executa scripts em um cache de CDN em vez de em um servidor de origem, é possível gerar e exibir conteúdo dinâmico do cache. Portanto, o conteúdo dinâmico é essencialmente "armazenado em cache" e não precisa ser exibido pela origem, o que reduz o tempo de resposta a solicitações do cliente e acelera páginas web dinâmicas.

O Cloudflare Workers, por exemplo, é composto por funções JavaScript sem servidor executadas na CDN da Cloudflare. Essas funções respondem a uma variedade de eventos e entradas, incluindo tipo de dispositivo, hora do dia, local do usuário ou dados de APIs de terceiros. Com base nesses parâmetros, é possível gerar e exibir conteúdo dinâmico para os dispositivos do cliente, ou alterar, armazenar em cache ou limpar do cache o conteúdo estático.

Como o Cloudflare Workers é um código JavaScript, os desenvolvedores podem usá-lo para criar uma ampla variedade de recursos ou um aplicativo inteiro, além de armazenar conteúdo dinâmico em cache. Aliás, o Cloudflare Workers pode ser implantado e propagado para locais de CDN em todo o planeta em questão de segundos.

O Cloudflare Workers é executado em um ambiente leve para que o código seja ativado e executado em milissegundos. É uma ferramenta que permite aos desenvolvedores executar código sem se preocupar com a configuração de um back-end. Saiba mais sobre a computação sem servidor.

Qual é a diferença entre o armazenamento em cache de conteúdo dinâmico e a compactação de conteúdo dinâmico?

Outra abordagem para acelerar páginas web dinâmicas é compactar o conteúdo dinâmico gerado pelo servidor de origem para exibi-lo da maneira mais rápida e eficiente possível. Com a compactação dinâmica, o conteúdo ainda vem do servidor de origem em vez do cache, mas os arquivos HTML gerados são muito reduzidos para chegar ao dispositivo do cliente mais depressa.

Como o uso de Edge Side Includes (ESI) acelera páginas web dinâmicas?

Muitas vezes, uma grande quantidade de conteúdo em uma página web dinâmica permanece igual para todos os usuários e somente determinados elementos são dinâmicos. Isso significa que grande parte do código HTML é duplicado em cada cópia dinâmica da página. Para solucionar essa ineficiência, várias empresas trabalharam juntas para desenvolver o Edge Side Includes (ESI), uma linguagem de marcação que especifica onde o conteúdo dinâmico aparece em uma página web. (O ESI é usado em algumas CDNs, mas ainda não é aceito pela W3C, a organização que rege os padrões da web.)

O conteúdo com uma tag do ESI é buscado em outro lugar, enquanto o resto do conteúdo da página web pode ser armazenado em cache. Se apenas parte da página web é gerada dinamicamente e o restante fica em cache, o carregamento será muito mais rápido do que se a página inteira precisasse ser gerada para cada usuário. É possível combinar o ESI com o Cloudflare Workers para aumentar ainda mais a eficiência do processo.