Document Tree
Document Properties
Kbid
30966V
Last Modified
04-Sep-2023
Added to KB
09-Aug-2023
Public Access
Everyone
Status
Online
Doc Type
Support Articles
Product
Intershop Progressive Web App
Support Article - Caching in a PWA Environment

Introduction

When deploying a PWA environment, for example via Docker, there are many ways to configure and use caching for the rendering process.

This article provides an overview of the caching mechanisms which can be configured and used out of the box.

For a basic overview of the basic request handling in the standard Intershop PWA, see: https://support.intershop.com/kb/G30843.

References

Caching Options in a PWA Environment

Caching via the Browser Cache

Cached Content

Every major browser maintains its own browser cache which stores static content such as images.

Configuring the Cache

A browser cache can usually be configured, invalidated or disabled via the browser settings.

Checking the Cache Processing

The following explanations refer to the browser Mozilla Firefox. If another browser is used, the described information and functionalities may differ.

The cache "Hits" and "Misses" can be checked via the developer tools.

The content of the browser cache can be checked by typing about:cache in the address bar.

ICM Page Cache

Cached Content

In general, the ICM page cache stores static content such as images and dynamic content such as pipeline output.

In the PWA, the ICM web adapter is used for handling and caching REST calls. It also delivers back office CMS content components to the PWA.

Cache Configuration

For information on how to manage the ICM page cache, see the following documentation: Overview - Cache Management and https://docs.intershop.com/icm/latest/olh/icm/en/operation_maintenance/topic_managing_page_cache.html.

Cache Monitoring

To get information about what data is stored in and received from the cache, a logging marker must be used.

For more information, see the following documentation: Cookbook - Cache Management.

NGINX Cache

Cached Content

NGINX stores static pages that are rendered by the server-side rendering process.

Cache Configuration

NGINX caching can be enabled or disabled by setting the value of the NGINX environment variable CACHE to 1 or 0.

This environment variable can be set, for example, in the docker-compose.yaml file in the root directory of the Intershop PWA project:

[...]
  nginx:
    [...]
    environment:
      [...]
      CACHE: 1
[...]

Changes made to the docker-compose.yaml file are only relevant when starting the PWA environment via the docker-compose command.

To avoid unexpected caching side effects when using a Hybrid Approach, please disable the NGINX caching.

For further information, please see the following documentation: https://support.intershop.com/kb/index.php/Display/30X852.

The caching duration can be configured in the PWA project by providing the environment variables CACHE_DURATION_NGINX_OK and/or CACHE_DURATION_NGINX_NF with a value in the format time.

CACHE_DURATION_NGINX_OK specifies how long responses from successful calls should be cached.

CACHE_DURATION_NGINX_NF specifies how long 404 responses should be cached.

In the Dockerfile of the standard Intershop PWA under intershop-pwa/nginx/Dockerfile these variables are defined as follows:

[...]
ENV CACHE_DURATION_NGINX_OK=10m
ENV CACHE_DURATION_NGINX_NF=60m
[...]

Therefore, responses from successful calls are cached for 10 minutes, while 404 responses are cached for 60 minutes.

NGINX additionally offers many options to configure the caching behavior in more detail.

For further information, please see https://support.intershop.com/kb/30844H as well as the following NGINX documentation: https://www.nginx.com/blog/nginx-caching-guide/.

Cache Monitoring

The log of the NGINX container provides useful information about the caching processes.

For example, it is stated which requests have led to the cache status MISS, HIT or EXPIRED.

Sample log entries from a NGINX Docker container:

[...]
"GET /order-templates.7b863162982c946f.js HTTP/1.1" 304 0 "http://localhost:4200/b2b/en/home" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0" "-" 0.011 "MISS"
[...]
"GET /order-templates.7b863162982c946f.js HTTP/1.1" 304 0 "http://localhost:4200/b2b/en/home" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0" "-" - "HIT"
[...]
"GET /order-templates.7b863162982c946f.js.map HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0" "-" 0.014 "EXPIRED"
[...]

For more information on the cache status, see the NGINX documentation: https://www.nginx.com/blog/nginx-caching-guide/#Frequently-Asked-Questions-(FAQ).

Server-Side Rendering (SSR) Cache

Cached Content

Common SSR calls can be cached for a short time within the PWA SSR process.

Cache Configuration

Caching via server-side rendering is disabled by default in the standard Intershop PWA, but can be enabled by specifying the environment variable CACHE_ICM_CALLS.

This environment variable can be set, for example, in the docker-compose.yaml file in the root directory of the Intershop PWA project:

[...]
  pwa:
    [...]
    environment:
      [...]
      CACHE_ICM_CALLS: 'recommended'
[...]

When specified with the value recommended, the basic configurations for this feature set in the universal-cache.interceptor.ts file under intershop-pwa/src/app/core/interceptors/universal-cache.interceptor.ts are considered.

[...]
if (/recommended/i.test(CACHE_CONFIG)) {
  return {
    '/configurations': '5m',
    '/categories.*view=tree': '5m',
    '/localizations': '10m',
  };
}
[...]

Therefore, if the value of the environment variable CACHE_ICM_CALLS is set to recommended, responses to calls of the /configurations and /categories.*view=tree endpoints are cached for 5 minutes, while responses to calls of the /localizations endpoint are cached for 10 minutes.

This configuration can be changed, e.g. by adjusting the specified time periods or by adding more endpoints to be cached.

This can be done in the universal-cache.interceptor.ts file itself or by passing a JSON structure to the CACHE_ICM_CALLS environment variable of the PWA SSR process.

Adjusting the configuration via the universal-cache.interceptor.ts file:

[...]
const CACHE_CONFIG = process.env.CACHE_ICM_CALLS;
[...]
if (/recommended/i.test(CACHE_CONFIG)) {
  return {
    "/configurations": "20m",
    "/variations": "0m",
    ".*": "2m"
  };
}
[...]

Adjusting the configuration via the environment variable CACHE_ICM_CALLS:

[...]
  pwa:
    [...]
    environment:
      [...]
      CACHE_ICM_CALLS: '{"/configurations": "20m", "/variations": "0m", ".*": "2m"}'
[...]

By specifying a value for .*, all SSR requests will be cached for the specified time period.

However, if further settings are configured for an endpoint such as /configurations, these settings will take effect for the specific endpoint instead.

By configuring a cache duration of zero minutes for an endpoint, responses regarding that endpoint will not be cached.

Cache Monitoring

In the SSR log, each call of a particular endpoint is listed.

If the corresponding endpoint has been configured for caching, the response of the call will be cached for the configured time period.

Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.