Blazor Render Modes | New Feature | .NET 8

hi I'm Ganesh and in this video we'll talk about the render modes available in Blazer in dotnet 8. there are four render modes available in Blazer in.net 8. we have the static render mode server render mode webassembly render mode and the auto render mode of all these modes the server webassembly and auto render modes are Interactive before we talk about these different render modes we'll first create a new blazer web app project and enable support for these interactive render modes I'm using visual studio 2022 with dotnet 8 release candidate 1 but if you want you can use Visual Studio preview that you can download at this URL here let's start Visual Studio 2022 click create a new project from the all languages drop down select C sharp and from the all project types drop down select Blazer and choose the Blazer web app template click next give the project a name such as Blazer render modes and click next on this page here we have options to enable client-side interactivity and server side interactivity so we can check this checkbox here use interactive webassembly components and we can leave the use interactive server components checkbox checked and click create let's open the solution Explorer and go to the program.cs class file in this project here over here at the top we're first adding the services required for Razer components and because we checked the two check boxes for adding client-side interactivity and server side interactivity we have these calls to add server components and add webassembly components and if we scroll towards the bottom we have the call to app.maprazer components which discovers any available razor components and it also specifies the root component for our application which is the app component then we have ADD server in the mode and add webassembly render mode these two calls add configuration for enabling the server webassembly and auto render modes let's create a Razer component to Showcase these render modes right click the components folder and click add razor component name the component show message create a button element with the text show message and give it some bootstrap classes of BTN and BTN info and add at on click razor directive attribute and set it to handle show message click which will create in just a bit in the code block create a private void method handle show message click now when the button is clicked we want to display a message so let's create a private field to hold that message let's set the message to message one and over here at the top in a H3 heading let's display the value of the message variable by using the Razer syntax at message now let's create a page component that will contain this show message component right click the pages folder and click add razor component and name the component render modes give it an add page razor directive and set the route template to slash render hyphen modes and add the show message component below let's add this page to the navigation menu open the layout folder and click now menu.razer copy the last div with the class nav item and paste it just below it and replace the HF attribute value of the nav link to render Dash modes remove the class for the span tag and set the text to Blazer render modes now let's run the app right click the page and click inspect now click the network tab and make sure all is selected here now click the Blazer in the modes menu item we can see your show message button here now if we click render modes and look at the response here we can see that we get the full HTML from the server so there is a component was executed on the server and the HTML was returned back to us if we click the Ws tab we can find that there is no websockets connection being made so this means that Blazer server is not being used and if you click the vasim tab we don't find any response here either so this means that Blazer webassembly is also not being used and if you click the button nothing happens this brings us to discussing the static render mode the static render mode is a default render mode we can find the router component here which is nothing but the Blazer router the Blazer router has a default render mode of static and it propagates its render mode to the page component it routes so the render modes component will also have the static render mode and since the show message component is present inside the render modes component as a child component the child component will inherit the render mode of its parent component so the show message component will also have the static render mode in static render mode the component is rendered on the server and the component is also not interactive and that explains the reason why the message was not displayed when we clicked the button please note that I am currently using dotnet 8 release candidate 1 and in a future release the Syntax for applying render modes will be simplified when that happens I'll make sure to put that in the video description now let's apply a render mode to a component instance to do that we need to apply the at render mode Razer directive attribute when we use the component so go to the render modes component and apply the UT render mode razor dative attribute to the show message component like so first we will test the server render mode so once again let's run the app right click the page click inspect click the network Tab and click the Ws Tab and now click the Blazer render modes menu item we can see that a websockets connection is being made and if you go to the vasam tab there are no assemblies being loaded now if you click the show message button the button is interactive and you can see your message one so the server render mode uses the Blazer server hosting model so the component is rendered on the server and a websocket connection is established between the client and the server and then the component becomes interactive now for the webassembly and auto render modes for these two render modes we need to place the razor component in the client project so let's right click the show message component and click cut and paste it in the client project now qualify the show message component with the client project name and set the render mode to webassembly make sure to click build and build solution and run the app once again right click inspect click the network tab make sure WS is selected and click the Blazer in the modes menu item we can see that there is no websocket connection being made but if you click the vasam tab you can find a list of assemblies plus the webassembly based.net runtime up here and if you click the button once again the button is interactive and we see our message one so the webassembly render mode uses the Blazer webassembly hosting model and the component is rendered on the client and the component becomes interactive once the webassembly based.net runtime and the Blazer app bundle are downloaded uncached finally Let's test the auto render mode and run the application now right click the page click inspect and click the double arrow here and click the application tab let's clear any site data click the arrow once again and go to the network tab now make sure the Ws tab is selected and click the Blazer in the modes menu item we can see that there's a websocket connection being made also in the vasam tab we can see a list of assemblies and the webassembly based.net runtime and if you click the button we can see that our button is interactive as well in the auto render mode first the Blazer server hosting model is used in the background the webassembly based dotted runtime and the Blazer app bundle are downloaded uncached now on subsequent visits to the component the Blazer webassembly hosting model is used so this means that the component is first rendered on the server then on the client and the component is also interactive one other point to mention is that sibling child components can have different render modes so for example here I can have a child component that uses the webassembly render mode and another child component that uses the server render mode now that's another way to set a random mode this is by applying a render mode to a component definition so here at the top we can use the attribute Razer director and specify a render mode such as render mode server render mode webassembly or render mode Auto note that if you are authoring a component we should avoid specifying a render mode as part of its definition this is because it tightly couples the component's implementation to a specific render mode we should design components in such a way that it is render mode agnostic so you should not make any assumptions whether it is rendered interactively on the server or on the client and it should degrade gracefully when rendered statically there are two situations where it is okay to specify a random mode as part of its definition the first is when the razor component can't be instantiated directly such as in our case here we are specifying a render mode to a routable component the other scenario is when you want to specify a random mode for all component instances we can also set the render mode for the entire application this is done by setting the render mode at the highest level component in the component hierarchy that is not a root component which is app.razer in our case so we can go to the app component and specify the random mode where the routes component is being used we must also be sure to set the same interactive render mode on the head Outlet component here now pre-rendering is enabled by default for all interactive components so if you want to disable pre-rendering we can pass pre-render faults when setting the render mode like so likewise we can also disable pre-rendering for the entire application like so that's it for this video hope you found the video useful thanks for watching foreign

Channel: CodeGanesh

Views: 2,979

Keywords: blazor render modes tutorial, blazor render modes, blazor render mode, blazor render mode static, blazor server render mode, webassembly render mode, auto render mode, asp.net core blazor render modes, asp.net core blazor render modes tutorial, asp.net core blazor render modes tutorial .net 8, asp.net core blazor render mode, render mode blazor, render mode in blazor, .net 8, .net 8 release candidate 1, blazor .net 8, blazor, blazor in .net 8, blazor tutorial, codeganesh

Id: yK4AeZs0jMg

Length: 11min 19sec (679 seconds)

Published: Fri Sep 22 2023