Cache Busting
lastmod 2023-03-06created 2023-02-155 edits
As in busting (breaking, wrecking) the cache, Cache Busting refers to the actions taken to solve the problem where, because of a previously remaining cache, a newly deployed browser or images, etc. are not reflected and the old cache state is still being looked at.
Categories
Common solutions
The common approach is to add a hash to the file names of scripts and other asset files based on time or content. So if you used script.js before, it now becomes script.[contenthash].js. The content hash changes every time you change the script content.
Now, when a user requests the app's index.html, it references scripts containing individual content hashes. If the user previously loaded script.abc123.js and now index.html references script.cba321.js, the browser knows it has never seen this file before and loads it. This way the user gets the current version of scripts and other assets (js, css, images, etc.). However, for this to work, it is important that the user always loads the latest version of index.html.
There are other approaches, such as setting caching response headers for script files, but they are not recommended in this case.
Keeping files up to date in SPA frameworks
In SPA frameworks such as React or Vue, the index.html file is classified under public, so its file name does not change.
Also, all files in that folder have the same problem,
and for such files you just need to add the Cache-Control header.
Solution specifying cache attributes in the Meta tag
This approach adds a meta tag in the index.html file to set the cache expiration time or to disable caching.
<head>
<!-- Expires 속성 사용: 지정한 날짜까지만 캐시 유효 -->
<meta http-equiv="Expires" content="Sun, 07 Aug 2022 18:51:54 GMT">
<!-- Expires 속성 사용: 즉시 캐시 만료 -->
<meta http-equiv="Expires" content="0">
<!-- Cache-control 속성 사용: 캐시를 하지 않음 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>
| WARNING |
| A warning occurred in IntelliJ-family IDEs. Check the related issue again. |