blazor – ASP.NET Hosting Reviews and Guides

What is the Difference Between Blazor Server and Blazor Web Assembly

Jacques Hunt — Fri, 23 Aug 2024 07:32:56 +0000

Should you be regularly updated about.NET developments, you may be familiar with the concept of Blazor. However, what exactly is Blazor? Why is it so well-liked? Let’s visualize it to better grasp its importance.

A major component of accomplishing client-side tasks for web development is Javascript. You can save a significant number of backend calls by making changes to the Document Object Model (DOM). Building functionalities would be a direct outcome of this. They have begun using typescripts since more sophisticated iterations of javascript-based user interface frameworks (like view, angular, react, etc.) have been released.

Thus, you need to learn Javascript if you want your client-side functionalities to work properly. There’s a catch, though. Depending on the UI framework, you may need to learn a different version of Javascript. This is where Microsoft saves the day for us. Their goal was to lessen our reliance on Javascript by releasing Blazor, an open-source web framework.

Blazor makes it simple to accomplish the functionalities that were previously possible with Javascript. Javascript is no longer a concern when creating rich web UI/UX experiences with CSS, C#, and HTML. After reading through the background, it’s time to learn more about Blazor and how it can simplify client-side tasks for web developers.

What Is Blazor?

Blazor is an open-source, free web framework that makes it simple for developers to write C# code for highly interactive websites. Javascript is no longer necessary when developing client-side C# and.NET library applications. The byte code for WebAssembly is compiled from the.NET runtime. After that, all.NET DLLs can run because the.NET runtime is integrated into the browser. All of the C# code you have written is included in this. There are two methods for hosting Blazor:

Blazor WebAssembly
Blazor server

What is Blazor Server?

The Blazor server is a hosting model that was introduced with.NET core version 3.0 and enables the execution of an application directly on the server. In order to facilitate the integration of server-side functionality, it makes use of ASP.NET core. It uses SignalR to create a connection between the client-side browser and the server-side. SignalR transmits data to the server whenever a client-side interaction takes place. The page has been updated.

In the event that the client side communicates again, the server only transmits the modified HTML over the SignalR server, which updates the client’s user interface. For the user, this results in a flawless and extremely responsive experience.

Overview Blazor Server

The pros of the Blazor server are as follows:

Applications load very quickly because users only download the HTML variations and do not download the complete application libraries.
Since the C# files are not being transferred to the client-side, backend code is isolated.
Compatibility with earlier browser versions as well.

The cons of the Blazor server are as follows:

Network instability can be a major issue because the entire process is online and files are transferred from the server to the client-side.
Scalability is a gray area because memory consumption will increase dramatically because new WebSockets are created each time a new connection is established.

What’s Blazor Web assembly?

The Blazor WebAssembly is the company’s second hosting model, which was released in May 2020. WebAssembly is integrated with a.NET runtime. This provides consistent bytecode across web applications. Blazor WebAssembly and this.NET runtime are downloaded together, allowing standard.NET code to run in the browser. There is no need for SignalR or any other additional plugin to keep the connection between the client and the server active once this is operating from the client-side.

However, Blazor WebAssembly cannot be integrated with server-side applications. Additionally, a web API was needed for data exchange and communication.

Overview Blazor Web Assembly

The pros of Blazor WebAssembly are as follows:

Given that the entire Blazor WebAssembly: site content is downloaded client-side, the user interface
After the initial loading time, responds incredibly quickly to user requests or interactions.
There is offline support available: Blazer WebAssembly’s extremely long initial loading time is its lone flaw.

Implementation of Blazor Server

To successfully implement Blazor Server, follow these steps:

Once you open Visual studio 2019, create a new project and look for a Blazor server.
Choose a framework from the list and give the solution a real name when choosing the project.
Look for developer tools in your browser to get a better understanding of the data communication between the client and the server.
Go to the networks tab now, and refresh the page.
Now, server styles and blazor.server.js are present in addition to the SignalR communication. Data communication in binary format is pushed by SignalR communication.
Additional network calls are added in the messages tab under SignalR communication each time you click a button on the webpage.
This demonstrates that the server side is used to request and fetch the pages.

Implementation OF Blazor Web Assembly

Here are the steps for the successful implementation of Blazo WebAssembly:

When Visual Studio 2019 opens, open a new project and search for the Blazor WebAssembly program.
Choose a framework from the list and give the solution a real name when choosing the project.
Look for developer tools in your browser to get a better idea of how the Blazor Web Assembly functions.
The dotnet.version.js file and the blazor.webassembly.js file are located here. This indicates that there is load on the web assembly.
Try navigating between the tabs now. There won’t be any exchange of messages between the client and server. Only the necessary data is retrieved in JSON format.
Proceed to the fetch data tab after that. The weather, and a network call. The JSON file will appear right away.
Now that the data is saved in a JSON file, it is being retrieved straight.

What Are The Differences Between The Blazor Web and Server Assemblies?

Now that you are aware of the distinctions between Blazor WebAssembly and a Blazor server, let’s pose the most crucial query in this case study. When developing a Blazor application, which hosting provider should you use?

