预呈现Blazor WebAssembly的正确方法是什么

Question

经过以下步骤后，它几乎可以工作：

1. 安装托管版本的blazorwasm模板应用程序。

   dotnet new blazorwasm --hosted -o HostedWasm
   

2. 将_Hosted.cshtml从blazorserver模板复制到Pages文件夹中
3. 将服务器的Startup.cs中的endpoints.MapFallbackToFile("index.html")更改为endpoints.MapFallbackToPage("/_Host")
4. 将_Host.cshtml中的<script src="_framework/blazor.server.js"></script>更改为<script src="_framework/blazor.webassembly.js"></script>

现在，如果您dotnet run服务器，您将能够使用预呈现的HTML浏览模板页面。

但是，我有两个问题：

1. 是"；右"；如何进行Blazor WebAssembly的预呈现？我在文档中看不到这方面的任何信息
2. 如何在服务器端和客户端之间共享DI？现在，如果您浏览/，然后转到/fetchdata，一切都会很好，但如果您在/fetchdata路径上使用F5(例如刷新(，您将看到

InvalidOperationException：无法为属性"Http"提供值在类型"HostedWasm.Client.Pages.FetchData"上。没有注册类型为"System.Net.Http.HttpClient".的服务

要修复它，您需要将HttpClient配置代码从Client/Program.cs复制到Server/Startup.cs

Answer 1

Andrew Lock出色的博客文章《为Blazor WebAssembly应用程序启用预提交》给出了最好的说明，IMO。在这里重复他的步骤：

1. 添加主页，dotnet new page -o Pages -n _Host --no-pagemodel
2. 将Client/wwwwroot/index.html复制到其中，使@page位于顶部
3. 添加标记帮助程序，@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4. 将<div id="app">替换为<component type="typeof(BlazorApp1.App)" render-mode="WebAssemblyPrerendered" />
5. 从Program.cs中删除builder.RootComponents.Add<App>("#app")
6. 向服务器添加一个http客户端，例如services.AddSingleton<HttpClient>

他继续链接到其他博客文章，这些文章讨论了处理缺少HttpClient问题的"权利"。我认为注入一个客户是"正确的"方法。这是一个简单的解决方案。该应用程序仅在服务器上运行几秒钟。预渲染的应用程序无论如何都不是交互式的，所以用户不会点击一堆。