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.