Here’s the situation: You’re developing a single-page web application—say, with Angular, React, or maybe Vue—and you noticed that changes aren’t showing up in the user’s browser when you deploy a new version.
So you rolled up your sleeves, gave some thought to the problem, and asked yourself, “Hmm… wait a minute! Could the issue be that the index.html file of my SPA is getting cached? And if so, what can I do about it?”
A good question, and the right one to ask.
Let’s just say it’s good that you stopped by here. Read on; this is exactly the question we will ponder in this article in a moment.
Is Index.html Cacheable?
According to the HTTP/1.1 specification, all HTML documents, CSS style sheets, and JS scripts are heuristically cacheable.
Browsers cache the index.html of your single-page application unless you explicitly tell them not to. You can do so by setting the Cache-Control headers in your web server’s configuration file or in a <meta> tag in the header of your HTML document.
You can instruct browsers not to cache your single-page application’s index.html file by setting its Cache-Control HTTP header to no-store:
Cache-Control: no-storeThis directive prevents browsers from storing caches in the private and shared caches.
So let’s take a closer look at your two options for adding it.
Editing Your Apache Server’s Configuration
The best way to add Cache-Control headers to your website is to edit the httpd.conf configuration file of your Apache web server.
Use the Header set method to add the following directive to your Apache web server’s configuration file:
Header set Cache-Control "no-store"If you only want to apply this directive to a specific folder, use the directory configuration section:
<Directory "/app">
Header set Cache-Control "no-store"
</Directory>Note: You can also do this in the .htaccess file in each and every directory that you want to apply this configuration to. However, it will make your single-page application load slower. (Find out why here.)
Adding the Cache-Control Meta Tag
If, for one reason or another not relevant to this article, you can’t edit the contents of your server’s httpd.conf file or the .htaccess files in its folders, you will have to revert to using the Cache-Control meta tag.
Simply add this meta tag to the <head> section of your SPA’s index.html file:
<meta http-equiv="Cache-Control" content="no-store" />In other words, your HTML document should look like this when the Cache-Control <meta> tag has been properly implemented:
<!doctype html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-store" />
</head>
<body>
</body>
</html>And this is pretty much it!
Keep in mind that the Cache-Control directive isn’t supported by legacy browsers like Internet Explorer. For details, refer to CanIUse.com.
In Conclusion
Yes, your single-page web application’s index.html file gets cached by all browsers. But, by setting the Cache-Control directive in your web server’s configuration or in a <meta> tag inside your HTML document’s header, you can instruct them not to.
