Issue with Icons Not Updating After Deployment with CDN and Client-Library Versioning

[mayank0928]

Hello, Adobe community,

I am encountering an issue with the icons on my website related to deployments with a CDN (Content Delivery Network) and client-library versioning. I would appreciate any insights or suggestions to resolve this problem.

Problem Description:
Every time we perform a deployment to the environment with a CDN attached to it, and there are new icons added to the front-end code, it appears that the website continues to display the old iconfont.woff2 file instead of updating to the latest version which ends up changing the icons of the website. The versioning for the client libraries is handled from the front-end module and the iconfont.woff2 file is inserted accordingly.

Just FYI, we're using React SPA with AEM.

Resolution Attempted:
We have tried flushing the cache from both the dispatcher and the CDN, which does temporarily resolve the issue. However, it is not an ideal solution as it requires manual intervention after each deployment.

Seeking Best Practice:
I am seeking advice on the best practice to handle this situation effectively. Should we consider flushing all the client libraries every time we make a deployment, or could there be another factor related to versioning that might be preventing the update of the latest client libraries after deployment?

Any guidance on the matter would be highly appreciated. Thank you for your time and assistance!

@kautuk_sahni 

[EstebanBustamante]

Are you using AEM on-premise? or on Cloud? If you are using AEM on-premise you could use the utility from ACS commons "Versioning Clientlibs" If you are using Cloud, you can refer to this article. This will solve the cache issue in the dispatcher, the issue with your CDN will depend on how you are caching the clientlibs, if this is via a TTL, Etag, etc, there is no silver bullet here, but you need to check on your CDN and make sure this revalidates once the "hash" from the clientlibs changes accordingly. 

If none above is useful, you can still think on automate your flush cache process on each deployment as part of your CI/CD process.

Hope this helps.

References:

https://medium.com/@satyambansal001/aem-versioned-clientlibs-for-longer-caching-css-and-js-3f189b0f6...

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/acs-commons-clientlibs-ver...

[mayank0928]

Hi @EstebanBustamante 

Thank you for your response. Regarding versioning, I am having trouble understanding its implementation. I can't see the ACS Commons configuration or any related details. However, I can confirm that the clientlibs are loading with the correct versions. The icons file is generated from the ui.frontend module. But when I tried to replicate this on the local dispatcher with AEM 6.5.15, I noticed that after changing an icon, the dispatcher continues to display the old iconfont file instead of the new one. Interestingly, the publisher has the updated file with the changes, even though the hash for the iconfont file has been updated in Publish, but not in the dispatcher. Ideally, this should be automatically invalidated, as the publisher has the latest file with the updated hash/version, but the dispatcher still shows the old version of the iconfont. This situation has left me confused about the entire process.

Now, my question is whether this invalidation of the cache should happen automatically or if we need to manually flush/invalidate the cache after each deployment. Manually invalidating the clientlibs could potentially lead to performance issues for users. I would appreciate your guidance and recommendation.

Thank you.

[EstebanBustamante · Accepted solution]

Hi @mayank0928 , 

So a couple of things first here is a good article explaining in plain words what is all about the versioning clientlibs https://www.linkedin.com/pulse/aem-versioned-clientlibs-can-lifesaver-terms-push-divanshu-goyal/ , hope this clarifies how this works and how to use it.

In regards to your questions, it sounds to me that you are getting the expected results, cache strategy (which includes flush strategy) is a whole topic, I highly recommend going through this article https://experienceleague.adobe.com/docs/experience-manager-learn/dispatcher-tutorial/chapter-1.html?... to understand different options, patterns, and antipatterns. 

Now, answering your question is not a simple Yes or No, technically you can go with a flush strategy where the dispatcher becomes invalidated automatically upon each deployment, but I personally think is an anti-pattern, in the other hand you can decide as well to flush manually the cache every time you do a deployment, personally, I think this is the most common scenario, where you have the tools and knowledge to invalidate all or cache portions only, so it will really depends on several factors such as: considering how frequent the assets (images, pages, etc) will be changing, how frequent your deployments will be, etc. There are several techniques as well to flush cache, please read this article which will provide a great vision of how you decide your path: https://blog.developer.adobe.com/aem-dispatcher-create-the-perfect-caching-architecture-8c2798cb2f7