Cache Busting static files with asp-append-version in ASP.NET Core

In this article I will demonstrate a straightforward method for cache busting static CSS, JS and image files in ASP.NET Core.

The Problem

As a conscientious developer, you’ve likely implemented cache-control headers on static assets. While beneficial for performance, this creates a challenge when deploying updated files — browsers continue serving cached versions until expiration.

The Solution

The fix involves appending a query string variable with a unique value:

/dist/css/style.css?v=9808c17d-9ca6-4d2d-a708-884f6dd510b5

When the query string changes, browsers recognise it as a new resource and fetch the updated version.

ASP.NET Core Implementation

Rather than manually generating version numbers, ASP.NET Core provides built-in functionality. Simply add the asp-append-version="true" attribute to your HTML tags.

Before (in Razor):

<link rel="stylesheet" href="/dist/css/style.css" asp-append-version="true">
<script src="~/dist/js/main.js" asp-append-version="true"></script>

After (rendered HTML):

<link rel="stylesheet" href="/dist/css/style.css?v=YR4kXP93_AgVno-gXKI0l3oxl-I_KMkSGbaDHAc2E0M">
<script src="/dist/js/main.js?v=bsJHJ1dBuKGZth_fZXgiTt76SmS6QznXmwuJUyWkXqA"></script>

ASP.NET Core automatically detects file changes and generates unique version identifiers.