Blazor Server查看源代码时RenderBody内容缺失问题求助

核心原因 #

Blazor默认的Server/WASM客户端渲染模式下，页面内容是通过JavaScript在浏览器端动态生成的，查看页面源代码时只能看到初始框架代码，看不到RenderBody里的实际内容，这会直接影响搜索引擎抓取。

具体解决方案 #

• 开启Blazor Server预渲染
  如果你使用Blazor Server模式，修改_Host.cshtml中的组件渲染标签，添加render-mode="ServerPrerendered"属性：

  <component type="typeof(App)" render-mode="ServerPrerendered" />
  

  配置后服务器会在首次请求时，将RenderBody内的内容完整渲染为静态HTML发送给浏览器，此时查看源代码就能看到所有内容，后续交互仍通过SignalR维持。

• 使用.NET 8+ Blazor Web App的静态/SSR模式
  若基于.NET 8及以上版本开发，直接选择静态渲染或**服务器端渲染(SSR)**模板创建项目。这类模式下所有页面内容会在服务器端完整渲染后输出，源代码中能看到包括类、样式标签在内的全部HTML内容，完全满足搜索引擎抓取需求。

• 为Blazor WASM添加预渲染支持
  纯Blazor WASM模式无法直接输出静态内容，需添加一个ASP.NET Core服务器项目作为宿主，配置预渲染功能，让首页及关键页面的内容在服务器端提前渲染完成后再发送给浏览器。

额外注意事项 #

• 预渲染时要确保动态数据（如从API获取的内容）能在服务器端正确加载，避免预渲染内容与客户端交互后的内容不一致。
• 可通过Google Search Console的URL检查工具验证内容是否能被搜索引擎正常抓取。

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