Front-Commerce Cloud has a caching layer in front of your application.

Static assets or full-page / GraphQL caching is possible out-of-the-box.

The build-in cache has a hard size limit at 500MB (regardless of the plan size). The oldest cached items are removed from the cache whenever the limit is reached.

Configuration

The proxy cache configuration can be found in the .platform/routes.yaml file.

For full-page and GraphQL cache:

"https://{default}/":
  type: upstream
  upstream: "front-commerce:http"
  cache: # <-- cache rules
    enabled: true
    default_ttl: 10 # in seconds
    cookies: ["/^connect/"]
    headers: []

For static assets:

"https://{default}/static/":
  type: upstream
  upstream: "front-commerce:http"
  cache: !include "front-commerce-cloud/app/runtime/static_route_cache.yaml"
  attributes:
    fcc/url-env-var-suffix: "STATIC"

For media:

"https://{default}/media/":
  type: upstream
  upstream: "front-commerce:http"
  cache: !include "front-commerce-cloud/app/runtime/static_route_cache.yaml"
  attributes:
    fcc/url-env-var-suffix: "MEDIA"

Useful commands

You can take the actions below to verify that proxy caching is working as you'd expect.

First, you must ensure that your application sends correct Cache-Control headers for what you want to cache.

Check with the following command:

$ curl --silent -I http://localhost:4000 | grep -i cache-control
cache-control: public, max-age=32140800 # <-- cache headers defined!

Then, check the same headers on a deployed environment. Production and development environments all support this feature.

If Cache-Control headers are also detected, you can then check the x-platform-cache header value:

$ curl --silent -I https://example.com/ | grep -i x-platform-cache
x-platform-cache: HIT

Possible values are:

HIT: the resource was returned from the proxy cache (i.e: it didn't hit the NodeJS FC server)
MISS: the resource was not in the cache (it will be cached according to Cache-Control response headers)
BYPASS: the resource was explicitely excluded from the cache

A bash script to automate validation

Copy and adapt the script below to analyze several pages of your sites on different environments.

Try to list all types of pages available in your project.

#!/usr/bin/env bash

BASE_URL=$1
NOW=$(date +"%c")

echo "## Cache test for $BASE_URL ($NOW)"

getCacheOf() {
  local url=$BASE_URL$2
  echo ""
  echo "### $1"
  echo "*$url*"
  echo ">" $(curl --silent -I $url | grep -i cache-control)
}

getCacheOf "Home Page" "/"
getCacheOf "PLP" "/venia-dresses.html"
getCacheOf "PDP" "/petra-sundress.html"
getCacheOf "CMS page" "/about-us"
getCacheOf "Contact page" "/contact"

echo ""

Usage: ./test-cache-headers.sh https://magento2.front-commerce.app

💡 You can pipe the output into a markdown file and have a report to share with teammates.

Use a CDN to overcome the 500MB size limit

Please, note that when the 500MB size limit for cached data is reached, the proxy will remove oldest entries from the cache.

A URL might remain in cache less longer than what is returned by the Cache-Control header.

If you want to increase limit contact us so we can configure a CDN on your Front-Commerce Cloud project.

Learn how to activate Front-Commerce Cloud's CDN