Caching API responses

Install the extension that provides control over response headers from the middleware:

yarn add @vsf-enterprise/middleware-headers

Setup the extension inside: apps/storefront-middleware/integrations/<integration>/extensions/cdn.ts

Repeat the process for all the integrations that you want to cache.

+import middlewareHeaders from "@vsf-enterprise/middleware-headers";
+
+const DEFAULT_MIDDLEWARE_TTL = 60 * 5;
+const cacheControl = process.env.CACHE_CONTROL || `public, max-age=0, s-maxage=${DEFAULT_MIDDLEWARE_TTL}, must-revalidate`
+
+export const cdnExtension = middlewareHeaders({
+  cacheControl,
+  isNamespaced: false,
+  methods: {} // will use default cache control configuration
+})

apps/storefront-middleware/integrations/<integration>/extensions/index.ts Re-export the newly added extension in the barrel file

export * from "./unified";
export * from "./multistore";
+export * from "./cdn";

Plug the extension into your integration: apps/storefront-middleware/integrations/<integration>/config.ts

- import { multistoreExtension, unifiedApiExtension } from "./extensions";
+ import { cdnExtension, multistoreExtension, unifiedApiExtension } from "./extensions";
...

  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
    unifiedApiExtension,
+   cdnExtension,
    ...(IS_MULTISTORE_ENABLED === "true" ? [multistoreExtension] : []),
  ],

Install the extension that allows for passing runtime environment variables to the frontend yarn add next-runtime-env

If you use github actions for your CD, ensure that you use version v3.6.0 or higher of the build-frontend action.

-        uses: vuestorefront/storefront-deployment/build-frontend@v3.4.0
+        uses: vuestorefront/storefront-deployment/build-frontend@v3.6.0

The action will automatically pass the current commit hash as a Dockerfile argument. If you don't use GitHub Actions, you need to pass NEXT_PUBLIC_CDN_CACHE_BUSTING_ID or NUXT_PUBLIC_CDN_CACHE_BUSTING_ID (depending on your framework) as a build argument to the Dockerfile during the build process. The value of this variable should be the current git commit hash of the monorepo where you develop both the storefront and the middleware.

We are adding a new environment variable to cache bust the old CDN cache of the middleware.

+ARG NEXT_PUBLIC_CDN_CACHE_BUSTING_ID
+ENV NEXT_PUBLIC_CDN_CACHE_BUSTING_ID=${NEXT_PUBLIC_CDN_CACHE_BUSTING_ID}

USER nextjs

ENTRYPOINT ["vue-storefront.sh"]

When the Dockerfile is executed, Docker remembers the result of each action. If the result of an action is the same as the previous run, Docker reuses the cached result. This is called Docker cache. If the Dockerfile cache is invalidated, Docker will rerun the action, increasing the build time.

Since the CDN cache-busting value changes with every commit, we don't want to excessively invalidate the Docker cache. Therefore, this value is passed just before the application startup, which is handled by the vue-storefront.sh script.

Define cache control for the new endpoint in the middleware apps/storefront-middleware/integrations/<integration>/extensions/cdn.ts

import middlewareHeaders from "@vsf-enterprise/middleware-headers";

const DEFAULT_MIDDLEWARE_TTL = 60 * 5;
const cacheControl = process.env.CACHE_CONTROL || `public, max-age=0, s-maxage=${DEFAULT_MIDDLEWARE_TTL}, must-revalidate`

export const cdnExtension = middlewareHeaders({
  cacheControl,
  isNamespaced: false,
  methods: {
+   myNewEcommerceEndpoint: {
+     cacheControl: `public, max-age=0, s-maxage=${60 * 15}, must-revalidate`
+   }
  }
})

Tell the SDK to send the request via GET method. In sdk.config.ts.

+    methodsRequestConfig:
+      // Default methods config that configures which methods should be sent via GET requests
+      config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
+      customMethodsRequestConfig: {
+        myNewEcommerceEndpoint: {
+          method: 'GET'
+        }
+      }
    }),

Run the project. If you are using Next.js, then you have to run it in a prod mode. So yarn build && yarn start from within the frontend’s directory apps/storefront-unified-nextjs. The Middleware can be executed in dev mode so yarn dev from within apps/storefront-middleware will work.

Open the network tab of your browser’s dev tools

Verify that the selected set of requests to the middleware are sent as GET requests. The Cache-Control header should be attached to the response (i.e. getProductDetails is one of the default requests that is usually cached, it is usually triggered on the product details page ). The Cache-Control header should contain the value that was set by you. If you didn't set any specific value, then the default value for s-maxage will be non-zero.