Blazor Severで開発時に静的ファイルのキャッシュを無効化する方法

2024/6/6 .NET, .NET Core/.NET5,6,7,8, ASP.NET Core, Blazor Server, C#, Tips, ネットワーク, プログラミング

Blazor Sever(ASP.NET Core)開発時に、頻繁に変更が入るJavaScriptのような静的ファイルがローカルキャッシュされないようにする方法。

ファイル編集後に毎回ブラウザのキャッシュを手動クリアしてリロードし直す手間が省けます。

対応

以下のようなコードでキャッシュを無効化する。
※設定後は一度ブラウザキャッシュをクリアする必要があります。

Program.cs:

//app.UseStaticFiles();
if (app.Environment.IsDevelopment())
{
    var CACHE_CONTROL = "no-cache, no-store, must-revalidate";
    var PRAGMA = "no-cache";
    var EXPIRES = "0";
    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers["Cache-Control"] = CACHE_CONTROL;
            ctx.Context.Response.Headers["Pragma"] = PRAGMA;
            ctx.Context.Response.Headers["Expires"] = EXPIRES;
        }
    });
}

結果

初回起動時:

リロード時(無効化前):

リロード時(無効化後):

ブラウザキャッシュが無効化され、毎回最新の静的ファイルが取得されるようになりました。

以上です。