Unleashing the Power of Blazor in .NET 8: Explore Exciting Render Modes and Features!

hi welcome to net code he Channel I am Frederick  your lesson facilitator do you actually agree with   me if I say Blazer it is the future of web app  development starting from um next year that is   2024 with the new features in net a Blazer it  will blow your mind the features are many but   you know we're going to talk about one today and  that is a Blazer render mode please subscribe to   this channel um for more and also you can click  on the notification icon so you can receive   notification as soon as I upload new video you  can like this video too to support this channel   grow if you are familiar with blazer you know  that we have two hosting models in Blazer that   is the Blazer server or the server side and also  the web assembly if you're not familiar to then   Blazer has or Blazer use to support two hosting  model and that is what I have mentioned earlier   the Blazer server and on the Blazer web assembly  now what is a Blazer server and what is a Blazer   web assembly now the server side uses web socket  with signal our connection which communicates   message or information between the server and on  the client now here the client is what I'm talking   about here it is a browser also all processes  are done on the server and results are sent to   the client so the client can just view now want to  talk about the web assembly the processes are done   on the client machine why do I say that because  when a request is being made from the client to   the server all the application packages are sent  to the client browser and it is going to be there   for data processing and Etc so in this case is  going to make it very fast in processing also in   fast in communication now the new netblazer still  has the same or these two models but it has been   upgraded up to four and also the name has changed  from hosting models to render mode what are they   let's find out here and that's going to be the  objective of this video we're going to talk about   the render mode in this video so by the end of  watching this you must able to understand all   the four render mode of net 8 Blazer and also  you're going to see example um with it okay so   let's create an application here so you can see  the four types of render modes that I am talking about so lunch of visual studio and this must  be in the VIS Studio 2022 you must have net 8   um framework installed or the SDK installed  so um let's see I have M installed already   now you can see we have this web app okay  so that's a new one Blazer web app you see   we have the stand loone app that's the web  assembly we have the server to available by   this time around you're going for this web app  now let's give it a name here as Blazer render mode so the random modes you're going to talk  about the first one and that is the none now   when you click on next that is where we have  all the render modes now these render modes   they are the interactivity type how you want  your application to get communicated with the   client you can see from here we have four modes  here the first one is none we have server we   have web assembly and we have this um Auto this  Auto here comprises of the server and now the   web assembly now if I choose none what going  to happen let's click on okay let's get this   account or let's get this project created you're  going to run this project then you're going to   understand the interactivity type as none what's  going to happen or what's going to do to this application okay so we have the project as  you know already and this is the project   that we have as soon as you create a new one  for Blazer now let's go to the components here   component folder and can see we have layout  and pages although there's a new slight bit   of um is is it beautification or it's not it's  organization right it has been organized into a   different format check this at first the first one  we do not have this component folder we only have   the pages and the shared now here we change the  Shar to layout and I will change the pages Still   Remains right and I put these two folders into a  folder a mother or a parent component folder over   here okay so if you want to find them you come  to this now when you check this we have some few   changes here the route here at first was a app.  Razer and now for this app. Riser was first the   index or um host if you're using Blazer server I  believe those who are familiar with to understand   what I'm talking about okay if you're new to you  don't worry this is the current one that we have   for net 8 Blazer okay now let's go to the pages  and now we are going to create a component here   and let's add a new razor component and the  name of this is going to be um render mode page okay so we have this render mode page and   we're going to create another one  and this time around is going to be a component so here let's  um let's say the display message because you want to have a button and  you you wire this button to an event right so   let's have something like I'm going to have  this div or there's no even need let's have   come to this time around and now in here you  want to have oh I want to just have public   or just let's make it as private string and  that is the the message here now this message   is going to be string. mty that is the initial  one okay let's have this private void a method   known as show message as soon as this button  is clicked you want to set this message to   hello so this is customized message all right  so we have this and this is a message that we   talking about so this variable that we are  creating we assigning this value to this   string as soon as um this method is called now  in here let's use H2 and now let's call this   message variable here to display the message  that we have Also let's create a button and   on this button we have BTN BTN primary  as a bootstrap class and we say um show message and now this button when it is clicked  we're going to wear it with onclick event so   we call the show message method that we have  created so this is the method that we have   created and now when this button is clicked we  want to call this message all right let's save   this let me close this and open it again so  display message component yes everything is   set now now let's see we have this so there is  a private void okay so we must have this as a   method that's fine okay so this we are going  to call this in this mode this parent mode so   in here let's have maybe H3 or H2 so this is the  parent component okay and let's show this um show   message component in here right and the name here  it is display message instead so display message   all right now we have this so let's find this  remember that the render mode here it is none   so we have a button here now before we run I want  us to check something we want to navigate to this   page nav menu right now when you come to this  render mode let's set a page route so at page now   the route here it is um let's make it as render  so render render render render that's fine okay   now we go back to this na menu now see we have  this home and weather let's make a duplicate   of one of these and now in here we are going to  navigate this to render okay then we say render mode okay now let's save this let's refresh  this page so we can see the output of this   remember that here we're going to talk about or  we are talking about the interactive type or the   render mode as none while this page is loading  let me take time to explain this now the first   one when you choose none it is automatically or  defaultly a static now this component is rendered   as a plain HTML on the server side and now it  is been also sent to the browser the component   it is not interactive and it does not use Blazer  server or web assembly so it doesn't use any of   the two models it is also static it means it is  not interactive although you have a button we've   wired an event to that button but as soon as you  click on this button nothing will show because   there's no interactivity going on that is the  static one or the none so this is this useful   maybe that will be your next question isn't it yes  it is if you want to create a website or website   that's let me say website because when you talk  about web application it must be a responsive   if you want to create a website for people you  know website at times they just display just a   message and that's all people go there to read  like blog and Etc you just go in there and read   now in doing so you can just make it as a static  because there's no interactivity going on there   won't be any buttons there won't be any operations  login or any other stuff for user to collect it is   just going there and now display so you can use  static and very important in using that section   or that render mode for that specific project now  we have this random mode as soon as I click on   this random mode you see we have this button  so right click on this go to inspect element   and now let me open this well when you go to the  network tab check here you can see we have this   WS it stand for web soet now let's see here we  have wasm so let's first click on web soet and   now click on this render mode so can see we in  here ready now can see nothing happened right   let's go to Wasim and I click on it again nothing  happened let's go to the home back now here web   circet nothing happened you see we don't see any  kind of data here and let's also see Wasim so go   back again and now Wasim click on this ROM mode  you see still nothing happens here if I click on   this button you see nothing happens the method is  not called if you want to check that let's put a   break point to this method okay so in case it's  going to um wide up we're going to have this hit   now let's go to the page here now let's try to  click on this again you can see nothing happened   the the the event or the B that you put there is  not what hit it means that as it said already it   is a static so as you render that is what you see  there's no communication it is not an interactive   between a client and the user when you go to is  it um let's say it up is it Source no network   then let's check something over here so you can  see we have this render here now let's go to this   response so you can see when you go to response  the page that that we had from this index that   is the same page that has been rendered over here  as a static file so see we have a method known as   show message but where is the click event there is  no unclick event here so or do we have this button   but nothing is happening here the same thing  applies to the number of times that we click   you're going to repeat the same thing because  there's no event wi up there's no connection   which going to make that system work so that  is it for the static or the non render mode I   believe this is clear okay let's go to the next  one and that will be the I don't want to talk   about it let's get a project created and let's  check out the next random mod I'm going to talk about so let's create a new project here new  project and the same Blazer web app and here   instead of the Nan you're going to use as server  so that is a next hosting model is it hosting   model now the render mode so the interactive  type here we going to choose what server now   let's click on get created now when you choose  server what happens here is this server is going   to create a connection a web soet connection  using signal R right and now um when you do   that it's going to render all component that  going to created you're going to render process   everything from the server side and I'll send  the results to the client when a request is   made so let's see so from the server side all  processes are done on the server and I return a   response to the client take note of this that is  what the render mode is about so in here we have   the same thing right what this what I'm going to  do I can't just be typing typing typing right so   what this I'm going to do I'm going to just go to  the component to um pages and here I'll just grab   the two component that I or we created together  I and you right and I paste them here so we have   this then I can just go back to the nav menu  and that's going to be for the layout and now   this layout I can just grab this KN menu and you  go back to this layout this KN menu I can just   remove it from this section yes delete it and now  here I'll just space in that okay so here inste   of this let me choose this to Blazer render mode  so here talking about the server side we have the   same method here that's making a reference to  that page we have the page displayed um added   here as you can see we have this component that  a display message component also created and our   injected okay so let's put a break point here  now in order for this to work we have to enable   this render mode on top okay so there are several  ways of enabling this render mode the first one   is enable this render mode on top of the page  so you can put it the render mode you can put   it here within that component so you can specify  the kind of the type of render mode that you want   this component to render is it in a web assembly  is it n is it or is it static or is it web or is   it server or web assembly right so let's say if  you want to put it here you can just have pass   in at at render mode so see you have it at render  mode then here you can specify it as render mode   so you can see we have them let's check it up so  at render mode so let's see we have this render mode Okay so we have render mode as so render  mode dot okay so let's see Server you see we   have it here so interactive server so this is the  first way to do this right so you can specify this   here now you want to turn this component to render  in the server form meaning that all the processes   must be happen on the server on the computer and  now only the results the needed one must be sent   to the client browser for the client to see right  so the client won't see everything she is going   to see what he or she requested very simple now  let's save this let's run this and I'll check it   up you make sure that you have a hit point or a  break point hit in that wide event that is when   the button is clicked down here so let's have  a wide event here as soon as it clicked um it   it hits it means that the the interactivity it is  moving on is activated okay once it's load we are   going to navigate to the um inspect element so  you can just hit on the F12 and now in here go   to the network resources so we have this loaded  so let's see I'm going to click on this let's   check what happened here you can see if I click  on web soet because you have nothing here if I   click on was nothing over here now the web soet  let's if I click on render mode Let's you could   see that a web soet has been created check over  here the type is web soet okay so this web soet   here create a connection between the component  and the application or the server so the client   component and the server is going to have a a  connection together so this going to tie them   together now if I click on show message let's you  can see this point is hit now I click on continue   on and let's see you can see we have hello this is  customized me displayed here now check this wasm   you can see it is not over here because here this  is server app so server app uses web soet that is   why we have web soet identified was this for web  assembly you haven't gotten there when you get   there you're going to understand this as well  okay now when you go to see we have this set   over here and when you go to this message we see  we have all these over here and that is the the   communication between the client this browser and  now the server itself so that is a way now let's   see aside from putting this render mode on top  here is there any other way to specify the render   mode yes you can do that here you can specify  it as render so at render mode then you can have um This Server okay so let's have an attribute first I  nearly forgot that so at attribute then in here   we can have this render mode you can see you have  here a render mode interactive server right so I'm   just going to make a copy of this so copy of this  then let me just comment one here so control KC I   commment that then I'm going to remove the render  mode from this and let's see so if I save this and   let's also refresh the same page and it's still  going to work so this is going to happen on the   whole page so any component that you specify or  any component that is found within this render   page here is going to be rendered as an a server  right but if you specify it here you can decide   to specify maybe component one going to have um  a render as server component two going to have   as render as web assembly so can see from here  that it is also working is hit and now it is also   working as you can see it it's also working over  here now the last place here is to if you want   to custom for the entire application maybe you  want this to get rendered the server side here   for the entire application what can you do you  can specify this in the route do um is it laser   so let's set control KC and I'll go back to this  solution now go to this app right so see we have   this Head outlet and this route so that's where  we need to specify this um render mode here so   let's see how to do that so it is the same as  typing in at surrender mode at surrender mode   then in here you're going to do the same thing  so at render and you can see we have this um   interactive server and Etc let's see the render  mode if it is correctly spelled so we have render   mode is equal to render mode dot okay so render  mode do interactive server I think so yeah so   you can see we have interactive server we have  a set over here and you can just make a copy of this and I'll put it here now this means that  if you talk about the auto if you want to talk   about the next one that's the web assembly any  of the hosting model if you want to specify it   for the whole application then you put it  here so when you put it here any company   that you're going to create or any page that  you're going to create is going to use this   server to render that if you specified on  top of the page it means all the component   or that specific page going to render as what  the specific model or the specific mode that   you have um rendered or put over there take  note of that now when you save this and run   this it's going to be the same okay so I just  want to introduce you to all types of three   and for you to know the which one that you can  use based on the use case or what you want to do so let's check this out I click on rendom  mode so I'm show message and let's see if it   is hit yes it is so click on Contin and you can  see we have this message so that is it that is a   way to specify it based on the page level the  component level and also the application Level   you've gone through that now let's see the next  one that's going to be the web assembly that is   the third render mode you've seen the N or  that's a static one you've seen the server   and Al so we are going to the web assembly so  I'm going to close this and and let's stop this okay but before we do that when you go  to program.cs file you you see there's   some services and some maps set over here check  this you can see here we are adding interactive   server component and now the med app line we  also adding interactive server render mode   so here we add the render mode as a server  and now here we add this to have access to   all the components in this folder all right  now with the web assembly going to have the   same thing but this time around it is not  going to be interactive server it's going   to be interactive web assembly take note  so let's let's get it done so new project   web app and now in here I'm going to say not  server but rather assembly so web assembly   and now here we're going to choose this web  assembly that is going to be the third one okay so while is created we are going to make  a copy of the component that we created and in   order to to skip wasting some of the times so we  go to the component here and for me we have our   nav menu and now this nav menu I'll just go to  you see we have this project we have the server   and the client now every component that going  to use for this web assembly must be inside this   client okay now this web assembly what it does  here it is this component that you're going to   create here they are rendered interactively  on the client using the Blazer web assembly   so they are downloaded into the brow browser  storage and now it is been run over there when   it does that it it increases the interactivity  there is no like U stoppage or there's no relays   or delays no everything is working because the  whole application is now inside the browser so   communication is flexible and so it is so fast  or faster than the web server okay so let's see   for this now we have this pages so we go to this  pages and in here let's have a look we have this   counter let's go to the server so Pages or the  layout here and at this nav menu let's remove   this nav menu now let's paste what we copied  from the previous one we have this nav menu   now the same thing applies to the component let's  have this component from the pages so I'm going   to copy the display message and now the render  mode as well and I'm going to paste them here to   this pages okay so that's where it must be make  sure that they in the client um project so that   these components can be downloaded into the client  browser take note don't put them here okay so now   we have this when you go to program.cs F see it  is having go to the server yes you can see it is   having add interactive web assembly as indicated  earlier you can see we have it set over here as   well that's right now let's let's get it go so  we save this and now let's run that but before we   run that you go back to this render mode and now  here we can specify it within this component or on   the page here so instead of making this render  interactive server you're going to say render   interactive web assembly I hope this is clear  yes so web assembly now let's save this let's run this all right so you can see it is now open now  right click let's go to inspect element or hit on   the F12 key now let's move this a little bit now  go to network tab and I can see we have this the   loaded file start already now if I click on let's  see the let's open the web soet for Server let's   click on this you can see nothing happens here  from the web soet right let's click on Wasim and   you can see the whole file here is been downloaded  now you see they are downloading to the browser as   you can see from this all these are file from the  server which are downloading it to the application   also when you check when you go to this console  check what happened here you can see click on this   the file is also loaded and at the size here is  8449 megab resources from the network and these   are the files that you also have here so you can  see that the server here uses the web soet and   the web assembly uses what the wasm take note  right now if I click on show message we see it   has popped up over here so this means that using  the web assembly all the resources are going to   be downloaded and stored on the browser so that  it can increase fast communication all right so   here even when the connection to the server get  cut it still has the data in the application or   in the browser it can still communicate with the  application as well so that is the web assembly   now if you check this we can also specify this  at the top page level that is inside this app   level or you can specify this you can specify it  here you see we have this app you can specify the   render mode here you can specify it alongside with  this page or the component level or the page level   any of them it works I hope this is clear thank  you now the last one here is the auto auto means   automatic and it is a combination of the server  and the web assembly now you know that the server   uses web socket um for communication and it load  faster because as soon as the Page open P what the   specific content that user requested is going to  be processed and now sent it to the browser okay   so while it assuming that the background loads  the application or download all the resources   and I stored so while the server it is sending  what the user needs in the background the web   assembly also downloads all the component and  store to the client browser but in that case the   client doesn't see but the next time the client  refreshes the application is going to now rely   on the web assembly because by then it might have  finished downloading all the resources from the   server and I'm store so it's going to now move  to the web assembly and I use the web assembly   for communication instead of using the web server  I hope this is clear so we can say that with the   auto component is rendered uh interactively  on the server first then it switches to the   Blazer web assembly on the subsequent visit after  the Blazer bundle is downloaded from the server   onto the client browser so this mode provide  faster initial load and I'm grateful fall back   so this is what I prefer the auto so I can just  switch to any one that I want at any time let's   have a look with it with an example here so  we're going to create a fold a folder a new project and now in here you going to Blazer  app I'll give it a name as the not as server   as Auto okay now with the interactive type you  choose this Auto that's a server and now the   web assembly so click on Create and now this  I'm going to do we go back to the web assembly   and now we going to copy all the file that we  made to this so web assembly I open the folder here so I'll First grab the the nav menu and  this nav men going to happen in the server   component layout nav menu remove this one and I  replace the new one that we created earlier on   for this tutorial also with the client section  the component page I'm going to copy the two   component that we created in the first section  and I'm going to paste it down here so go to the   client and from the pages we have the two files  our display counter and our render mod I'm going   to grab them like this come to the pages here  and I'll paste them as you see here now when you   go back to this rendom mode instead of this we're  going to specify it as render Auto okay so render   Auto now that is it that's all thing we need to  do when you check the program. Cs file from the   server side you can see that is now adding the the  server the server is adding only one over here but   the the auto is going to add the server and the  web assembly the server and the web assembly so   that's an auto it's going to fall back on any the  first one going to initialize it is a server after   resource being downloaded then it falls back  to the web assembly isn't not beautiful yes   now let's see so after saving this let's find  this application and see okay so now let's see   let's open um developer to F12 on the key to get  it or right click and go to inspect element you're   also going to have it now go to the network tab  now take note when you first SE the console you   can see that let's see what we have here all  right we have nothing over here as you can see   let's go back to the network tab here and we have  the star loaded as you can see from here that's a   default one when you check this Wasim web circuit  nothing happened was nothing over here right now   but let's click on this random mode and see as  soon as I click on random mode see what happened   we are in here but you see from the Wasim you  can see it is downloading it is downloading but   this downlo what you're talking about here it is  not has been displayed over here this is coming   as a result of this web socet so Network you go  to this WS web soet and see we have a web soet   clicked over here and that's what we're talking  about okay so see we have pending now as soon as   I click this it going to display so it's going  is using the current One is using the web soet   but if I reload this page again then it's going  to fall back to this RM and hereby this guy here   is going to take in charge and now do all stuff  that you need to do with it because by this time   around all the resources have now been downloaded  into the client machine you see so that is what it   is using now so it is now going to use this was so  this I'm going to do let me go to this and I clear everything so let's clear the browser quickly  so everything let's clear all from this browser   data so we can test it again and see what we  actually talking about okay so initially it's   going to load a first time now let's see so okay  so click on this okay now if I refresh this let's   see what happen we have this set display this  this is working and now with Wasim you can see   all the data has been loaded and now anytime  that I click on next one again it's going to   fall on the wasm for that communication going to  fall here for this communication although you do   not actually see that the process is coming from  this but that is what it does okay wow so that is   what I'm talking about now if you talk about if I  say that Blazer it is a future of web development   I believe you're now good with me isn't it yes  so um that is it h I'll be making a videos on   these features and also starting some projects um  some easy easy project with this blazer. net8 so   if you want to have all these project also watch  please click on this like button also subscribe   to the channel so you can have more so here I  believe we've achieved our objectives isn't it   you've seen the four mod the static you've seen  the server sign we've seen web assembly we've   seen also the auto you've seen what each uh  means and now what it does thank you so much   for watching this video take care of yourself and  you know I'm going to cat you up in the next video

Channel: Netcode-Hub

Views: 891

Keywords: Blazor in .NET 8, New Features in Blazor, Blazor Render Modes, .NET 8 Blazor Updates, None Render Mode, Server Render Mode, WebAssembly in Blazor, Auto Render Mode Explained, Blazor Web Development, .NET 8 Web Apps, Blazor UI Rendering, Blazor Component Architecture, blazor, render, modes, none, server, web-assembly, auto, .NET 8, web, development, C#, tutorial, guide, step by step, how to, learn, setup, create, build, deploy, publish, host, backend, frontend, client, app, application, webassembly

Id: tTalSBU6Xb8

Length: 36min 15sec (2175 seconds)

Published: Mon Nov 06 2023