javascriptcssweb-applicationssingle-page-applicationpage-refresh

Why/When is it needed to hard refresh a webpage in a browser?


Background

While there are many blogs, stackoverflow questions and answers on the HOW I have not found a single trace of the WHY/WHEN! And fair enough most people do know about the why but NOT all people.

Scenarios

Analogy

While there maybe a lot of reasons behind these issues mentioned above such as a bug in the software, or browser incompatibility with a new component, etc. Before you go and do all the relevant actions to debug or resolve those one of the easiest and fastest resolutions is to: "HARD PAGE REFRESH"!

But why? (See below)


Solution

  • Short Answer

    Browsers cache CSS, JS and other files to improve the loading time of web applications and their relevant pages. Depending on how the website is implemented when a new version of the JS, CSS is added and difference in a shape and form with the old version of the file. New part of the page are calling or interacting with an old version of the file that is cached in the browser. This results in the inconsistent behaviour.

    Long Answer

    In old days of web applications development, pages had smaller JavaScript and CSS files if there where cool enough to go beyond the basic HTML pages. Also pages stored in separate HTML files. And the browser would load a whole new page application as you clicked on a new link.

    In modern web applications the shift was towards Single Page Applications. These are applications where you have a single page that is responsible for loading on the content. All modern websites (e.g. Facebook, Netflix, etc.) have been built using the new technique.

    In Single Page Applications, the same page has large JS and CSS files attached to it. That means despite the massive improvement to our internet speed, it will be in inefficient for the browser to load the whole Single Page and all its JS, CSS, IMG files every time the user does a refresh. By caching these files that means the browser now only needs to load new data content on the page. This results in far better user experience.

    The downside of this was when a new JS or CSS file was released and the browser was still using the old JS or CSS file. It would impact the business logic or the layout in unpredictable ways. That why browsers introduced a HARD PAGE REFRESH option to allow the load of a single page application be forced to load from the backend server rather than the cache.

    If this topic interests you you can do further read on best practice on how to setup your single page application to ensure every time you release a new JS or CSS or even images it is guaranteed that the browsers reload the content and don't use the cached assets.

    Useful links

    I have provided some good reads below as per on of the reader's requests.

    1. Force Reload Javascript CSS In Browsers (Simple Examples directly relevant and is a good read)
    2. How to force browsers to reload cached CSS and JS files?(old threat but useful!)
    3. Reload page in JavaScript - JS Reload Window Tutorial (not directly relevant but a good read)