Blazor Server vs. Blazor WebAssembly: Four Ways In Which They Differ

blazer is microsoft's newest web framework with its enhancement for performance in net5 it's bound to be a popular choice that is because you can code client-side functionality using c-sharp no more need for javascript and that alone is a good enough reason to use blazer however blazer comes with a couple of different hosting models that we need to consider with our requirements in this video we're going to have a look at blazer server versus blazer web assembly four ways in which they differ now for more asp.net core coding tutorials visit roundthecode.com subscribe to our youtube channel at youtube.com forward slash around the code and follow us on twitter it's round the code it's good to have an understanding on how the blazer hosting models work before looking at the differences now looking at blazer server blazer server uses a standard asp.net core application within that application we can integrate server-side functionality such as integrating a sql server database through entity framework in addition we can create client-side pages using razer components or razer pages now when the application is running the browser sets up a constant connection with the blazer server application using signalr this is how the browser communicates with the blazer server application now looking at blazer web assembly and blazer web assembly uses web assembly which is supported in most modern day browsers but it's not supported in ie 11. the way it works is that it allows the browser to download the blazer application this means that the blazer application runs in the web browser so there is no need for a constant connection with a server for the application to work however because it's solely a client-side application we can't directly integrate any server-side functionality into the blazer application in order to do that we would need to hook it up with a server-side application such as an asp.net core web api like with blazer server we can create client-side pages using razer components or razer pages so difference number one is initialization now what we've done here is we've created a default blazer server and a default blazer webassembly application what we're going to do is we're going to run both applications and load them up in google chrome from there we're going to open up google developer tools look at the network timeline and see what resources get loaded in so let's go ahead and do that with blazer server so that's now loaded for us so let's go ahead and open it in chrome so as you can see here it's loaded in our resources it's loaded in css and javascript files the javascript file is basically a signalr connection and that basically gives us a constant connection between the browser and the server and as you can see here that has been established through a websocket connection so that is a constant connection there so if we click on the counter link here and as you can see no additional resources have been loaded in so basically all the html all the content for the counter page has been loaded in through our signalr connection as you can see the initial load took around 766 milliseconds and we had to load in nine requests so relatively straightforward so that's blazer server and let's try it now with blazer web assembly so let's stop our blazer server application and load up laser web assembly okay so that's now loaded for us let's open it up in chrome so you can see already it's loaded up quite a lot of requests and what this does is basically the browser has to download the whole application and then from there it can basically run it so that's the reason why we've got 202 requests and it took about five seconds to load in total if we click on the counter link though as you can see it's a very similar story to blazer server there's no additional application no additional resources that need to be loaded in but basically it's always going to be a bit quicker now with blazer web assembly because it doesn't need to initialize that connection with the server it's already got its resources inside the browser and as we can see if we were to open that up again we will basically see that it won't take anywhere near as long because it's already got the application in the browser so as you can see here second time around it's loaded up a lot less resources it's the same number of resources as blazer server so blazer webassembly does have that advantage once it's got the application into its browser so difference number two is search engines and you need to consider whether your application needs to be crawled by search engines now blazer server and blazer webassembly handle search engines in a different way so we're going to show that to you so we're going to load up our blazer server application again now we're going to right click and view source and as you can see in the source code you can see all our content has actually been loaded into the source code so it's got hello world welcome to your new app how is blazer working for you and you can see that's the content there for us so this is ideal for search engines because it can actually read the content let's click on counter now to see if it updates itself so let's view the source for that so on here you can see we've got counter current count the xero and in the source we can see that the content has actually been loaded into the source code so this is ideal for search engines now let's have a look at blazer web assembly and see how that works okay so that's loaded in for us let's do the same thing and as you can see we've used the source but as you can see anything in the app which is basically our blazer application has not been loaded into the source code and that's because it's all been handled through our client using webassembly so anything within app is done through the client now with that you're basically relying on the search engines to be able to render web assembly and it's quite a new technology so there's a good chance that it's unable to do that as you can see in our source code here if we stop the application now in program basically everything within the app element is basically our blazer application so difference number three is server side functionality now there's a big difference between blazer server and blazer web assembly when it comes to server side functionality we look at the blazer server application we can see this is basically a very standard asp.net core application so within here we've got our program and what we can do is we can use a startup so if you're using an asp.net core web api it's exactly the same way as setting this up so what we can do in here is we can go ahead we've configured server side blazer if we wanted to as well we could configure entity framework hook it up with the sql server database and all will work fine now there's a difference with blazer web assembly because as i said earlier it's a client-side application so with that it basically can only do client-side stuff so entity framework hooked up with sql server you wouldn't be able to do that in blazer web assembly on its own you'd have to hook up an asp.net call web api and as you can see here it's basically got its own webassembly host builder which is a more compact version of the host builder in asp.net core and you can do things like obviously you can add the blazer application there and you can do some sort of dependency injection here but what you can't do is you can't add any server-side integration you need to do that through an asp.net call web api and call that web api so difference number four is offline support and you need to consider whether your web application needs to work offline so what we're going to do here is we've got a blazer server and blazer web assembly application running let's see what happens when we take them offline so let's start off with blazer server so let's take it offline so as you can see it's basically showing an error message for us saying it can't connect to the server because it's lost that connection with signalr so basically we can't do anything we can't load up any pages we can't even read the content i mean you can probably remove this error message but still you wouldn't be able to use the application let's go ahead and do the same thing with webassembly so let's turn that off and as you can see we haven't got any error messages so let's have a click around and see if it still works so you can see that our counter page still works however with the fetch data because basically our server has gone offline it basically can't get the data from the server it's throwing an error message for us so blazer web assembly does work offline but it does rely on any server-side functionality like an asp.net core web api to still be online for it to work deciding on which hosting model to use is down to your requirements if you want an application that is supported by search engines and has server side functionality you should go for blazer server however if you want an application that is arguably quicker and has offline support then you should go for blazer web assembly both have their pros and cons but the one good thing is that blazer is supported for these different requirements now thanks very much for watching take care and i'll see you soon goodbye

Channel: Round The Code

Views: 4,193

Keywords: Blazor, Blazor Server, Blazor WebAssembly, Blazor Wasm, Wasm, WebAssembly, ASP.NET Core Blazor, Blazor Server-Side, Blazor Client-Side, Blazor Server vs. Blazor WebAssembly, Blazor Server vs. WebAssembly, Blazor Server vs. Wasm, .NET Blazor, Blazor .NET 5, Blazor Hosting Models, Different Blazor Hosting Models, Blazor Offline, Blazor Search Engines, Blazor Entity Framework, Blazor JavaScript, Blazor Web Framework, Blazor C#, Front End C#, Client-Side C#, Blazor differences

Id: LVCXeCnwJO8

Length: 10min 2sec (602 seconds)

Published: Mon Nov 30 2020