Cache is not working

[danyal14]

Hi,

We are running Nuxt app with default(recommenced) server. When using and configured nuxt-ssr-cache as defined in readme, it caches nothing with following configurations.

Am I missing something?

import webpack from 'webpack'
import cheerio from 'cheerio'
const nodeExternals = require('webpack-node-externals')
export default {
  mode: 'universal',
  server: {
    port: 80, // default: 3000
    host: '0.0.0.0' // default: localhost
  },
  loading: false,
  router: {
    middleware: ['redirect'],
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'by_date',
        path: '/live/:date',
        component: resolve(__dirname, 'pages/live/index.vue')
      })
    }
  },
  /*
   ** Headers of the page
   */
  head: {
    title: 'title here',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, viewport-fit=cover'
      },
      {
        hid: 'description',
        name: 'description',
        content:
          'description here'
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: 'https://www.xyz.xyz/favicon.ico'
      }
    ],
    script: [
      {
        src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        type: 'text/javascript'
      },
      {
        src:
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js',
        type: 'text/javascript'
      }
    ]
  },
  icon: {
    iconSrc: 'https://www.xyz.xyz/favicon.ico',
    iconFileName: 'https://www.xyz.xyz/favicon.ico'
  },
  /*
   ** Global CSS
   */
  css: ['~/assets/scss/index.scss'],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~plugins/bootstrap.js',
    { src: '~/plugins/vue-slick', ssr: false }
  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/dotenv',
    'cookie-universal-nuxt',
    ['@nuxtjs/google-tag-manager', { id: '', layer: 'dataLayer' }],
    [
      'nuxt-fontawesome',
      {
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: [
              'faCamera',
              'faExternalLinkAlt',
              'faBars',
              'faComment',
              'faCheck',
              'faArrowRight',
              'faChevronLeft',
              'faChevronRight',
              'faPlay',
              'faAlignLeft',
              'faTable',
              'faTh',
              'faFire',
              'faNewspaper'
            ]
          }
        ]
      }
    ],
    'nuxt-ssr-cache'
  ],
  cache: {
    useHostPrefix: false,
    pages: [
      '/'
    ],

    key(route, context) {
      // custom function to return cache key, when used previous
      // properties (useHostPrefix, pages) are ignored. return
      // falsy value to bypass the cache
    },

    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: 600
    }
  },
  hooks: {
    // This hook is called before rendering the html to the browser
    'render:route': (url, result) => {
      if (url.startsWith('/embed/')) {
        this.$ = cheerio.load(result.html)
        this.$('#__nuxt')
          .removeAttr('data-server-rendered')
          .removeAttr('id')
        this.$(`head script`).remove()
        this.$(`body script[src^="/_nuxt/"][src$="js"]`).remove()
        this.$(`head link[href^="/_nuxt/"][href$="js"]`).remove()
        result.html = this.$.html()
      }
    }
  },
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
   ** Build configuration
   */
  build: {
    extractCSS: true,
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vue-slick/]
          })
        ]
      }
    }
  }
}

[egloffmark]

I have the same issue

[arash16]

The key property given in example cache config is empty, either fill it and return some key, either remove it completely. Right now your config returns undefined cache keys. Copy/Paste is Evil.

[robthepaper]

Hi, Can you give an example on how to use the cache key? I have dynamic routes in nuxt and I would to cache a page or clear the cache depending on value in store for a given page.