Question

我创建了一个使用SPA和React的.NET Core Web API。我想将一些数据预加载到应用程序中。

我的startup.cs文件如下：

app.UseSpa(spa => {
  spa.Options.SourcePath = "ClientApp";
  spa.UseSpaPrerendering(options => {
    options.BootModulePath = $"main.chunk.js";
    options.SupplyData = (context, data) => {
      data["siteConfiguration"] =  "{my custom object}";
    };
  });
  if (env.IsDevelopment()) {
    spa.UseReactDevelopmentServer(npmScript: "start");
  }
});

我找不到关于BootModulePath的错误。

找不到与React一起使用的此属性的任何信息，或者如何使用.NET Core将数据预呈现到React SPA中。

是否有一个有关如何完成此操作的示例？

谢谢

Answer 1

我正在使用一种不同的方法来完成此任务。我正在.net core https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services?view=aspnetcore-2.2#server-prerendering中使用spa服务进行预渲染。我还使用剃刀页面生成html页面（只有一个div用于响应安装）。我需要做的就是在Index.cshtml页面的根div上添加一个标签，如下所示：

<div id="react-app" asp-prerender-module="ClientApp/dist/main-server">Loading...</div>

我的主服务器捆绑软件的入口点如下：

export default createServerRenderer(params => {
    //do stuff here

    return new Promise<RenderResult>((resolve, reject) => {
        params.domainTasks.then(() => {
            resolve({
                html: /* html string rendered by your app */,
                globals: {
                    cachedVar1: data1,
                    cachedVar2: data2
                }
            });
        }, reject); // Also propagate any errors back into the host application
    });
});

这使我可以通过将节点放入JavaScript的全局变量中来预加载节点在预渲染期间创建的数据。

如果您要预加载来自.net核心服务器而不是来自节点的数据，那么您可以做的就是将该数据作为模型的一部分传递给视图。

public async Task<IActionResult> Index()
{
    //get data here

    return View(preloadedData);
}

然后在Index.cshtml页面中，您可以添加如下内容：

<script>
    var PRELOADED_CACHE = @Html.Raw(Json.Serialize(@Model));
</script>

这将放置一个名为PRELOADED_CACHE的全局变量，您可以从浏览器中的应用程序访问它（但在预渲染期间将不可用）。

我知道这不正是您要寻找的东西，但希望至少可以给您一些有用的想法。

将数据预渲染到SPA应用程序中

1 个答案: