Caching

Introduction

BigCommerce integration supports CDN caching since version 1.2.0. To enable it in the application, you have to remove cookies and selected headers from requests. This is because CDNs treat requests with cookies and specific headers as user-specific.

To customize the caching settings, you can also use the @vue-storefront/http-cache module.

Modern mode

Building and running the Nuxt application with the --modern=server or --modern flags adds the vary: User-Agent header, which prevents CDNs from caching the requests.

To support CDN caching, you have to use --modern=client or don't use modern mode at all. You can read more in the Modern mode (opens new window) document.

// package.json

{
  "scripts": {
    "build": "nuxt build --modern=client",
    "build:analyze": "nuxt build -a --modern=client",
    "start": "nuxt start --modern=client"
  }
}

Internationalization

When you enable the browser language detection feature in the nuxt/i18n plugin, it adds the i18n_redirected cookie to requests. This header has to be removed by disabling this feature to enable CDN caching.

// nuxt.config.js
{
  "i18n": {
    "detectBrowserLanguage": false
  }
}

Cache control

The @vue-storefront/http-cache module gives you control over the http-cache header. To use it in your project, follow the How to install (opens new window) instructions.