Versioned Clientlibs for Browser Cache | Community
Skip to main content
M
MoiezMa
Level 3
September 3, 2024
Solved

Versioned Clientlibs for Browser Cache

  • September 3, 2024
  • 5 replies
  • 1858 views

Hello, 

We have bunch of VUE and React applications that are built as clientlibs and served through dispatcher etc.clientlibs folder. Issue is when we do deployment we do flush the cache and clear those files but user browser cache have older files. User only see updated clientlibs on "Hard Reload".

 

I have implemented versioned clientlibs using "ACS Version clientlibs" but to my understanding ACSHASH doesn't apply to Relative URIs, e.g. etc/clientlibs/mysite/styles.css or URIs including a scheme, e.g. http://example.com/etc/clientlibs/mysite/styles.css and //example.com/etc/clientlibs/mysite/styles.css

 

How can we update the files under etc.clientlibs path if they are cached in user browser? Do we have an option to put file version in this path "/etc.clientlibs/projectName/clientlibs/app.js"?

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

Hi @moiezma 
What is the difference in above two clientlibs?

Can you share the HTL/Sightly code for both the case, working and non working?


so it turns out I had to change order in my rewrite, which was causing the issue. I had other rewrites from analytics which were taking priority. 

 

in anyone else have similar issue in future, please check if you have other rewrites setup with higher order.

 

Go to /system/console/status-slingrewriter and check if "versioned-clientlibs" is added and it has highest order value. example, I had to put my at 999.

5 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 3, 2024

Hi @moiezma 

The ACS Version Clientlibs has certain limitations, and the re-writer does not support the following:

  • URIs embedded in CSS or Javascript: This includes background images, web fonts, and similar elements.
  • Relative URIs: Such as "etc/clientlibs/mysite/styles.css."
  • URIs with a scheme: Including "http://example.com/etc/clientlibs/mysite/styles.css" and "//example.com/etc/clientlibs/mysite/styles.css."
  • URIs to non-AEM HtmlClientLibrary resources: For example, "/etc/designs/mysite.css."
  • Conditional comments containing tags.
  • ClientLibs included by Javascript: This is relevant when using property channels.

https://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs/index.html

 

A possible solution to ensure dispatcher caching is to use a query string for the version. As the query string bypasses the dispatcher, you will need an HTTPD Apache rewrite rule to remove it. Alternatively, you can add an ignoreParam rule at the dispatcher to cache with the queryString.

The version can be based on the last modification date of the home root page, bundle timestamp, or a configured value.

 

For example:

<script src="/etc/myproj/my-javascript.js?v=v4-11111111"></script>

In this code, the query string "?v=v4-11111111" is added to the JavaScript file path, providing a version identifier.

Arun Patidar
    sherinregi-1
    Community Advisor
    sherinregi-1Community Advisor
    Community Advisor
    September 3, 2024

    Hi @moiezma 

    Can you try the approach given in the below URL with ACS commons appending the md5 value and adding the necessary redirects. 

     

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

     

    Although the post talks about keeping the cache longer , it will expire as soon as there is a change in file as the md5 value will change and a new version will be created.

     

    You can also use packaging tools like webpack that will help in generating the chunks that can help in cache burst 

    https://stackoverflow.com/questions/39238163/how-to-use-cache-busting-with-webpack

     

     

      Shashi_Mulugu
      Community Advisor
      Shashi_MuluguCommunity Advisor
      Community Advisor
      September 4, 2024

      @moiezma how are you building your clientlibs? If you ate using your ui.frontend module, in your build script you can generate md5hash for each file you generate and place it in filename, your Frontend engineer should be able help with this ask.

        Lokesh_Vajrala
        Community Advisor
        Lokesh_VajralaCommunity Advisor
        Community Advisor
        September 4, 2024

        Hi @moiezma 

        I would recommend setting Cache-Control header in Apache with a short expiry time (5 mins ~ 1hr) for other js and css files without unique hash value. Cache-Control header will be added to the Response Headers by Apache and passed to the browser, which will be honoured by browser and makes the file expired by the specified time. 

         

        Please refer this document for understanding it better - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/content-delivery/caching 

         

        Thanks,

        Lokesh

          M
          MoiezMaAuthor
          Level 3
          September 6, 2024

          Thank you @arunpatidar @shashi_mulugu @lokesh_vajrala @sherinregi-1 for replying. So I tried all the options you guys mentioned. One thing I noticed is our clientlibs are added to components and pages through Slightly categories. Regardless of if I put hash in file name or after extension. it's being removed when file is loading in browser. 

           

          example, I added hash in clientlib through webpack cache burst. 

           

          File added to page through Slightly categories

           

          Here file is loaded 

           

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            September 6, 2024

            Hi @moiezma 

            Could you check if the ACS Commons versioned clientlibs feature is active for your project? You can find the sample configuration here: ACS Commons Versioned Clientlibs.

            If enabled, the clientlibs should load with a hash version.

             

            I also noticed that the minification is also not enabled. Can you check the Adobe Granite HTML Library Manager : A Configuration for ClientLibs 

             

            Arun Patidar
              M
              MoiezMaAuthor
              Level 3
              September 6, 2024

              @arunpatidar I have enabled the ACS Version Clientlib. it's working fine for rest of the scripts but it's only the files in clientlibs that are added to page through slightly categories that doesn't have hash in it. 

               

              the screenshot I shared with you is from author/local. I have minifying setup in other env. and publisher.  

               

              Example these clientlib are added to page through categories. 

               

              Do you guys see this issue as well. if you add clientlib through slightly categories,  acsHash is not added when file load in page.

               

                Terms & ConditionsAccessibility statement

                Loading footer...