UI Inconsistency Due to Cache Control Timings
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.
