nuxt-ssr-cache: caching not working

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"
  }
}

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 7
  • Comments: 16 (1 by maintainers)

Most upvoted comments

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`;
},

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.

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 !

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

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