Pre-render data into SPA application - reactjs

Question

I've created a .NET Core Web API that uses SPA with React. I want to preload some data into the application.
My startup.cs file looks like this:
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");
}
});
I'm getting an error about the BootModulePath is not being found.
Couldn't find any information about this property used with React or how to pre-render data into React SPA with .NET Core.
Is there an example on how to accomplish this?
Thanks

Answer 1

I'm using a bit of a different approach to accomplish this. I am using spa services in .net core https://learn.microsoft.com/en-us/aspnet/core/client-side/spa-services?view=aspnetcore-2.2#server-prerendering to do my pre rendering. I am also using razor pages to generate the html page (with just a single div for react to mount to). All I need to do is add a tag on my root div in my Index.cshtml page that looks something like this:
<div id="react-app" asp-prerender-module="ClientApp/dist/main-server">Loading...</div>
The entry point for my main-server bundle looks like:
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
});
});
This lets me pre-load data that was created by node during the pre-rendering by putting them in global variables in JavaScript.
If you want to pre-load data that comes from the .net core server and not from node, then what you can do is to pass that data as part of your model to the view.
public async Task<IActionResult> Index()
{
//get data here
return View(preloadedData);
}
Then in the Index.cshtml page, you can add something like this:
<script>
var PRELOADED_CACHE = #Html.Raw(Json.Serialize(#Model));
</script>
This will put a global variable called PRELOADED_CACHE which you can access from your application in the browser (but won't be available during pre-rendering).
I know this isn't precisely what you are looking for, but hopefully this at least gives you some helpful ideas.