Everything is contingent upon the purpose and functionalities of the application you intend to develop with Blazor. Blazor WebAssembly is the clear choice if you wish to develop a standard application from a location with a shaky internet connection. This is due to the fact that you can continue developing apps even in the absence of a server connection.

However, choosing the Blazor server would be sensible if you always have a reliable internet connection and don’t have any trouble connecting to a server.

Bottom Line

Every Blazor hosting service has advantages and disadvantages of its own. You have the freedom to select the hosting service that best suits your needs and preferences. For instance, use a Blazor WebAssembly approach if you don’t want the public to see your code because it contains sensitive data. But using a Blazor server is the best option if you want to make your application widely available and draw in a sizable user contingent.

How Lazyloading Works to Increase Your Blazor Performance?

Jacques Hunt — Fri, 16 Jun 2023 08:08:55 +0000

In this article, we’ll examine how to implement lazy loading using Blazor WebAssembly. We can speed up the startup of our Blazor WebAssembly application by delaying the download of resources we don’t currently require. For instance, downloading all the files pertaining to products, authentication, and other things is useless if we have a large Blazor WebAssembly application and our users only want to view the home or contact pages. The program will only download these resources if the user specifically requests them when lazy loading is enabled.

Setup Blazor WASM Project

Open the Visual Studio and search for Blazor App. Click on the Next button,

Define the project name, path, and solution name. Click on the Create button,

After that a new window will pop up to choose the target framework (.Net 6.0) from the dropdown and make sure to select the Blazor server App and in the Advanced section “Configure the Https” is checked.

Blazor Wasm Standard Workflow

If we now launch our application, access the Dev Tools window (F12), select the Application tab, and check the cache:

Although we are still on the Home page and have not navigated anywhere else, we can see that our BlazorWasmLazyLoading.dll file has been downloaded and cached, which is typical. However, it also suggests that all of the components in this DLL have been downloaded. Of course, for small apps like this one, this is not a problem. However, it could significantly speed up downloads for a more complex application. So let’s work out a way to prevent it.

Updating the primary project with new packages

We’re going to use the Syncfusion Libraries in this article to work with the idea of lazy loading, so create a new Razor class library project called Weather and empty it out except for the _Imports.razor file. Additionally, this project needs to be referenced from the main one.

From the right-click menu of the project, choose Manage NuGet Packages.
Afterward, use the word Syncfusion. Blazor, locate, and set up the proper Syncfusion.Blazor. Blazor NuGet packages. In this location, Syncfusion has been installed. The program makes use of the NuGet packages Syncfusion and Blazor Buttons.Blazor.Calendars. Look at the illustration below.

Configure the Syncfusion Blazor Service in Program.cs file as per the below code.

using LazyLoading;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Implementation Lazy Loading

In order to use Blazor WebAssembly’s Lazy Loading feature, we must first make a change to the main project file. Therefore, from the context menu, right-click on the BlazorWasmLazyLoading project and choose EditProjectFile:

LazyLoading.csproj



  
    net6.0
    enable
    enable

Modifying App.razor File to Load the Required DLL

We import the required utilizing directives before injecting the AssemblyLoader to load our assembly. The OnNavigateAsync event callback in the Router component is then given the OnNavigateAsync method. The OnNavigateAsync event callback is invoked just before switching to a new page. The AdditionalAssemblies property is also set to true. This attribute instructs our program to use additional assemblies to search for components that match the correct URIs.

In the @code section, we create the _lazyLoadedAssemblies private list of assemblies and the OnNavigateAsync method with the NavigationContext parameter. We check the currently required route inside the procedure using the context argument. If the fetch data route—the route of our FetchData component—matches, we use the LoadAssembliesAsync method to load the assemblies.

@using System.Reflection;
@using Microsoft.AspNetCore.Components.Routing;
@using Microsoft.AspNetCore.Components.WebAssembly.Services;
@inject LazyAssemblyLoader assemblyLoader;

    
        
        
    
    
        Not found
        
            Sorry, there's nothing at this address.
        
    


@code {
    private List lazyLoadedAssemblies = new List();
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path.StartsWith("fetchdata"))
            {
                var assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Sample.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Buttons.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Charts.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Data.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.DropDowns.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Grid.dll" });
                lazyLoadedAssemblies.AddRange(assemblies);
            }
            if(args.Path.StartsWith("counter"))
            {
                var assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Calendars.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Buttons.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Lists.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Navigations.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Notifications.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Popups.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.Spinner.dll" });
                assemblies = await assemblyLoader.LoadAssembliesAsync(new[] { "Syncfusion.Blazor.SplitButtons.dll" });
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {

        }
    }
}

Keep in mind that we won’t be able to locate the downloaded Sample.dll if we launch the app and search the cache. However, if we visit the FetchData page and the counter page, we can see the content of each page as well as the dependencies that have been downloaded.

Counter page

Conclusion

Currently, we are aware of how to load various dependencies solely when necessary using Blazor WebAssembly’s lazy loading feature. As was already mentioned, this is a great feature because it speeds up the loading of our application.

All there is to it is that!