Vue Storefront Kentico

# Caching content

Using cache might be beneficial for performance and reduce CMS API usage, reducing your final bill.

As of version 0.2.0, this package automatically caches the content of the CMS if your project has the @vue-storefront/cache module installed and caching enabled.

If you don't already use the cache module, refer to the SSR Cache (opens new window) document to learn how to add it to your project.

# Cache invalidation

This step is crucial

This step is crucial because - without it - changes from your CMS will not be reflected in your application.

Every time you change something in Kentico Kontent it has to inform the cache to invalidate the old data. Below we describe how to implement it.

# Generate Webhook secret

Before we can configure the cache, we need to generate the Webhook secret in Kentico.

  1. In the Kentico panel, go to Project Settings and select Webhooks.
  2. Click the Create a new Webhook button.
  3. Enter the URL application and invalidation endpoint you configured while setting up the cache module.
  4. Select triggers (we suggest selecting the publish trigger).

Webhook Configuration

# Update cache configuration

Once you have the Webhook secret, open the nuxt.confg.js file and find the modules array. Add two options to your cache module:

  1. Add the cmsKey property with a secret key from the Webhook you created. It's needed to validate that the invalidation request is genuinely coming from Kentico Kontent.
  2. Add the '@vsf-enterprise/kentico-kontent/invalidateCacheHandler' string to the handlers array, along with other handlers you have.







 
 
 
 






// nuxt.config.js
export default {
  modules: [
    [
      '@vue-storefront/cache/nuxt',
      {
        invalidation: {
          cmsKey: 'KENTICO_KONTENT_WEBHOOK_SECRET',
          handlers: [
            '@vsf-enterprise/kentico-kontent/invalidateCacheHandler'
          ]
        }
      }
    ]
  ]
}

# Update the serverMiddleware/body-parser.js file

Open the serverMiddleware/body-parser.js file and override its contents with the following:







 
 
 




// serverMiddleware/body-parser.js
const bodyParser = require('body-parser')
const app = require('express')()

app.use(
  bodyParser.json({
    verify: (req, res, buf) => {
      req.rawBody = buf
    },
  }),
)
module.exports = app

← Usage →