How to enable Cache in Vue Storefront 2

Cache is a really important concept in modern web development that allows to greatly improve the second load of the certain page and in general, improve the User Experience. If you are not yet familiar with it, I have published an article about it some time ago that you can read here.

In Vue Storefront cache can be enabled on both browser and the server. The first one will be using a Cache-Control response header to cache the response on the browser, while the second, will be using a cache driver like Redis to cache all pages.

Browser Cache

To enable Cache on the browser level, we will be using a http-cache package from Vue Storefront that you can check out here.

Installation

This package handles adding http-cache header to document after render for caching capabilities

First, install the dependency

yarn add @vue-storefront/http-cache

Next, add it to the modules array in your nuxt.config.js:

['@vue-storefront/http-cache']

And that's it. Thanks to this module, homepage, category page, and product page will be automatically returning a response header Cache-Control with a certain default value that will enable your browser to cache it properly. Check out the following section to see some configuration options.

Configuration

The package allows you to configure certain properties of it to make it work differently and suit your needs best.

default

This property allows you do override default value of http-cache header which is initially set to max-age=60

['@vue-storefront/http-cache', {
  default: 'max-age=120'
}]

matchRoute

Customize http-cache values for selected routes. you can use * for a wildcard. To remove http-cache header use none value.

['@vue-storefront/http-cache', {
  matchRoute: {
    '/': 'max-age=240',
    '/p/*': 'max-age=360',
    '/c/*': 'none'
  }
}]

Server Cache

To enable Cache on the server side, we can also use the packages provided by Vue Storefront, namely @vue-storefront/cache and @vue-storefront/redis-cache.

First, let's install the required dependencies

yarn add @vue-storefront/cache
yarn add @vue-storefront/redis-cache

Next, let's add required configuration for the packages to work correctly

// nuxt.config.js

export default {
  modules: [
    ['@vue-storefront/cache/nuxt', {
      invalidation: {
        // Invalidation options
      },
      driver: [
        '@vue-storefront/redis-cache',
        {
          defaultTimeout: 86400,
          redis: {
            host: 'localhost',
            port: 6379,
            password: 'password'
          }
        }
      ]
    }]
  ]
};

Check out the following docs to understand better the process of using server cache with Vue Storefront:

• Integrating Cache Driver
• SSR Cache
• Redis Cache

Summary

Well done! You have just enabled the Cache on both browser and server environments of your Vue Storefront application. This should improve the performance of you e-commerce website by a mile!