Adicionando recursos dinâmicos a um site com cache agressivo

Adicionando recursos dinâmicos a um site com cache agressivo

28 de janeiro de 2026

Meu blog usa cache agressivo: ele fica atrás do Cloudflare com um cabeçalho de cache de 15 minutos, o que garante que ele sobreviverá até mesmo ao maior pico de tráfego para qualquer página. Recentemente, adicionei alguns recursos dinâmicos que funcionam apesar do cache de página inteira. Veja como isso funciona.

Editar links que são visíveis apenas para mim

Este é um site Django e eu o gerencio através do administrador do Django.

Tenho quatro tipos de conteúdo: entradas, postagens de links (também conhecidas como blogmarks), citações e notas. Cada um deles tem um modelo diferente e, portanto, uma área de administração do Django diferente.

Eu queria um link de “edição” nas páginas públicas que só fosse visível para mim.

O botão fica assim:

Resolvi a exibição condicional deste botão com localStorage. Eu tenho um pouquinho de JavaScript que verifica se o localStorage chave ADMIN está definido e, se estiver, exibe um link de edição com base em um atributo de dados:

document.addEventListener('DOMContentLoaded', () => {
  if (window.localStorage.getItem('ADMIN')) {
    document.querySelectorAll('.edit-page-link').forEach(el => {
      const url = el.getAttribute('data-admin-url');
      if (url) {
        const a = document.createElement('a');
        a.href = url;
        a.className = 'edit-link';
        a.innerHTML = ' Edit';
        el.appendChild(a);
        el.style.display = 'block';
      }
    });
  }
});

Se quiser ver meus links de edição, você pode executar este trecho de JavaScript:

localStorage.setItem('ADMIN', '1');

Meu painel de administração do Django tem uma caixa de seleção personalizada na qual posso clicar para ativar e desativar esta opção em meu próprio navegador:

Navegação aleatória dentro de uma tag

Esses links de edição administrativa são um padrão muito simples. Um recurso mais interessante é um recurso que adicionei recentemente para navegar aleatoriamente dentro de uma tag.

Aqui está um GIF animado mostrando essas navegações aleatórias de tags em ação (experimente aqui):

Em qualquer uma das páginas de tags do meu blog você pode clicar no botão “Aleatório” para ir para uma postagem aleatória com essa tag. Esse botão aleatório persiste no cabeçalho da página e você pode clicar nele para continuar saltando para itens aleatórios na mesma tag.

Uma postagem pode ter várias tags, então é necessário um pouco de magia persistente para lembrar em qual tag você está navegando e exibir o botão relevante no cabeçalho.

Mais uma vez, isso usa localStorage. Qualquer clique em um botão aleatório registra a tag e o carimbo de data/hora atual no random_tag digite localStorage antes de redirecionar o usuário para o /random/name-of-tag/ página, que seleciona uma postagem aleatória e a redireciona para lá.

Sempre que uma nova página é carregada, o JavaScript verifica se ela random_tag key tem um valor que foi registrado nos últimos 5 segundos. Nesse caso, esse botão aleatório é anexado ao cabeçalho.

Isso significa que, desde que a página carregue dentro de 5 segundos após o usuário clicar no botão, a navegação aleatória da tag persistirá na página.

Você pode ver o código para isso aqui.

E as instruções

Eu construí o recurso de tag aleatória inteiramente usando Claude Code para web, solicitado no meu iPhone. Eu comecei com o /random/TAG/ ponto final (transcrição completa):

Construa /random/TAG/ – uma página que escolhe uma postagem aleatória (pode ser uma entrada ou blogmark ou nota ou citação) que possui essa tag e envia um redirecionamento 302 para ela, marcada como sem cache para que a Cloudflare não a armazene em cache

Use uma união para construir uma lista de cada tipo de conteúdo (uma string representando a tabela dos quatro tipos) e chave primária para cada item marcado com essa tag, depois ordene aleatoriamente e retorne o primeiro

Em seguida, aumente o tipo e o ID em um objeto, carregue-o e redirecione para o URL

Incluir testes – deve funcionar configurando uma tag com um de cada tipo de conteúdo e, em seguida, executando um loop chamando esse endpoint até que ele retorne um de cada um dos quatro tipos ou atinja 1.000 loops, ponto em que falha com um erro

Então:

Não gosto dessa solução, algumas das minhas tags possuem milhares de itens

Podemos fazer algo inteligente com um CTE?

Aqui está algo inteligente com uma solução CTE que encontramos.

Para o botão “Postagem aleatória” (transcrição):

Veja o commit mais recente e modifique a página /tags/xxx/ para ter um botão “Postagem aleatória” que tenha uma boa aparência e links para a página /random/xxx/

Então:

Coloque antes e não depois do ícone de feed. Só deve ser exibido se uma tag tiver mais de 5 postagens

E finalmente, o localStorage implementação que persiste um botão de tag aleatório no cabeçalho (transcrição):

Revise os dois últimos commits. Faça com que clicar no botão Aleatório em uma página de tag defina um valor localStorage para random_tag com essa tag e um carimbo de data / hora. Em qualquer outra visualização de página que use o modelo de item base, adicione JS que verifica o valor localStorage e garante que o carimbo de data/hora esteja dentro de 5 segundos. Se estiver dentro de 5 segundos, ele adiciona um botão “Nome da tag aleatória” à pequena barra de navegação superior, estilizada como o botão Aleatório original, que ultrapassa o carimbo de data / hora do localStorage e envia o usuário para /random/nome-da-tag/ quando ele clica nele. Dessa forma, clicar em “Aleatório” em uma página de tag enviará o usuário a uma experiência onde ele poderá continuar clicando para continuar navegando aleatoriamente naquele tópico.