Blazor Server Side Rendering in .NET 8.0 - A Quick Look

hey friends it's Alex here at the code wolf again I'm back from a bit of a burnout break after working on some other projects but it's good to be here making videos again and for this video we're actually going to look at a new feature from the upcoming.net 8 release which is Blazer server side rendering this is a pretty cool feature and as a quick side plug the channel is actually approaching a thousand subscribers and so if you enjoy this content at all please hit that subscribe button I've got some plans for bigger and better content down the road and the subs really help out a lot but back to blazer for right now [Music] thank you alright so a few super quick slides I promise so with net 8 you'll be able to develop Blazer apps that are entirely client-side entirely server side or both that's right we now have full stack development with just Blazer now you might be thinking well we could already do this using Blazer webassembly or Blazer server but that's not entirely accurate at their core both of these options were still focused on creating a client-side experience without a true server-side rendering option to better understand this let's quickly recap how these two existing hosting models work and then explore the additional new approach coming in.net 8. so in terms of Blazer hosting models first we have Blazer webassembly when the browser makes a request to load your app the server sends back your application dlls and a lightweight version of the.net runtime built on webassembly to the browser the app files are then interpreted by the.net runtime and executed entirely on the client as the user navigates the site navigation and other interactions are intercepted locally and all handled in the browser the app can optionally send background HTTP requests to web services to retrieve additional data as needed second we have Blazer server in simplified terms when your site loads this model sends a small set of files to the browser to bootstrap your app and establish a signalr connection back to the application server over websockets to render the page user interactions are then continuously sent over the circuit changes are compiled on the server and then those updates are rapidly sent back to give the illusion that this is all behaving like a client-side app Blazer server is a hybrid model that provides the experience of a client-side app while offloading some of the work to the server and allowing the app to interface directly with other backend services while starting in.net 8 we have a third option which is full server-side rendering of Blazer components honestly you can very Loosely think of this setup as Razer pages but with blazer components if you're familiar with that part of asp.net in this architecture there is no web assembly there is no signalr circuit the user just makes a request to the server it compiles a Blazer component and then sends the response back as a standard HTML response all in one go and as the user navigates to other Pages this same process repeats for different components as you might have guessed currently this approach limits the amount of dynamic interactivity and doesn't provide the experience of a single page app such as responding to on-click events and rapidly updating the UI there are supposedly plans to support that in the future by combining server-side rendering with other Blazer functionality but we won't worry about that right now so essentially this new approach gives you the ability to write full stack apps using blazer for example you could create a few simple routable pages on your site that are just Blazer components on the back end pages that need a more Rich client experience such as a shopping page can still be written using an interactive client approach.net developers have already been building hybrid apps using Blazer and razor Pages or MVC but now you can do it all exclusively with blazer now this architecture allows for all kinds of other benefits such as being able to render out a component as an HTML string on the server and inject that in various places in your app architecture you can also specify Blazer components as a return type from controllers I'm not going to get into all the different use cases in this video enough slides let's just see how this works in action to get started you'll need to install the latest preview version of.net 8 which at the time of this recording is version 4. so just head over to net.microsoft.com next to get the latest preview version you can also always specifically download preview 4 to make sure you're able to follow along without issues if you're viewing this at a later date server side rendering will probably remain the same conceptually for a while but the syntax and exact feature set will probably change over time once you've installed the.net 8 preview navigate to an empty directory on your Dev machine inside of the command line and then let's run the command new web Dash o and give the app a name of Blazer server rendering or something and then let's CD down into that directory and say.net new razor component and name that my server component and this will just add a new component to the project we just created finally you can open the app in vs code by running the code period command of course you can also open it up in visual studio if you prefer that approach just give it a second to load the project and we should see our familiar.net structure on the left nothing new here yet well let's take a closer look at that component we just created which at this point is just a standard Blazer component we can add some paragraph text in here to just say hello from the server side and then there's a couple tweaks we have to take care of to enable server side rendering first let's add the at page directive with a slash server side URL which is the path that we will use to reach this component in the browser this director of already exists in previous versions of Blazer it just makes the component routable meaning that we can reach it from its own URL versus being nested on a parent page of some sort nothing new here next we have to implement the irazer component application interface and pass in the name of the component as a type parameter so let's take care of that and this part is new in.net 8 and registers the component for server side rendering supposedly this syntax might change to something more friendly by the time.net 8 releases so let's keep an eye on it now lastly we have to make a couple tweaks to our program file so let's head over there now first we have to register our Razer components on the Builder object so let's say builder.services.add Razer components and finally we have to map the endpoints for those components on the app object by saying app.map Razer components and pass in our component name one more time if your project is not able to find the component just add a using statement at the top with the namespace of your overall project I'm guessing some of this syntax might also be adjusted over time but again we'll see that's really all there is to it it's really this easy now notice that we also have this minimal API endpoint here for the home page URL I'm going to leave this here to show how easily we can mix different types of asp.net application models together so let's run the app from our terminal window with the.net run command and give that a moment to start up and then investigate this over in the browser remember you can always control click the link in the output to jump right out to your site so when that site loads initially we see the hello world message from our minimal API endpoint well we can also request our Blazer component and have that rendered server side by navigating to the slash server side URL path that we set up and there are component loads as expected but the interesting details can actually be discovered over in the browser tools so let's open those up and then head over to the network tab I'll refresh the page a couple times and you can see that this just looks like a standard web request and response the browser sends a request for our component and the server responds with the rendered HTML for that URL again very similar to Razer Pages or MVC but unusual for Blazer the fact that this looks so normal in the dev tools and behind the scenes is really abnormal for a Blazer app it's easier to understand why this is so unique if we look at Blazer webassembly and Blazer's server versions of this same app for comparison I've already gone ahead and created those since that's not really the focus of our exercise here so let's just jump ahead and explore those in these new tabs at the top so first we have an out of the box Blazer web assembly site open to the home page I've already cleared all my browser cache to demo this properly so let's see what happens when we do a hard refresh now over in the dev tools you can see all kinds of traffic as the browser downloads all of the app dlls and the necessary assets to get this app running on webassembly once they have been downloaded this component is rendered client side not on the server now obviously most of these get cached after the first run here but this is still a vastly different hosting model and experience from what we saw with the simple Blazer server-side rendering request our whole app is sitting here in the browser well let's switch to the third tab here and look at the same example in Blazer server in this case when I do a full refresh we can see some initial assets are downloaded to set up the connection to the server and manage updates but the most interesting part is hidden in the websockets tab here we can see logs about a signal R connection to handle rendering app updates the actual HTML was compiled on the server but it's using a signalr infrastructure to still simulate a client-side app in this application architecture Blazer server is smart enough to only render the fragments of HTML that change based on user interactions whereas full Blazer server-side rendering always renders the entire page at once and sends it back limiting interactivity so hopefully this provides a good look at the new server-side blazer component rendering in.net 8 and provides some useful context in comparison to other existing architectures that we've had for a while I'll be delivering more content for net 8 as it approaches so thanks for watching and please hit subscribe to support more content like this

Channel: The Code Wolf

Views: 5,999

Keywords: .NET 8.0, Blazor .NET 8.0, Blazor server side rendering, blazor server side, blazor asp.net core 8.0, server side rendering blazor

Id: dJzDa58n8SM

Length: 10min 38sec (638 seconds)

Published: Fri May 26 2023