Before we start this article, first, we need to decide which hosting model we will be interested in and which one will be better in use.
Which Blazor hosting models are you primarily interested in?
- Blazor running client-side in the browser on Web Assembly
- Blazor running server-side in an ASP.NET Core app
- Blazor running in an Electron app
- Other (please specify in Comment)
Now, let’s learn about Blazor Client-side and Server-side,
Client-Side
Blazor client-side is used for building interactive client-side web apps with .NET. Blazor client-side uses open web standards without plugins or code transpiration; and works in all modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible by Web Assembly. Web Assembly is an open web standard and it’s supported in all web browsers without any plug-in.
Blazor uses DOM for rendering the C# content but here, it will not render to us directly, so it will be using JavaScript for rendering the C# content.
Blazor Client-Side is deployed as a set of static files and no .NET Server-side dependencies.
When we run this application, we can see mono.js, Blazor.js, and Blazor.webassembly.js, which means it will be using mono for running .NET Runtime DLL. (You can check it in every browser's developer tool).
Here, you can also see the other .NET Intermediate Language DLLs.
- Code reusability.
- Robust and feature-rich language.
The main thing which I marked here is that it will require capable hardware and software (like a browser). If you run your application on Internet Explorer, then it will not run perfectly, as it runs in Edge and Chrome.
Server-side
In the server-side, the app is executed from the Windows Server. It has the same requirement which we need in an ASP.NET Core project execution.
In ASP.NET Core, the app is hosted on the server-side and the client sets up the signal R setup where the client connects.
In Blazor server-side, the blazor.server.js file will be used to set up the connection. Blazor runs faster because of the app size being much smaller.
One more thing which I have seen here there is no offline support; if the connection fails, then it will stop working. That means every user is depended on network hop. If your network connection gets Up/Down, then also you may not get as good and faster responses means you might not be getting the SignalR real-time experience.
But here is one more advantage. If our connection is lost, then it will automatically reconnect when the connection is up. This happens because it uses Active SignalR Connection. So, as long as our state is stored in memory, our state is not going to be lost.
Here, we
will manage SignalR Connection state means when you want to
close/Start/Reconnect. If you are sending some request and if your connection is closed, then it will automatically reconnect and your request is completed.
Everyone has a question that how to create a model class. Well. let me tell you. We will create our model in the .cshtml page.
After the completion of the Blazor server side & client side models, I believe, you have so many questions. So, I have some common questions covered here. If you have a question other than these, please specify in Comments.
What is SignalR?
ASP.NET SignalR is a library which provides real-time functionality in our application. Using SignalR, we can create a web application that requires a high-frequency update from the server.
For more information (SignalR), you can check it on this link of SignalR.
Summary
In this article, I have just covered the basic models (Flow) of Blazor technology. Here, I have also mentioned the Razor, SignalR hyperlinks where you can get more knowledge in brief.
Thanks for reading this article.
See Also,
Part 3 will come soon with CRUD Operations in Blazor.