Blazor on .NET 8 - Server-Side Rendering, Streaming Rendering and Signal-R in One Blazor Project

hi and welcome I'm Gavin long Leo we are going to look at two great features included in blazerwith.net 8 which is server-side rendering and streaming rendering these enhancements are huge in my opinion server-side rendering means that the HTML is rendered on the server before it is delivered to the client which can result in much faster load times and faster transitions between web pages this ultimately provides an improved ux user experience server-side rendering can also enhance a website's SEO search engine optimization these are just a few advantages that can be gained through the use of server-side rendering in this video we'll create a very basic code example where we'll combine the performance benefits provided with server-side rendering and streaming rendering with the real-time asynchronous push functionality that can be leveraged through signalr an explanation of signal R will be provided later on in this video the benefits of server-side rendering can be further augmented by the inclusion of a technology called streaming rendering through the use of server-side rendering and streaming rendering the relevant web page is rendered in HTML on the server side before the HTML is passed down to the client and the relevant web page is displayed within the user's browser basically streaming rendering can for example be used to load part of a server-side rendered web page asynchronously in the background while the parts of the relevant web page that can be loaded almost immediately are loaded in the user's browser almost instantaneously after the user accesses the relevant web page this means for example that the loading of the entire web page is not hindered by long-running operations that need to be performed on the server for example a long-running data retrieval operation and therefore the loading of this webpage is not adversely affected by the long-running operation and this therefore does not adversely affect the user's experience we'll create a basic code example using the new blazer web app project template which provides a starting point for the creation of a Blazer United project to see how we are able to combine the new features of server-side rendering and streaming rendering that are of course new features included in dotnet 8 with the existing signal R technology which is fundamental to Blazer survey applications and we'll combine these Technologies appropriately within one Blazer project through the use of the Blazer web app project template which must be run on.net 8. if you like this video please hit the like button and please consider subscribing please also ring the bell so that you'll be notified of future content please feel free to share this video with anyone you feel May benefit from its content if you'd like to thank me by buying me a coffee you can do this through my buy me a coffee webpage at this URL it will of course be greatly appreciated so I've recently joined Twitter my username is at gavinlawn digital so please feel free to follow me on Twitter in my last video released on this channel we broadly discussed some of the great new features and improvements due to be released in.net 8. the official release of.net 8 will be released in November of this year 2023 it will be a long term support release meaning that it will be supported free of charge by Microsoft for three years after its release date Net 7 the current official release is a standards term support release meaning it is supported free of charge by Microsoft for 18 months after its release date one of the most prominent items that we discussed in the last video a link to this video has been included Below in the description of this video was Blazer United note that I think the name Blazer United will more than likely just become Blazer moving forward but for the purposes of this video I'll refer to Blazer United to differentiate between the new features that will be shipped with net 8 discussed in this video from the current version of Blazer shipped with dotnet 7. later on in this video we'll use the Blazer web app project template to explore some of the new features available in Blazer United as broadly discussed in the last video Blazer United means that a developer can include the benefits inherent in Blazer webassembly along with the benefits inherent in Blazer server within one project there's even an auto mode which for example allows for the ability to use Blazer server for the initial load of a web page giving a near immediate startup while loading the webassembly Assets in the background on subsequent visits the Blazer webassembly model is used removing the need for the persistent connection I.E the signal R connection so the ability to mix hosting models within one Blazer project is an exciting new feature that will be shipped with dotnet 8. let's discuss server-side rendering and streaming rendering if server-side rendering is leveraged and for example the relevant web page requires data to be included that comes from a remote database this may mean that a long-running data retrieval operation must be performed before the entire web page can be rendered so this long-running data retrieval operation could significantly slow down the time that lapses between the user accessing the relevant web page and the relevant content being displayed within the user's browser this can cause the user to have a poor ux user experience and as a result the user may take a dim view of your application when server-side rendering is leveraged a solution for preventing long-running operations from causing the user to have to stare at a blank screen while the relevant page is being rendered on the server is a technology called streaming rendering streaming rendering enables for example the shell of the server-side rendered web page to be displayed in the browser almost immediately after the user accesses the relevant web page the content that takes longer to render for example as a result of the long-running operation to retrieve relevant data from a database can be streamed to the browser later asynchronously through streaming rendering so for example the header navigation hero image and footer could appear in the user's browser almost immediately after the user accesses the relevant web page at this point the page is not rendered in its entirety but the user is presented with some content almost immediately which is certainly much better than the user having to stare at a blank screen while the entire web page is rendered the part of the web page hindered for example by a long-running data retrieval operation can then be streamed to the user's browser via streaming rendering asynchronously once the long-running operation has completed and the relevant part of the web page becomes available while the content being rendered in the background asynchronously is not yet rendered to the browser a loading indicator could for example be displayed to the user's browser which provides the user with status that certain content will be displayed on the user's browser soon and this of course improves the user's ux user experience with the relevant application signal R is used in Blazer server applications to push data from the server to the client asynchronously so that the client gets real-time feedback where the signal R connection is being used between the client and the server for server-side rendered web applications in a Blazer United application streaming rendering can be used to load certain content asynchronously in the user's browser and Signal R may not necessarily be needed you may however elect to use signalr for real-time updates in response to user interactions with certain web pages so the overarching point here is you are able to combine server-side rendering streaming rendering and Signal R within one Blazer project with net 8. we'll look at how to do this in just a bit let's briefly look at an explanation provided by Microsoft for Signal r asp.net signal R is a library for asp.netdevelopers that simplifies the process of adding real-time web functionality to Applications real-time web functionality is the ability to have server code push content to Connected clients instantly as it becomes available rather than having the server wait for a client to request new data signal R is an abstraction over some of the transports that are required to do real-time work between client and server signal R first attempts to establish a websocket connection if possible websocket is the optimal transport for Signal R signal R is used and Blazer server applications where for example changes to web pages known as the diff difference caused through the user interacting with the relevant web page can be calculated on the server and pushed to the user's browser via signal r and the user's browser can then be appropriately updated with the relevant changes so through the use of this technology the entire web page does not need to be retrieved from the server and reloaded in the user's browser with every change to the relevant web page but only the relevant part of the web page that needs to be changed I.E the div is pushed down from the server via signal R to the client and appropriately updated within the user's browser so before we look at code examples to see how we can combine server-side rendering streaming rendering and Signal R in one Blazer project using.net 8. let's set up our environment appropriately so I was going to use.net 8 preview 5 in this video but then discovered that.net 8 preview 6 had been released so I downloaded and installed net 8 preview 6 from this location you can read about some of the new features and improvements included in.net 8 preview 6 at this location in order to access the new blazer web app template that gives us the starting point for creating a Blazer United application we need to install a preview release of Visual Studio 2022 so my recommendation if you want to play around with the new blazer web app project template is to install net 8 preview 6 and visual studio 2022 version 17.7.0 preview 3.0 the free version of visual studio is of course the Community Edition right let's invoke Visual Studio 2022 preview you can see here that I've gone to the dark side using visual studio dark mode I always get complaints in the comments when I use light mode which apparently causes some people's retinas to be damaged irreparably we can't have that so I'm going to the dark side in this video so as discussed in order to easily leverage these new.net 8 Blazer features we can use this new project template named Blazer web app so let's select Blazer web app and it doesn't matter what we call this project so just give it any old name just don't use rude words then as you can see the only framework that we have available to use is dotnet 8 preview this is the only.net framework that is compatible with the Blazer web app project template so that's why it is the only item in the framework drop-down list so by default web pages within our Blazer web app project will be rendered using server-side rendering if we open the show data Razer component file you can see that we have the streaming rendering attribute at the top of the page where true is passed into its Constructor this means that for this razor component streaming rendering is enabled so we are going to see how streaming rendering can be used in this page to load the weather data asynchronously if we look here before code is called to retrieve weather-related data by default code is included to create a delay of one second this code has been included by default in this web page to demonstrate the streaming rendering of part of the page that takes significantly longer than the rest of the page to load this delay is included so that we can see the asynchronous effect caused through the use of including streaming rendering within a Blazer web page that is rendered using server-side rendering so the delay deliberately introduced here will mean that the weather data that is forced by this delay to take a relatively long time to render is loaded asynchronously after the other parts of the web page that can almost load instantaneously or rendered and displayed to the user's browser so if we load the developer tools and click on the network tab here then press Ctrl R to see what is going on when our page loads we can see that the initial load does not include the weather data and we can see within our browser window that the weather data is loaded later so if we look at the preview here the loading indicator appears in place of the weather data on the initial loading of the relevant web page the weather data loads later in the background asynchronously also note that no websocket connection is established because signal r is not used to pass down the data from the server to the browser a simple request response model is used for this purpose and the HTML is fully rendered on the server the asynchronous loading of the weather data is not passed down from the server to the client through a signal or connection instead streaming rendering is used to load the weather data asynchronously so for the initial load of a server-side rendered web page streaming rendering can be used to improve a user's experience with your application so this is a clear difference from when we run an application created using a Blazer server project template using.net 7 as our framework to demonstrate let's create a Blazer server Project using.net 7 as the Project's framework to show how a signal R connection is established by default when a web page created in this project is loaded in the browser so let's run this project and you can see that a websocket connection is made from the browser to the server and this data is being passed down via signal R from the server to the client you can see that by these messages here by default in our Blazer web app project running on.net 8 preview our content is server-side rendered and a signal R connection is not established by default in our Blazer server project running on.net 7 however by default to signalr connection is established we still however may want to use signal R in our Blazer United project running on.net 8. for updating changes made to a web page through user interactions so we want real-time updates made to our web page through the use of signal R so to use signalr for user interaction functionality within our.net 8 Blazer web app project we can implement this through a piece of declarative code let's see how we can leverage signal R within our.net 8 Blazer project so by default we have the counter component created for us in our blazerserver.net 7 project which allows us to test out user interaction functionality out of the box whereas the user clicks the button on the page an integer displayed on the web page is incremented by a value of one each time the button is pressed this value on the page is updated via a signalr connection we don't have this counter component created by default in our.net 8 Blazer project so let's create similar user interaction functionality within our.net 8 Blazer project let's not simply recreate the counter component functionality in our.net 8 Blazer project let's create our own functionality so let's create a page that retrieves a random number from an array each time the user clicks a button at a random location each time the user clicks a button when the relevant button is clicked the web page displays this number on the user's browser window every time the button is clicked a new number is retrieved from the array and displayed to the screen so let's see how we can achieve this functionality and leverage signal R in our Blazer web app project running on.net 8. let's create a Razer component named fetch random number at the top of the page let's include an at page directive and an appropriate route for our page let's open the navmenu.racer file so that we can include an appropriate menu item in the sidebar of our web application so that a user can access the fetch random number page through the relevant newly added menu item Let's test our new menu item great so the code to create the desired functionality is pretty basic let's include a button that when clicked will update the web page appropriately let's wire up this button to a method named fetch random number we'll write the fetch random number method in just a bit in the add code section let's define a private integer variable named random num let's define an integer array that contains five integers let's use the random class that is built into.net to retrieve a random integer value from the error nums array so we can do this by using the rnd.next method to generate a random number from one to six to be clear not including six we can then use this random number as the index for the Aaron arms array and assign a number selected from the error numbers array to the random num variable so the index used to select the random number from the relevant array is the generated random number -1 we of course subtract 1 because the index of the array starts at zero and not one okay the compiler is complaining that the method name should not be the same as the enclosed type so let's change the name of the method to fetch random num then let's also appropriately change the code where we are calling the relevant method let's write the code to Output the random num variable to the screen so at the moment we are not leveraging signal R so our screen is not being updated appropriately when the user clicks the fetch random number button so in order to leverage signal R for the relevant component to help create the desired real-time user interaction functionality and include this functionality in our.net 8 Blazer web app project we need to include the render mode server attribute like this at the top of our fetch random number Razer component file let's run the code and an exception as throne telling us that we need to include the code for a provider for the relevant render mode so we can do this in code within the program.cs file by chaining the add server components method like this to the add razor components method let's try again and you can see that our random number is updated through the use of a signalr connection each time the user presses this button the diff or change to the web page is calculated on the server and the diff is then pushed to the client from the server via a signal or connection the changes are then appropriately updated in the user's browser so in this case the new number retrieved from a random location in the relevant integer array is the change that needs to be made to the web page the entire page does not need to be reloaded every time a change has been made to the web page when the user clicks the fetch random button only the number displayed on the browser needs to be changed so this video hopefully gives you an idea of how you will be able to leverage the benefits of using the new server-side rendering and streaming rendering features that are included within.net 8 alongside the use of signal R real-time push functionality within one Blazer project so in Blazer United you can leverage the benefits inherent in Blazer web assembly projects the inherent benefits included within Blazer server projects and the new server-side rendering and streaming rendering features included in.net 8. from within one Blazer project improvements like this make it a great time to be a.net developer if you liked this video please hit the like button and please consider subscribing please also ring the bell so that you'll be notified of future content please feel free to share this video with anyone you feel May benefit from its content if you'd like to thank me by buying me a coffee you can do this through my buy me a coffee webpage at this URL it will of course be greatly appreciated please see that all the links highlighted in this video are available in the description of this video I've very recently joined Twitter my username is at gavinlon digital so please feel free to follow me on Twitter thank you and take care [Music] thank you [Music] foreign [Music] [Music]

Channel: Gavin Lon

Views: 5,150

Keywords:

Id: am6pz2MpbA0

Length: 25min 33sec (1533 seconds)

Published: Tue Jul 18 2023