O armazenamento em cache de páginas da web e respostas de API pode resolver problemas de sobrecarga do sistema e baixa experiência do usuário causados por solicitações de dados desnecessárias.
É possível usar várias técnicas de cache, como armazenamento do navegador, Axios Interceptor, Nuxt keep-alive, Vuex e cache de servidor web. O cache de páginas renderizadas no lado do servidor é eficaz para melhorar o desempenho, mas é preciso ter cuidado com o uso da memória.
A invalidação do cache permite a aplicação imediata de alterações na distribuição de recursos, como imagens.
Você provavelmente já passou pela experiência de recarregar uma página que já havia sido carregada ao clicar em "Voltar" em um site.
Por exemplo, em uma loja online, quando você clica em um produto listado nos resultados de pesquisa e depois clica em "Voltar",
a pesquisa é realizada novamente.
Recarregar uma página que já foi carregada não é apenas ruim para a experiência do usuário (UX), mas também cria problemas maiores no sistema.
Recarregar a página acarreta chamadas desnecessárias à API e aumenta o tráfego.
Isso pode resultar em problemas de custo e, se a página estiver coletando dados, pode levar à supercoleta de dados específicos.
Para resolver isso, o uso de cache para 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 a guia são fechados.
- IndexedDB é usado para armazenar grandes quantidades de dados. Ele permite armazenamento assíncrono e é um banco de dados NoSQL. Pode armazenar imagens e vídeos. 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, poderá usar interceptadores como um recurso integrado. Para a mesma solicitação, ele retorna a resposta sem enviá-la ao servidor.
Armazenamento em cache dentro da estrutura Nuxt
Você pode armazenar em cache um componente envolvendo-o na 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.
Também existe o método de usar o Vuex. O princípio é o mesmo do armazenamento do navegador.
Você pode usar um servidor web (Nginx) para incluir 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, portanto, nesse caso, você precisará invalidar o cache. Você pode renomear os arquivos, enviar uma solicitação para invalidar o cache ou, se estiver usando o AWS CloudFront, poderá aplicar a invalidação do cache.
Também existe um método para armazenar em cache a própria página renderizada pelo servidor Nuxt no cache de memória.
É o cache do lado do servidor, e não apenas a API, mas toda a página é armazenada em cache. Em outras palavras, ela é carregada imediatamente sem atrasos ao clicar em "Voltar". Embora tenha um desempenho excelente, lembre-se de que 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.
Quando os outros 9.999 usuários acessam a mesma página, o servidor responde com o resultado em cache.
-> Este método não é ideal se você precisar fornecer dados personalizados para cada usuário.