UI Inconsistency Due to Cache Control Timings | Community
Skip to main content
R
RahulSi13
Level 2
February 6, 2025

UI Inconsistency Due to Cache Control Timings

  • February 6, 2025
  • 2 replies
  • 832 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

chaudharynick
chaudharynick
Level 4
February 6, 2025

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?

    R
    RahulSi13Author
    Level 2
    February 7, 2025

    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?

    narendiran_ravi
    narendiran_ravi
    Level 6
    February 9, 2025

    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?


    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
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      February 10, 2025

      @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!

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...