Configuring Caching Behavior

Unexpected caching behavior is a common pitfall of frontend client extension development, particularly when loading static resources. In the process of updating a client extension, developers often find that no change seems to have occurred when they try to deploy and test it. It’s important to understand how Liferay Cloud handles caching for client extensions, especially if you are using Liferay SaaS. This lesson discusses the default caching behavior for frontend client extensions and how you can configure that behavior if you encounter cache-related issues during development.

Understanding Liferay Cloud's CDN

Liferay Cloud’s content delivery network (CDN) is a distributed infrastructure for caching static file-based content. The CDN acts as a proxy between client and origin servers, so that when visitors hit your site, they are served static content from the server closest to them. Once static content is copied to a local server, it is stored in a cache for efficient retrieval, reducing latency and improving site performance.

By default, all frontend client extensions leverage Liferay Cloud’s CDN by generating standard caching headers (Cache-Control: public, max-age=3600) for static content payloads. The max-age directive indicates the amount of time in seconds that the cached content is fresh (i.e., valid for retrieval). If the specified time has elapsed, the origin server must generate a new response when the content is next requested.

You can configure whether or not your client extensions use the CDN. You can also configure the parameters of the caching headers. While the default configurations will generally serve you well, you should carefully consider the needs of your solution. Because frontend client extensions allow external URL references for static content, there are a variety of deployment scenarios that may require different caching configurations. For example, customers may want to set up custom domains for the resources they are deploying. Liferay does not control the URLs or the build process for client extensions. As a result, there is no single caching strategy or solution for handling client extension resources.

Modifying Default Caching Behavior

When you build a client extension project, there are three important files you can use to modify caching behavior:

1. client-extension.yaml: This file contains build instructions and definitions of the extension properties. You can append the parameter t=${modifiedTime} to URL fields to invalidate intermediate caches when the specified time has elapsed. See the following example client-extension.yaml.

   assemble:
       - from: build/buildTheme/img
         into: static/img
   liferay-sample-theme-css-2:
       clayURL: css/clay.css?t=${modifiedTime}
       mainURL: css/main.css?t=${modifiedTime}
       name: Liferay Sample Theme CSS 2
       type: themeCSS
   

   
   With this mechanism, you have exact control over when your browser requests updated copies of static resources. Note that a URL with the appended parameter is treated as a separate resource from a URL without the parameter. If used incorrectly, this mechanism can lead to module duplication and state conflicts, which can degrade performance and even break your application.
2. Dockerfile: This file defines the workload container and its capabilities. After building your client extension, you can find this file in the /builder/liferay-client-extension-build folder. Here, you can update the Cache-Control headers for the client extension’s static resources.
3. LCP.json: This file defines the cloud deployment configurations for your client extension. It is specific to Liferay PaaS and SaaS. Here, you can toggle whether or not the client extension uses the CDN. If you encounter issues with cross-origin resource sharing (CORS), set the value of .loadBalancer.cdn to false to disable the CDN.

Before changing any defaults, evaluate your project context to determine how many times and how often you need to update a given client extension. If you modify the caching behavior of a deployed client extension (and you are using Liferay PaaS or SaaS), make sure to clear the CDN cache for that service using the LCP console.

Conclusion

Caching is a critical aspect of developing frontend client extensions with Liferay Cloud. By understanding how the CDN works and how you can change default configurations, you are better equipped to troubleshoot client extension issues that relate to caching. Next, you’ll review what you’ve learned before taking this course’s badge exam.