Invalidate Dispatcher cache for updated /etc.clientlibs resources in AEM as a Cloud Service
This article explains how to ensure that updated static resources under /etc.clientlibs are served after deployment in Adobe Experience Manager as a Cloud Service by configuring Dispatcher cache actions and using cache-busting techniques.
Description description
Environment
Adobe Experience Manager as a Cloud Service (AEMaaCS) (all versions)
Symptoms
- Updated static resources, such as JavaScript files, under
/etc.clientlibsdo not appear immediately after deployment. - Browsers, Dispatcher, or the CDN continue to serve previous versions of the files.
Cause
Dispatcher and CDN caches retain static resources with long-lived cache headers unless you invalidate or flush them. Cloud Manager deployments do not automatically clear these caches for /etc.clientlibs unless you configure cache actions. To propagate updates immediately, use URL-based cache busting.
Resolution resolution
Follow these steps to resolve the issue:
-
Configure Dispatcher cache actions in the Cloud Manager pipeline:
-
In Cloud Manager, edit your deployment pipeline.
-
Go to the Dispatcher configuration section, and then select Configure.
-
Add a cache action with the following settings:
- Path:
/etc.clientlibs/<your-project>/clientlibs/<your-clientlib>/* - Type: Select Invalidate to mark the cached content as stale or Flush to delete it.
- Path:
-
Select Add Path, Apply, and then save the pipeline configuration.
-
Run the pipeline to invalidate or flush the specified paths.
-
-
Use URL-based cache busting for static resources:
- When you update static JavaScript or CSS files, use versioned filenames, such as
swiper-bundle-v14.min.js. - Alternatively, append a query parameter, such as
swiper-bundle.min.js?v=20240819. - Changing the URL ensures that Dispatcher and the CDN treat the updated file as a new resource.
- When you update static JavaScript or CSS files, use versioned filenames, such as
-
Review the
Cache-Controlheaders:- If you use long-lived TTLs, such as
max-age=31536000, immutable, version the resource URLs. - If you do not version URLs, use shorter TTLs and remove
immutablefrom the header.
- If you use long-lived TTLs, such as
-
Serve client libraries through the proxy:
- Serve JavaScript and CSS through AEM client libraries with
allowProxy=true. - Avoid hard-coding raw URLs such as
/etc.clientlibs/.../resources/*.js.
- Serve JavaScript and CSS through AEM client libraries with
-
Verify the update:
- After the pipeline execution finishes, access the updated resource URL.
- Confirm that the resource contains the latest changes.
- Review the response headers to verify the expected caching behavior.