Como armazenar em cache a resposta da API + cache de páginas da web

É comum você ter a experiência de recarregar uma página já carregada ao clicar em "Voltar" em um site.

Por exemplo, em uma loja online, depois de clicar em um produto listado nos resultados de pesquisa e clicar em "Voltar",

a pesquisa é refeita.

Recarregar a página já carregada não é bom para a experiência do usuário, mas também causa problemas maiores do sistema.

Recarregar a página causa chamadas desnecessárias à API e aumenta o tráfego.

Isso pode resultar em problemas de custo e, se você estiver coletando dados dessa página, pode haver um problema de coleta excessiva de dados específicos.

Para resolver isso, o cache de páginas ou resultados de API pode ser muito eficaz.

1. Usando o armazenamento do navegador (localStorage, SessionStorage, IndexedDB)

- localStorage mantém os dados mesmo após o fechamento do navegador.

- sessionStorage remove os dados quando o navegador ou guia é fechado.

- IndexedDB é usado para armazenar grandes quantidades de dados. Ele pode ser armazenado assincronamente e é NoSql. Imagens e vídeos também podem ser armazenados. A capacidade máxima varia de acordo com o navegador, mas é de cerca de 50 MB. Pode ser usado offline.

2. Axios Interceptor

Se você estiver usando o axios, você pode usar o interceptor embutido. Para a mesma solicitação, ele retorna a resposta sem enviar para o servidor.

Cache dentro da estrutura Nuxt

Você pode armazenar em cache um componente envolvendo-o em uma tag keep-alive.

Você pode configurar se chamará fetch() durante o renderização do lado do servidor. Se for false, fetch será chamado apenas no lado do cliente.

Existe também um método usando Vuex. O princípio é o mesmo que o armazenamento do navegador.

Você pode usar um servidor web (Nginx) para incluir as configurações de cache no cabeçalho de resposta.

No entanto, devido ao cache, a implantação de recursos como imagens pode não ser aplicada imediatamente. Nesse caso, você precisa invalidar o cache. Você pode alterar o nome do arquivo, enviar uma solicitação para invalidar o cache ou, se estiver usando o AWS CloudFront, pode aplicar a invalidação do cache.

Existe também um método para armazenar a própria página renderizada no servidor Nuxt no cache de memória.

Este é um cache do lado do servidor e não apenas a API, mas a página inteira é armazenada em cache. Em outras palavras, ela é carregada imediatamente ao clicar em "Voltar". O desempenho é excelente, mas você precisa ter cuidado porque usa a memória do servidor.

Se 10.000 usuários solicitarem a mesma página,

Quando o primeiro usuário solicita, a página é renderizada e armazenada em cache.

Depois disso, quando 9.999 usuários acessam a mesma página, o servidor responde com o resultado armazenado em cache.

-> Este método não é bom se você precisar fornecer dados personalizados para cada usuário.

+ cache internamente usa o pacote lru-cache.

* lru: Um algoritmo de cache que remove dados não usados por mais tempo primeiro.

Ele usa estruturas de dados de hash map ou lista duplamente vinculada para localizar rapidamente pares chave-valor: complexidade de tempo O(1)