nginx cached index.html force reload

Question

During a server migration a new nginx configuration was missing cache conrol directives. Hence, we ended up with a cached index.html which is very bad for our SPA that is not refreshed anymore if we deploy new code. We need the index.html to not be cached.

This was our (bad) nginx config that was online some days:

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

We fixed our config:

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

QUESTION

Clients that have been to our webpage within the last days cached an old index.html. How can we force their browsers to drop their cached index.html?

Could your explain what is wrong in your first nginx config ? What about the rootsection ? and the cache ? — Bertrand P
– Bertrand P, Commented Mar 21, 2024 at 19:45
@BertrandP the original config had no cache control which made clients cache the index.html. Adding it to the nginx config would not have any impact on clients because they would use the cached version rather than asking the server. — Stuck
– Stuck, Commented Mar 23, 2024 at 7:04

Talkerbox · Accepted Answer · 2020-12-21 14:02:23Z

4

+50

There is no way manually reset browser cache on user side (browser) while the client do not request to server for new content. In this case can be useful access to any scripts, that you SPA is download without cache. In this case you can change this script and run force reload page (but be careful - you need any flag for prevent permanent force reloading after every page loading). For example, if you have GTM on site - this can help.

UPD: I am not js specialist, but you needed to add GTM tag on all pages like this js-script:

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }

edited Dec 21, 2020 at 14:02

answered Dec 17, 2020 at 9:38

Talkerbox

4051 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stuck Over a year ago

Indeed we use GTM, could you elaborate how we can utilize it to force reload for the old version only?

Talkerbox Over a year ago

@Stuck I've updated answer with example. Hope this helps.

Collectives™ on Stack Overflow

nginx cached index.html force reload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related