如何让浏览器复用已下载的Blazor WASM应用，避免重复预渲染与下载？

使用Blazor Hosted Web App模板时，用户首次访问会触发服务器预渲染页面，随后WASM加载并接管应用。想实现用户下次访问同一URL时，直接使用浏览器已下载的WASM应用，跳过服务器预渲染和WASM重复下载。已知Blazor PWA版本能加快加载速度，但PWA的其他冗余功能显得过重，希望用更轻量化的方案。

• 配置静态资源长期缓存
  在服务器项目的Program.cs中，为WASM核心静态资源（.wasm、.dll、blazor.boot.json等）配置强缓存策略，示例代码：

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          var filePath = ctx.File.PhysicalPath;
          if (filePath.EndsWith(".wasm") || filePath.EndsWith(".dll") || filePath.EndsWith(".blazor.boot.json"))
          {
              ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000, immutable");
          }
      }
  });
  

  Blazor构建时会自动给这些资源添加哈希后缀，资源更新时浏览器会自动识别并下载新版本，无需手动处理缓存失效问题。

• 基于缓存标记跳过预渲染

  1. 首次加载完成后，在Blazor客户端代码中写入本地存储标记：

     localStorage.setItem('wasmCached', 'true');
     

  2. 修改服务器端的_Host.cshtml，添加逻辑判断：若浏览器已有缓存标记，直接返回客户端启动页面，跳过预渲染：

     @page "/"
     @{
         var skipPrerender = Context.Request.Cookies.ContainsKey("wasmCached");
     }
     @if (!skipPrerender)
     {
         <component type="typeof(App)" render-mode="ServerPrerendered" />
     }
     else
     {
         <div id="app"></div>
         <script src="_framework/blazor.webassembly.js"></script>
     }
     

  3. 首次加载完成后，通过客户端脚本将标记写入Cookie，方便服务器端读取：

     document.cookie = "wasmCached=true; path=/; max-age=31536000";
     

• 按需禁用预渲染
  如果不需要SEO支持，或者仅首次访问执行预渲染，可直接修改服务器路由逻辑：

  app.MapFallbackToFile(async context =>
  {
      if (context.Request.Cookies.ContainsKey("wasmCached"))
      {
          await context.Response.SendFileAsync("wwwroot/index.html");
      }
      else
      {
          await context.Response.SendFileAsync("Pages/_Host.cshtml");
      }
  });
  

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