How to enable Cache in Vue Storefront 2
Tags: performance, nuxt, vue, cache
Published: 2022-06-06 06:24:06

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](https://dev.to/jacobandrewsky/leveraging-cache-in-vuejs-and-nuxtjs-4b26).

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](https://redis.io/) 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](https://github.com/vuestorefront/vue-storefront/tree/main/packages/http-cache).

### Installation

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

First, install the dependency
 
```sh 
yarn add @vue-storefront/http-cache
```

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

```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`

```js
['@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.

```js
['@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

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

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

```ts
// 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](https://docs.vuestorefront.io/v2/integrate/cache-driver.html#integrating-cache-driver)
* [SSR Cache](https://docs.vuestorefront.io/v2/performance/ssr-cache.html)
* [Redis Cache](https://docs.vuestorefront.io/v2/integrations/redis-cache.html)

## 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!