caching not working

[egloffmark]

I tried to use it but it is not working, the component which wraps a axios call still calls the webservice. I also tried to cache all pages by using just '/'. any idea what could be the issue? Thank you

nuxt config:

const isProduction = (process.env.NODE_ENV === 'production')  
const host = (isProduction) ? 'api.xxx.com' : 'localhost'
const scheme = (isProduction) ? 'https' : 'http'
const baseUrl = (isProduction) ? '${scheme}://${host}/rest-api' : '${scheme}://${host}:8080/vrmandat-rest-api'
export default {
  env: {
    api: {
      host: host,
      scheme: scheme,
      baseUrl: baseUrl
  },
  payment: {
  stripe: {
       mode: 'test',
       test: {
         publicKey: 'pk_test_xxx'
       },
       live: {
         publicKey: ''
      }
     }
   }
  },
  mode: 'universal', 
 head: { 
   title: process.env.npm_package_name || '', 
    meta: [ 
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 
    ], 
    link: [ 
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 
    ],
    script: [ 
      { src: 'https://www.paypalobjects.com/api/checkout.js' } 
    ] 
  }, 
  css: [ 
    '@/assets/styles/global.scss'
   ], 
  plugins: [
    '~/plugins/axios.js',
    '~/plugins/validate.js',
    '~/plugins/mq.js',
    '~/plugins/global.js',
    '~/plugins/print.js'
  ],
  buildModules: [
  ],
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '~/modules/nuxt-auth/lib/module/index.js',
    'nuxt-i18n',
    'nuxt-stripe-module',
    'nuxt-ssr-cache',
  ],
  axios: {
    baseURL: '${baseUrl}/',
    https: (isProduction) ? true : false,
    progress: true,
    debug: false
  },
  /*
  ** Build configuration
  */
  build: {
    // Add exception
    transpile: [
      'vee-validate/dist/rules'
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  },
  /*
  ** Router configuration
   */
  router: {
    middleware: [
      'auth',
      'auth-refresh'
    ]
  },
  /*
  ** Auth configuration
   */
  auth: {
    plugins: [
      '~/plugins/auth.js'
    ],
    redirect: {
      login: '/auth/login',
      logout: '/',
      home: '/',
      callback: '/auth/callback'
    },
    strategies: {
      local: {
        _scheme: 'local',
        name: 'local',
        endpoints: {
          login: {
            url: `${baseUrl}/auth/getAccessToken`,
            method: 'post',
            propertyName: false
          },
          refresh: {
            url: '${baseUrl}/auth/refreshAccessToken',
            method: 'post',
            propertyName: false
          },
          logout: {
            url: `${baseUrl}/auth/logout`,
            method: 'post',
            propertyName: false
          },
          user: {
            url: '${baseUrl}/auth/user',
            method: 'get',
            propertyName: false
          }
        },
        tokenRequired: true,
        tokenType: 'Bearer',
        tokenName: 'Authorization',
        globalToken: true,
        accessTokenKey: 'access_token',
        refreshTokenKey: 'refresh_token',
        automaticRefresh: true,
        expiration: {
          factor: 0.9,
          timeFormat: 'seconds'
        }
      }
    }
  },
  /*
  ** i18n configuration
   */
  i18n: {
    locales: [
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'de',
        name: 'Deutsch',
        file: 'de.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      },
      {
        code: 'it',
        name: 'Italiano',
        file: 'it.json'
      }
    ],
    lazy: true,
    defaultLocale: 'de',
    langDir: 'locales/'
  },
  stripe: {
    version: 'v3',
    publishableKey: 'pk_test_xxx'
  },

  cache: {
        // if you're serving multiple host names (with differing
        // results) from the same server, set this option to true.
        // (cache keys will be prefixed by your host name)
        // if your server is behind a reverse-proxy, please use
        // express or whatever else that uses 'X-Forwarded-Host'
        // header field to provide req.hostname (actual host name)
        useHostPrefix: false,
        pages: [
          // these are prefixes of pages that need to be cached
          // if you want to cache all pages, just include '/'
          '/charts/alter',
        ],

        store: {
          type: 'memory',

          // maximum number of pages to store in memory
          // if limit is reached, least recently used page
          // is removed.
          max: 100,

          // number of seconds to store this page in cache
          ttl: 60,
        },
      },
}

