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.
Every major browser maintains its own browser cache which stores static content such as images.
A browser cache can usually be configured, invalidated or disabled via the browser settings.
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.
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.
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.
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 stores static pages that are rendered by the server-side rendering process.
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/.
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).
Common SSR calls can be cached for a short time within the PWA SSR process.
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.
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.