I am using Blazor Interative Server, .NET 9. I have a component that makes a call to a legacy service that can take up to 10 seconds to return a response. When I first put this in OnInitializedAsync, I noticed the call was happening twice, which resulted in really long page loads and is inefficient.
This double rendering is explained in the .net documentation, and then a solution is given toward the end of the section here.
So I tried this out. I added the streamrendering attribute, I added the code to store the data as a json object, added the IDisposable. But I never got a key match with my data. The data I am loading in is a list of objects, not a primitive like shown in the example, so I'm not sure if that's why. To be sure, I implemented it in another component that just runs a Task.Delay(7000) and returns a string of TimeElapsed, and that works fine and I get a hit on that on the interactive call. But not on the component that does something meaningful. Okay, great, but now what?
I ended up finding an alternative, and that's to make the data call like this
protected override async Task OnAfterRenderAsync(bool firstRender){ if(firstRender) { data = await LongDataCall(); InvokeAsync(StateHasChanged); IsLoading = false; }}And that worked great. So here's my question: Why not recommend this? It accomplishes the two things the streamrendering attribute and persistentstatecomponent claim to accomplish:
By combining streaming rendering with persistent component state:
- Services and databases only require a single call for component initialization.
- Components render their UIs quickly with loading messages during long-running tasks for the best user experience.
I know there are other back-end solutions to handle this situation like caching, but at this point I'm just confused why .NET would recommend a much more involved pattern that didn't end up working in practice. It's likely I'm missing something.
Another issue I have is, if OnInitializedAsync is called twice, and that is the recommended place to put long running service calls, why not pass in an "isPrerender" parameter like we have in OnAfterRender? This way we can
- choose to not make the data call in the prerender if the time it takes between the prerender and a signalR connection is negligible
- opt to kick off the data call in the prerender phase ONLY and (supposedly) keep track of the task / data and use it in the interactive render
- this pattern would really improve performance as most components probably are a little slow but not slow enough for someone to go down this rabbit hole
In theory the server would know if it's in the prerender phase, so providing this parameter would be possible, no?