aem cloud clientlib cache issue

[Vishnu9]

we are using AEM as cloud 

clientlibs are generated with unique values since it will append hash in its name.

User have loaded page in their system and clientlib is cached 

When we deploy a new frontend code and clientlib name gets changed and added in pages.

How it will affect users

1) when new users access page they get new clientlibs

2) when old users access the same page then old cached clientlibs / old html pages will load  or the new clientlibs will work ? 

this document says 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/con...

Client-Side libraries (js,css)

• When using AEM’s Client-Side library framework, JavaScript and CSS code is generated in such a way that browsers can cache it indefinitely, since any changes manifest as new files with a unique path. In other words, HTML that references the client libraries are produced as needed so customers can experience new content as it is published. The cache-control is set to “immutable” or 30 days for older browsers who do not respect the “immutable” value.

If old cache clientlibs are served then how to limit cache time

Thank you in advance

[arunpatidar]

Hi @Vishnu9 

To ensure that the latest client libraries (clientlibs) are loaded on your AEM pages, it's necessary to invalidate the cache for those pages, as the references to clientlibs are embedded in the page source.

Additionally, you need to manage the browser cache time for the pages. To ensure users see the most current version, stale pages need to be invalidated or refreshed in the cache using either ETag or Cache-Control headers.

[BrianKasingli · Accepted solution]

@Vishnu9 you might need to check your dispatcher configurations. 

The correct dispatcher configurations ensures that new client libraries and other updates are served efficiently. The HTML pages serves the new clientlibs versioned paths to reflect the latest updates; which is why its important to handle the correct dispatcher rules on .html files itself.

Based on WKND examples, the WKND configuration sets HTML page caching to a maximum of 5 minutes with additional revalidation periods, the new HTML pages and associated clientlibs may not appear immediately; after 5 minutes, if a user requests the content, the CDN serves the stale (cached) content immediately and fetches a new version from the origin server in the background. This mechanism ensures that users receive immediate responses, even if the content is slightly outdated, while the cache is refreshed in the background, the stale-while-revalidate directive helps ensure users see updated content with minimal disruption. This setup minimizes the impact of cache misses and ensures that updated content is available without noticeable delay to the user. This well-balanced approach allows for efficient content delivery while maintaining a seamless user experience.

ARTICLE HERE: https://sourcedcode.com/blog/aem/serving-new-client-library-css-and-js-after-release-on-aem-as-a-clo...

[Vishnu9]

@BrianKasingli @arunpatidar 

my project clientlib-react.lc-e686exxxxxxxlc.min.js file has below headers , 

please advice how to  reducing this cache