Blazor静态SSR中页面级JavaScript使用问题及疑惑

一、SectionOutlet引入脚本导航后失效的解决办法 #

• 问题根源：Blazor SSR导航采用局部DOM更新，首次渲染时通过SectionContent加载的homepage.js只会执行一次，返回首页时不会重新注入或执行脚本。
• 修复方案：
  1. 使用Blazor官方的页面级脚本机制替代SectionOutlet：在首页组件中直接使用内置的<PageScript>组件，指定脚本路径，框架会自动处理导航时的脚本加载与清理。示例：

     @page "/"
     <PageScript Src="~/homepage.js" />
     <!-- 页面内容 -->
     

  2. 手动控制脚本生命周期：如果坚持用SectionOutlet，需要在组件的OnAfterRenderAsync方法中检查脚本是否已加载，未加载则动态创建script标签，同时在组件销毁时移除脚本（实现IDisposable接口）。示例：

     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             var script = Document.CreateElement("script");
             script.SetAttribute("src", "~/homepage.js");
             await Document.Body.AppendChildAsync(script);
         }
     }
     
     public void Dispose()
     {
         var scripts = Document.QuerySelectorAll("script[src='~/homepage.js']");
         foreach (var script in scripts)
         {
             script.Remove();
         }
     }
     

二、官方文档相关疑惑解答 #

• wwwroot/BlazorPageScript.lib.module.js的位置：这个文件是Blazor框架自动生成的，不需要手动添加或修改，框架会在构建时自动处理并注入到页面中，用于管理页面级脚本的加载逻辑。
• <page-script>组件：这是Blazor SSR内置的组件（注意首字母大写<PageScript>），无需自行定义，直接在页面组件中使用即可，作用是自动关联页面与对应的JS文件，处理导航时的脚本加载、卸载和执行逻辑。
• JS文件添加查询字符串（如?counter）的作用：主要有两个目的：
  1. 缓存控制：作为版本标识，当JS文件内容变更时，修改查询字符串的值，浏览器会认为是新资源，避免加载缓存的旧文件。
  2. 脚本隔离：区分不同页面或组件的脚本实例，防止同名脚本变量或函数冲突。

三、实现类似asp-append-version="true"的缓存功能 #

Blazor中可以通过以下两种方式实现：

1. 使用内置<PageScript>组件：框架会自动为脚本添加版本查询参数（基于文件哈希），当JS文件内容变更时，参数值自动更新，无需手动维护。
2. 手动配置静态文件版本中间件：在Program.cs中配置静态文件中间件，启用版本查询支持，这样所有静态资源（包括JS文件）都会自动添加版本哈希参数。示例：

   app.UseStaticFiles(new StaticFileOptions
   {
       OnPrepareResponse = ctx =>
       {
           if (ctx.File.Name.EndsWith(".js") || ctx.File.Name.EndsWith(".css"))
           {
               var fileHash = BitConverter.ToString(ctx.File.PhysicalFileInfo.CalculateFileHash().Hash).Replace("-", "").ToLowerInvariant();
               ctx.Context.Response.Headers.Append("ETag", $"\"{fileHash}\"");
               ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000, immutable");
           }
       }
   });
   

   或者使用构建工具（如Webpack、MSBuild）在编译时自动为JS文件添加哈希后缀（如homepage.abc123.js），彻底避免缓存旧文件的问题。

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