Caching Client Libraries

[Kristian_Wright]

Hi all,

Does CQ/AEM have a built in way to deal with client library caching issues?  When using the foundation image component, the final src attribute of the image in the clients browser is something like:

<img title="My Image" alt="My Image" src="/content/myapp/en/mypage/_jcr_content/somewhere/my_image.img.png /1368587149255.png">

This allows the browser to cache the image, but when the image is updated in AEM, the src attribute is updated accordingly, and therefore the new image is requested by the browser.
 
Does CQ also have this kind of functionality for it's client libraries, so that javascript and CSS files can be cached in the same sort of way, and automatically get renewed when updated?  For example, something like:

<script type="text/javascript" src="/etc/designs/myapp/myclientlib_1368587149255.js"></script> <link rel="stylesheet" href="https://forums.adobe.com/etc/designs/myapp/myclientlib_1368587149255.css" type="text/css"/>

I know we could set the expires headers, but this is not the most efficient way since the files may not have changes since since they were last requested.
 
Also, can this be done for other items, for example font files etc?
 
Any thoughts appreciated...
 
Cheers,
K

[Kristian_Wright]

Hi Pawan,

Thanks for the quick reply.  We already have the dispatcher set up correctly, and it is correctly caching the js and css files of our client libraries, as well as automatically invalidating all html pages.  We also have cache invalidation agents on the publish instances which correctly update the .stat file of the web server on replication.  The issue I'm questioning here is to do with the clients browser cache, not the web server cache.

Assume I have the following code created for me by including a client library:

<script type="text/javascript" src="/etc/designs/myapp/myclientlib.js"></script>

Assuming that all my dispatcher and web server caching is set up correctly, when a browser first encounters this line, it requests the file from the web server. If the file is in the web servers cache, it returns it to the browser from the cache.  If it's not, the dispatcher grabs it from the publisher, puts it in the cache, and serves the file to the browser.  If the client then requests the same webpage again, the browser will not request the /etc/designs/myapp/myclientlib.js file again, since it is already in the cache of the browser.  If I have updated the client library in the mean time, the .stat file is updated, and then the next time the javascript library is requested from any client, the web server cache will be updated to the correct version.  However, anyone who already has a copy of the file /etc/designs/myapp/myclientlib.js in their browser cache will have an out of date version, until they either clear their browser cache, or the 'expires' header kicks in.

I'm wondering if it's possible in CQ/AEM to have the client libraries time-stamped (or some such other method) when created, to be similar to this:

<script type="text/javascript" src="/etc/designs/myapp/myclientlib_1368587149255.js"></script>

This way, when a browser requests a page and sees this code, it either requests it from the web server, or uses the copy in it's own browser cache.  Then if I update the client library, the next time the page is rendered it uses the updated name of the client library with the new timestamp:

<script type="text/javascript" src="/etc/designs/myapp/myclientlib_1564729854631.js"></script>

This way I can be 100% sure that anyone who requests the page that contains this client library has the latest, valid code.

This looks to be happening for images in image components.  Can it be done for client libraries?

Thanks,
Kristian

[Kristian_Wright]

Hi Yogesh,

My client prefers not to rely on the 'expires' solution.  However, the second solution looks viable.  I'll do some research into it's implementation here.  Thanks for the link!

I was hoping there was something already built into AEM, but if not a manual fix will always suffice.

I'll let you know how I go with this...

Cheers
K

[Pawan-Gupta · Accepted solution]

Hi Kristian,

The CQ dispatcher is a caching mgmt module can be deployed and configured on web server for same purpose. It helps you to manage caching for different file types through configuration. This way you can manage caching at multiple levels like Dispatcher cache, web server cache, and CDN cache (Standard way of doing)

Please refer dispatcher configuration and architecture document which will give you more insight information

http://dev.day.com/docs/en/cq/current/deploying/dispatcher/disp_config.html

http://dev.day.com/docs/en/cq/current/deploying/dispatcher.html

Let me know for more information.

Thanks,
Pawan

[Yogesh_Upadhyay]

For css and js caching issue you can refer http://www.wemblog.com/2013/06/how-to-avoid-caching-of-static-files.html

Yogesh

www.wemblog.com