Best Practices for Invalidating Icon-font Files in AEM 6.5.15 to Avoid Serving Stale Data

[mayank0928]

In our project, we're using Adobe Experience Manager (AEM) version 6.5.15 with its new UI.frontend module structure. The versioning of the client library is managed by this front-end module, which embeds a versioned icon-font file. Our project is built as a React Single Page Application (SPA).

We're encountering an issue where every time we introduce a new icon and the project is compiled, a new version of the client library and the icon-font file is created and embedded. However, when we activate any page from the authoring environment, the client libraries are updated, but the icon-font file seems to serve stale data, continuing to display the old icons.

What is the best practice to prevent this stale data issue? Should we be flushing the /etc.clientlibs directory with each deployment, or is there another more efficient or effective approach?

[ManviSharma]

Hi,

To prevent stale data issues with the icon-font file in your AEM project:

1. Efficiently version client libraries using content-based versioning.
2. Leverage a CDN for serving static assets, including the icon-font file.
3. Implement cache-busting techniques to force browsers to fetch updated files.
4. Properly configure cache settings for the /etc.clientlibs directory in AEM.
5. Avoid flushing the entire /etc.clientlibs directory with each deployment.

[mayank0928]

Client libs are properly versioned, and cache-busting techniques are also implemented, but still, when the new icons are being added and deployment happens on the environment, it always fails to update the icon-font file, even though the icon-font file is properly versioned, and then embedded into the main react.js file, as the project is on AEM React with SPA. 

So, I am not able to understand the behavior of this, because the icon-font file is embedded inside the react.js file that is too versioned, so why does the dispatcher continue to show the old icons?

[mahi1729 · Accepted solution]

If viable can you add some screenshots on this issue? I am assuming you're using versioned clientlibs. If not you can ignore inputs below. In SPA, technically majority of the job is done by JS, and very minimal is done by parent html. Now if we use versioned clientlibs, the issue is, existing pages that are not re-activated, may end up carrying reference to the old clientlib, and may force us to do a dispatcher cache clear on the entire site after deployment is done to target env. Lets assume you updated icons and javascript is same that fires when you render home page. and if home page is just accessed and not reactivated , then there is a possibility that updated icons are not even referenced in home page since the clientlib version is still old one. So technically it may not be stale from that clientlib perspective. This is just 1 possibility I can think of. But it will be nice to see exact details of the issue u r facing to determine the area causing the issue.