Upgrading to Blazor 8 with Syncfusion controls
We've been using Syncfusion controls for Blazor and while they occasionally come with growing pains and hiccups, Syncfusion really deserves a lot of credit for staying on top of things and adding to their list of controls. They supported Blazor 8 when it was released to production, and in its current iteration - well, we could still use a couple of things here, but all in all we couldn't be happier with the collection they've put together. The support for .NET MAUI, Microsoft Teams and Blazor Electron App are exciting prospects we hope to explore some time in the future.
But big question that comes up with them is this: what rendering modes do they support? The short answer seems to be, all of them.
In our previous post we struggled with an upgrade of a Blazor Server project to Blazor 8 and grasping with the nature of server modes as a whole. Now that's behind us, a read through the documentation gives us more questions than answers.
Every component we work with has documentation split up into sections; for Blazor 8 we're focusing on Blazor with SSR and InteractiveServer configurations. Let's take a look at the documentation for the Blazor Accumulation Chart component step:
Add the Syncfusion Blazor Accumulation Chart component in the ~Pages/.razor file. If an interactivity location as Per page/component in the web app, define a render mode at the top of the ~Pages/.razor component, as follows:
@* desired render mode define here *@
@rendermode InteractiveAuto
A Test
We took our upgraded application and set up the pages where we need server rendering with @rendermode InteractiveServer. We've also used the Counter.razor page that comes with the project as a dumping ground for controls to see how they'd act - and we're happy to say that so far, every component we've tested works with server rendering.
That Said...
We're not taking any chances here - we've already embarrassed ourselves wasting time finding out the hard way Blazor 8 Websockets don't play well with IMiddleware implementations, so we've configured the application with a Client application for any scenario where we need InteractiveAuto.
At the time of our writing, our Program.cs file looks something like this:
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
//.AddInteractiveWebAssemblyComponents();
/* other code here*/
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
//.AddInteractiveWebAssemblyRenderMode()
//.AddAdditionalAssemblies(typeof(Counter).Assembly);
This lets us add the dependency quickly in case we need to - right now we just hope we don't. There are a lot of questions about what that would like. Questions like, do the pages in Client support the dependency injection and other dependencies we put together for the server project, or do they need to move? Do they need to match? Does the InteractiveAuto project support IMiddleware? (this won't stop being painfully funny for a few days lol this killed us)
It's a minor quibble - but as you can see, without clear guidelines, sometimes you have to hedge. New tech always goes through a phase where there are more questions asked than answers published. No doubt Syncfusion will address it in their very helpful Technical FAQ site.
Other annoyances to help you sort things out:
Which reference?
For example, the documentation at Blazor Web App in Visual Studio says you should have this reference:
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
However you will find that reference works just as well if you reference Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js. Slight mistake in detail? If you parse the packages you'll find they exist in both and appear to be the same size - it looks like the fundamental difference between the packages is that Syncfusion.Blazor offers all of the scripts as an option, if you want to get granular with which ones you include, while Blazor.Core has less:
Leaving this spot open for the next one I run into...
Looking for help upgrading your web apps to Blazor? Contact us and let's see what we can do to help!