ASP.NET Core: Static Files cache control using HTTP Headers

ASP.NET Core: Static Files cache control using HTTP Headers

Every seasoned web developer experienced at least once some cache-related issue with static files. One of the most common scenarios is the following: you publish a new version of your web application that seems to work well, then - despite all your debug and tests - your friends, colleagues and/or users are unable to see the new stuff due to the fact that some old CSS or JS file is being still used by their client, despite you are 100% sure you replaced it on the server with a new version.

How can it even be possible? You ask to yourself for a split second, then you quickly realize that you're hitting one of the simplest, yet most annoying issues of all time: the mere existence of a browser's and/or proxy's cache which is still holding the previous version of your updated file.

Until the last few years, this issue was mostly related to CSS and JS files only: however, with the increasing popularity of Single Page Applications and SPA-oriented frameworks such as ReactJS, AngularJS and Angular2, is now also affecting the index.html  page of these kind of apps.

Using ASP.NET 4 (and below)

If you're using ASP.NET 4 or earlier, the issue can be easily overcome by adding some lines to the application’s web.config file, such as the following:

Placing this inside the <system.webServer>  node is all what you need to get disable all kind of client-side caching. However, if you're using ASP.NET Core, you won't be able to pull this out.

Using ASP.NET Core

As you might already know, the new ASP.NET Core’s configuration system has been re-architected from scratch: it doesn't depend anymore to XML configuration files such as the web.config, so there's no chance we can use it to control our static files cache.

The new pattern is based upon key/value settings that can be retrieved from a variety of sources, including Json files (such as the appsettings.json  file): once retrieved, they can be accessed within our code programmatically, using a technique not too different from what we could do with the old System.Configuration namespace.

Initial check

That said, the first thing to do is to make sure that our ASP.NET Core application is loading the appsettings.json file. Open the Startup.cs file and check if class costructor contains the following lines of code or not:

If we started our project using the yeoman generator or any of the ASP.NET Core templates provided by Visual Studio 2015, everything should be already there: otherwise, just add it.

Setting the HTTP Headers for Static Files

Right after that, keep the Startup.cs file open and scroll down until you reach the Configure method and add (or modify) the app.UseStaticFiles()  middleware to set a custom caching behaviour just like the following (relevant lines are highlighted):

Adding the appsettings.json file to the loop

Now that we learned how to change the default caching behaviour, we need to change these static values with some convenient references pointing to the appsettings.json file. That way we won't have these settings hard-coded into our application sources and we'll be able to change them using different settings files, such as an  appsettings.production.json  for production environments.

In order to do that, open the appsettings.json file (create it if it doesn't already exists) and add the following key/value section (relevant lines highlighted):

Replacing values with references

Now we just need to replace the literal string values in the Startup.cs file with a reference to these configuration keys. We can do that in the following way (modified lines are highlighted):

Learning how to use this new configuration pattern can be very useful, as it’s a great way to customize our web application’s settings.

For further informations regarding this topic, we strongly suggest reading the following great posts from the official ASP.NET Core documentation web site:

That’s it for now: happy cache control!

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.