Add a version that indicates that the cached old version of the static file is up-to-date to avoid being used

Since the front stage is long, if you want to see only the program, please skip it.

environment

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Razor page, MVC)

About caching files on Web pages

When you visit a Web page, in addition to HTML, .js files (Javascript), .css files (stylesheets), and image files are downloaded to the client for display and execution. However, some image files are large, and downloading them every time can be costly. Also, .js files and .css files are often used on other pages, and there is no need to download them every time. These files may be temporarily saved in your browser after downloading. This is called caching.

If the file is cached, for example, HTML is downloaded from the Web server when you visit the same page. Other files are viewed and run using locally stored files without downloading them if there is a cache. This reduces the load on the server and allows the client to view the page at high speed without consuming communication bandwidth.

Problems caused by caching

Whether the files placed on the server and the cached files are the same generally depends on the file path described in the HTML. The same file path is basically cached files. (There may be other conditions, but the file path is certain)

The following is an example of a file path. The attribute parameters of href and src apply.

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

However, this behavior can be a problem.

For example, if a user has a version 1 JavaScript file when they first access it, the version 1 JavaScript file is cached. The server then publishes the version 2 JavaScript file. If the JavaScript file path was the same when the user visited the same page, the version 1 Javascript file cached without downloading the server version 2 JavaScript file may be used. This can cause defects that the public does not intend.

At this time, I think that you often see "Try to delete the cache" as one of the countermeasures on the user side, but this may be the cause.

How to deal with cache problems on the server side

As mentioned above, whether cached files are used depends largely on the file path (URL).

Therefore, when you update a file, you can force it to download a new file by changing the file name.

For example, if a version 1 file

<link rel="stylesheet" href="/css/site.css" />

When the file was updated version 2

<link rel="stylesheet" href="/css/site2.css" />

Site2 is .css on the client side.

However, if you do this manually, it can be cumbersome and error-prone to change paths and rename physical files.

Add query parameters to a file path

The way the Web works allows you to add query parameters with a combination of keys and values after the path. In the client caching mechanism, even if the physical files are the same, if the query parameters are different, they will be recognized as separate files. Query parameters are values that have no meaning if there is no purpose of use even if they are added.

Query parameters can be appended to the path in the following format:

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

By using this mechanism, you need to change the path, but you do not need to rename the physical file.

Add query parameters automatically in the program (bad example)

By automatically adding this query parameter in the program, You don't have to manually change the file path if you change the static file.

An easy example is to add the current time to query parameters when a user accesses a Web page. It's very easy because I think you can write in one line in any programming language. I think the generation example looks like this:

<link rel="stylesheet" href="/css/site.css?20210223120000" />

However, this has the disadvantage that the advantage of caching is lost at all. The path changes every time you visit a Web page, even though it's the same file as the previous one. Because it is recognized as a separate file, css files are downloaded from the server every time. Older versions of files will no longer be used, but this is the same as simply not using caching features.

ASP.NET version control by adding query parameters in Core

Alcause there is no pre ASP.NET Core provides a standard solution to this caching problem.

You just need to add an attribute to the tag that describes asp-append-version="true" the file path as follows:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

If you actually visit the page after it is published to the Web, it will expand as follows:

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

A random string is appended, but this does not change every time access is made. This string is a hash value and is generated based on the contents of the referenced file. Therefore, the same string is generated as long as the contents of the file do not change. If the contents of the file change, it will be changed to a new string.

This ensures that cached files are preferred because if the files are the same, the paths are the same. As the file is updated, the path changes, so you can download and use the new file.

By the asp-append-version="true" way, this attribute is standard only for static files placed in the wwwroot folder. Note that random strings are not expanded when set to other files.

About the sample program

The default project template .js site asp-append-version template. Site.css does not asp-append-version have an appended to it.

The sample program _Layout.cshtml adds site.js and site.css of asp-append-version the file. We're also adding img tags as asp-append-version a reference.