Browser Cache Busting Strategies

Browser Cache Busting

By adding a query string to the path or URL being fetched, you can prevent the browser from using cached versions when the website is updated.

Background Knowledge

If the URL is exactly the same as the last time it was accessed, the browser will use the cached version (as part of its design).

Solution

# Normal notation
<img src="./images/hoge.jpg">
<link rel="stylesheet" href="./stylesheets/style.css">
<script src="./script/main.js"></script>

# Notation for cache busting (add query parameters)
<img src="./images/hoge.jpg?20221011">
<link rel="stylesheet" href="./stylesheets/style.css?20221011">
<script src="./script/main.js?20221011"></script>

By adding query parameters in yyyymmdd format, the updated file will be automatically fetched starting from the specified date.

References

• Adding query parameters to files for cache busting when updating websites
• Stop asking to clear cache! Solving the problem of CSS not updating