Output cache with tagging and cache forwarding added

[pkarw]

Output Cache

To limit the number of Elastic queries we've introduced Output API Cache (disabled by default).
The output cache is set by the following config/local.json variables:

    "server": {
      "host": "localhost",
      "port": 3000,
      "protocol": "http",
      "api": "api",
      "useOutputCacheTagging": true,
      "useOutputCache": true,
      "outputCacheDefaultTtl": 86400,
      "invalidateCacheKey": "aeSu7aip",
      "invalidateCacheForwarding": false,
      "invalidateCacheForwardUrl": "http://localhost:3000/invalidate?key=aeSu7aip&tag=",      
    },
    "redis": {
      "host": "localhost",
      "port": 6379,
      "db": 0
    },

Dynamic tags

The dynamic tags config option: useOutputCacheTagging - if set to true, Vue Storefront is generating the special HTTP Header X-VS-Cache-Tags

res.setHeader('X-VS-Cache-Tags', cacheTags);

Cache tags are assigned regarding the products and categories that are used on the specific page. A typical X-VS-Cache-Tags tag looks like this:

X-VS-Cache-Tags: P1852 P198 C20

The tags can be used to invalidate the Varnish cache, if you're using it. Read more on that.

Redis

If both useOutputCache and useOutputCacheTagging options are set to true, Vue Storefront is using output cache stored in Redis (configured in the redis section of the config file). Cache is tagged with dynamic tags and can be invalidated using a special webhook:

An example call to clear all pages containing specific product and category:

curl http://localhost:8080/invalidate?tag=P1852,C20

An example call to clear all product, category, taxrule and attribute entities

curl http://localhost:8080/invalidate?tag=product,category,taxrule,attribute

CLI cache clear

You can manually clear the Redis cache for specific tags by running the following command:

npm run cache clear
npm run cache clear -- --tag=product,category
npm run cache clear -- --tag=P198
npm run cache clear -- --tag=*

Available tag keys are set in the config.server.availableCacheTags (by default: "product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C")

Dynamic cache invalidation:

All the official Vue Storefront data indexers including magento1-vsbridge-indexer, magento2-vsbridge-indexer and mage2vuestorefront support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you are properly using the config.server.invalidateCacheForwardUrl config variable as the indexers can send the cache invalidate request only to one URL (frontend or backend) and it should be forwarded. Please check the default forwarding URLs in the default.json and adjust the key parameter to the value of server.invalidateCacheKey.

For mage2vuestorefront please do use the proper ENV variables:

export VS_INVALIDATE_CACHE_URL=http://localhost:3000/invalidate?key=SECRETKEY&tag=
export VS_INVALIDATE_CACHE=1

For magento1-vsbridge-indexer and magento2-vsbridge-indexer please do use the proper settings in the Magento admin panel.

Note: Please note that key=SECRETKEY should be equal to vue-storefront/config/local.json value of server.invalidateCacheKey