Vue Cache Server - Aplicações Vue.js com Nuxt

Esse plugin para Nuxt cria um serviço de cache para responses de APIs utilizando Axios.

O próprio plugin fará o controle da validade do cache para as rotas indicadas, além de também permitir que todo o cache seja invalidado por inteiro com base em uma hash via query string.

Com esse plugin o número de requests feitas ao backend diminui drásticamente, permitindo que a página seja entregue ao navegador de forma muito mais rápida, resultando em um menor consumo de recursos e influenciando positivamente o pagespeed do projeto.

DICA: Utilize o plugin de log para analisar as requests SSR que estão sendo feitas em cada página e identifique quais podem ser cacheadas (aquelas que não dependem do usuário, por exemplo) Vue Axios Logger

IMPORTANTE: Sempre navegue pelo projeto após a aplicação dos caches, principalmente em páginas onde as requisições são feitas via SSR no carregamento inicial e via client durante a navegação.

Siga os passos abaixo para implementar o plugin de cache:

1. Crie o plugin plugins/cache.server.js

Adicione o plugin com base no arquivo cache.server.js desse repositório e inclua no nuxt.config.js

export default {
  plugins: [
    '~/plugins/cache.server.js'
  ]
}

2. Edite as rotas que devem ser cacheadas no array "allowedCacheUrls"

 const allowedCacheUrls = [
    '/v2/front/struct/menus/menuPrincipal',
    '/v2/front/struct/menus/top-pitchbar',
    '/v2/front/url/home',
    '/v2/front/settings',
    '/v2/front/showcase/banners/main-banner',
    '/v2/front/struct/menus/home-pitchbar',
    'v2/front/struct/menus/footer-menu',
    //DEMAIS APIS QUE GOSTARIA DE REALIZAR O CACHE
  ];

3. Defina a hash de limpeza de cache via query string

 let clearCache = route.query['front-clear-cache-pass'] === 'HASH_LIMPEZA_CACHE';

4. Atualize as chamadas das requests para utilizar o método do plugin de cache

Troque as chamadas diretas do Axios (this.$axios.get) para as chamadas do novo método this.$getRequestCache nas rotas que estão autorizadas a serem cacheadas.

//TROQUE ESSA CHAMADA
const { data } = await this.$axios.get('v2/front/struct/menus/footer-menu')

//POR ESSA 
const { data } = await this.$getRequestCache('v2/front/struct/menus/footer-menu')

Importante:

Caso a rota seja chamada via SSR e também via client, é importante criar uma validação para chamar o cache apenas em modo SSR:

const getApiData = process.server ? this.$getRequestCache : this.$axios.get;

const { data } = await getApiData('v2/front/struct/menus/footer-menu')

5. Executar o Nuxt no modo SSR

Se estiver usando o Nuxt com target: 'server' (o padrão), isso já é suficiente. Basta rodar:

npm run dev

Após rodar a aplicação, navegue pelas páginas e verifique se as chamadas são feitas apenas no primeiro acesso a cada rota. O tempo de resposta das páginas deve diminuir e a percepção será imediata em produção.