package.json:

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.8.4",
    "@nuxtjs/axios": "^5.6.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "2.1.0",
    "highcharts": "^7.2.1",
    "highcharts-3d": "^0.1.7",
    "highcharts-vue": "^1.3.5",
    "libphonenumber-js": "^1.7.23",
    "moment": "2.24.0",
    "nuxt": "2.10.2",
    "nuxt-i18n": "^6.0.2",
    "nuxt-ssr-cache": "^1.5.1",
    "nuxt-stripe-module": "^2.0.0",
    "popper.js": "^1.15.0",
    "v-click-outside": "^2.1.3",
    "vee-validate": "^3.0.3",
    "vue-html-to-paper": "^1.1.1",
    "vue-mq": "^1.0.1",
    "vue-multiselect": "^2.1.6",
    "vue-router": "^3.1.3",
    "vue-script2": "^2.1.0"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.3.1",
    "vue-jest": "^4.0.0-0"
  }
}

[michaelpumo]

Not working for me either. Not sure if this is designed to be a drop-in solution? I'm no expert on how caching works.

[rahultcognologix]

This not working for me either. Any additional documentation on how to make this work @arash16

[wood-liu92]

How to know whether the cache is effective

[vesper8]

Has anyone manage to get it working? Is this library no longer working at all and abandonned?

I also found https://github.com/legeneek/nuxt-page-cache which seems a bit promising if this package no longer works, but it's missing a big part of the implementation that the user must provide themselves.. the part that sets/gets the items from the cache

[arash16]

Unfortunately I don't have time to check for possible problems with customized configurations and other modules mixed in. We're already using this module in production, with 500k daily users, with no problems.

[vesper8]

@arash16 thanks.. it's good to hear that it's working for you, are you using the latest version of nuxt?

Also.. am I right to notice that there is no file store? only memory? it would have been very nice to be able to use a file store so that the max could be a lot higher and it would work out well on sites with tons of pages and limited ram on the server instance.. any plans to add a file store?

[jeremy21212121]

Also.. am I right to notice that there is no file store? only memory? it would have been very nice to be able to use a file store so that the max could be a lot higher and it would work out well on sites with tons of pages and limited ram on the server instance.. any plans to add a file store?

An option for you might be to use NGINX as proxy/cache in front of nuxt. It is very mature, stable, configurable and well-documented. I use it in a file-based configuration with a very short duration to keep my small servers from getting hammered in the event of a large spike in traffic. It also handles TLS. It can keep serving a cached version if your nuxt server goes down. It is also trivial to instrument the cache with a response header so you can see that it is working.

In case you can't tell, I'm a big fan of nginx :stuck_out_tongue_closed_eyes:

The nginx docs, while very complete, can be a bit daunting as there are so many options. If you are interested, check out their guide to caching, I find it very approachable.

[vesper8]

Thank you for your helpful reply @jeremy21212121, I'm also a fan of Nginx but am not so advanced that I would have thought this problem could be dealt with at that level. I will have a look at that guide. If you were so inclined however I would have found it very useful to see your server block for a site that uses this file-cache method : ) Looking at other people's solution is my preferred way of learning! Kind regards : )

[flozero]

Then that was i was scared about. Not working and not really maintain... Then I will search for something else :(

[JFGHT]

Hello there!

Indeed, for me it was not working either, but I think I found the reasons:

1.- If you don't use a custom function for the cache key, remove the key function from the nuxt config. 2.- For some reason, req.host and req.hostname can be empty, so the default cache key function won't work. You can fix it this way. 3.- In Redis and cloud environments, most of the vendors do not allow you to use the Redis' CONFIG (note that I also changed it to caps from the original code). So in your nuxt configuration, remove the configure property.

To have all these fixes, and because it looks this is not mantained anymore, I forked the repo, built it and installed my own version from my GitHub repo's compile branch.

[devzom]

Any documentation how to use it or even an example could be helpful. Especially some utils to check if it even work. Have any one managed to use this plugin and have some example?

[hugojing]

I had solved via this:

key(route, context) {
  // custom function to return cache key, when used previous
  // properties (useHostPrefix, pages) are ignored. return 
  // falsy value to bypass the cache
  if (route === '/') {
    return 'page:home:string';
  }
  let page = route.substr(1).split('/');
  page = page.join('.');
  return `page:${page}:string`;
},

[viralpatel380]

I had solved via this:

key(route, context) {
  // custom function to return cache key, when used previous
  // properties (useHostPrefix, pages) are ignored. return 
  // falsy value to bypass the cache
  if (route === '/') {
    return 'page:home:string';
  }
  let page = route.substr(1).split('/');
  page = page.join('.');
  return `page:${page}:string`;
},

its Working !

[patrikengborg]

If anyone is looking for a working solution, try this package instead: https://github.com/ziaadini/nuxt-perfect-cache

[Jeremy-DX]

A fix of this problem https://github.com/Jeremy-DX/nuxt-page-cache

[Serverfrog]

If anyone is looking for a working solution, try this package instead: https://github.com/ziaadini/nuxt-perfect-cache

Be Aware that with this package, the Redis URL and credentials are sent in clear text to all clients