UI Inconsistency Due to Cache Control Timings

[RahulSi13]

I am facing a UI inconsistency issue in my project due to differing cache durations for HTML and client libraries (CSS/JS). Below are the cache rules:

Cache Rule for HTML:

<LocationMatch "^/content/.*\.(html)$">
Header set Cache-Control "max-age=900,stale-while-revalidate=1800" "expr=%{REQUEST_STATUS} < 400"
Header set Surrogate-Control "stale-while-revalidate=43200,stale-if-error=43200" "expr=%{REQUEST_STATUS} < 400"
Header set Age 0
</LocationMatch>

Cache Rule for Client Libraries (CSS/JS):

<LocationMatch "^/etc\.clientlibs/.*\.(?i:js|css|ttf|woff2)$">
Header set Cache-Control "max-age=1800,stale-while-revalidate=1800,stale-if-error=1800,public,immutable" "expr=%{REQUEST_STATUS} < 400"
Header set Age 0
</LocationMatch>

Issue Observed:

Since the HTML and client libraries are cached for different durations, a mismatch occurs when the HTML refreshes before the clientlibs. Specifically:

• When the HTML updates, it references the new clientlibs ID.
• However, the browser still holds the cached clientlibs from the previous version due to its longer caching duration.
• This leads to UI inconsistencies, as the updated HTML expects new styles and scripts, but the browser continues serving the old client libraries.

Looking for a Solution:

How can we ensure that when the HTML refreshes, it correctly loads the corresponding client libraries instead of using the outdated cached versions? Are there best practices or recommended caching strategies in AEM to resolve this issue?

Any insights or suggestions would be greatly appreciated.

[chaudharynick]

Hi @RahulSi13 

Ideally, it shouldn't happen because when your HTML is refreshed with a new clientlib hash, it will request for the new clientlibs only and not the previous one.

The browser will not load the old clientlibs if the hash value changes. can you check and compare the complete clientlibs path when this happens? 

Also, can you share if this issue is on AEM 6.5 or the cloud?

[RahulSi13]

Thank you for your response.

My project is running on AEM Cloud, and the issue occurs during the first two hours after a new deployment.

Here's what happens:

After deployment, when the HTML cache expires, the browser loads a fresh copy of the HTML as per the cache rules. The new HTML references the latest clientlibs with updated version IDs, for example:

<link rel="stylesheet" href="/etc.clientlibs/myproject/clientlibs/clientlib-site.lc-f070ba45a8525gfs4531f9-lc.min.css" type="text/css">
<script src="/etc.clientlibs/myproject/clientlibs/clientlib-site.lc-893adfa6558652424534dfadfa192a14f-lc.min.js"></script>

• However, while the HTML gets updated with new clientlibs IDs, the actual clientlibs (JS/CSS) files in the cache still belong to the previous deployment.
• Since these clientlibs are just pointers, the new HTML structure expects new styles and scripts, but the browser is still holding the older cached clientlibs, leading to UI inconsistencies.

I suspect this mismatch between the new HTML and old cached clientlibs is causing the issue. Any thoughts or suggestions on how to resolve this?

[chaudharynick]

Hi @RahulSi13 

every time a new deployment happens the unique hash with the clientlibs gets changed

etc.clientlibs/myproject/clientlibs/clientlib-site.lc-<unique_hash>-lc.min.js

So whenever new HTML is being rendered, it will have the new hash of the clientlibs and the browser won't be calling the old clientlibs because for the browser the clientlib URL has changed and it won't be picking it up.

Are you using any CDN?
Also check for the network logs, which clientlibs endpoint the browser is trying to request? is it the same or a new one?

if it's the same, can you inspect the page and check the clientlibs path rendering up on the HTML? if it's having the previous or new one? 

[RahulSi13]

Thanks for the response

Yes, when the HTML is rendered, it does contain the new hashed clientlibs path. However, the issue arises because while the HTML references the new clientlibs hash, these are essentially just pointers to the actual resources.

When the new HTML loads, it expects the corresponding clientlibs folder with the updated version hash. However, since the actual clientlibs resources (JS/CSS) from the previous version are still cached, the newly referenced paths do not resolve correctly, leading to missing styles and scripts.

This results in UI inconsistencies because the HTML structure is updated, but the expected clientlibs are not immediately available due to caching.

Would you have any recommendations on how to handle this scenario effectively?

[narendiran_ravi]

Hi @RahulSi13 ,

I would recommend raising an Adobe support request for this issue. Ideally, they might recommend some changes in your TTL to mitigate the delay post pipeline execution.

[kautuk_sahni]

@RahulSi13 Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!