.NET 7.0 Blazor Server静态文件缓存的推荐实现方式是什么？

只在Program.cs中注册AddResponseCaching()和使用UseResponseCaching()还不足以让浏览器缓存图片，你需要在返回图片的响应中添加缓存控制头，明确告诉浏览器可以缓存资源的时长与规则。

具体解决方案： #

1. 为静态文件配置缓存策略 #

如果图片是放在wwwroot下的静态资源，可在配置静态文件中间件时直接设置缓存规则：

// 注意：UseStaticFiles 要放在 UseResponseCaching 之前
app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        // 设置缓存有效期为7天（单位：秒）
        ctx.Context.Response.Headers.Append(
            "Cache-Control", "public, max-age=604800");
    }
});

2. 为API返回的图片设置缓存头 #

如果图片是通过API接口返回的，在对应的Action上添加[ResponseCache]特性即可：

[HttpGet("images/{imageId}")]
[ResponseCache(Duration = 604800, Location = ResponseCacheLocation.Any)]
public IActionResult GetImage(int imageId)
{
    // 示例：读取并返回图片文件
    var imagePath = Path.Combine("static-images", $"{imageId}.jpg");
    return PhysicalFile(imagePath, "image/jpeg");
}

3. 验证缓存是否生效 #

打开浏览器开发者工具（F12）的网络标签，重新加载页面：

• 首次请求图片时状态码为200 OK，响应头会包含Cache-Control字段
• 再次请求时，状态码应为304 Not Modified，或直接显示从disk cache/memory cache读取

常见注意事项： #

• 开发环境下尽量缩短缓存时长，避免修改图片后无法及时看到更新；可通过app.Environment.IsDevelopment()判断环境，动态调整缓存策略
• 若图片需要频繁更新，建议给文件名添加哈希后缀（如banner-abc123.jpg），更新时替换为新文件名，既不影响旧缓存，又能让浏览器获取新资源

内容的提问来源于stack exchange，提问作者Matias Masso