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.
- Visual Studio
- Visual Studio 2019
- ASP.NET Core
- 3.1 (Razor page, MVC)
About caching files on Web pages
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.
However, this behavior can be a problem.
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.
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
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.