Blazor in .Net 8 - All Render Modes Explained - (Static SSR, Interactive Server, WASM & Auto)

hello everyone so net 8 is about to release and in net 8 there are lot of new features and improvements and in this video we will talk about Blazer in net 8 so till now we had two different render mode two different uh hosting models for Blazer we had Blazer web assembly and Blazer server so Blazer server it requires uh signal AR connection to perform all the interactive actions so whenever we first opens up our Blazer server application all the logic executes on the server and then it Returns the response and then it established a signal R connection and after that whatever operation we perform on the UI so that action goes to the server over the signal R performs it executes it and take takes what needs to be uh let's say patched on the UI and then it comes back to the UI using the same signal connection and then it patches that update on the UI then we had different model that was Blazer web assembly so it was uh client side only so all the operations and everything all the interactivity that uh works on the UI client side only in browser only so so we can write C code and that will be converted to web assembly and that can execute in the browser itself so now in Blazer uh in net 8 we have some different approaches to Blazer we have different new modes so main is static server side rendering we call it SSR so Blazer server side rendering then using this we can have different modes so we will will talk about all these render modes in net 8 for Blazer okay so net 8 is not yet released so I'm using net8 rc2 with the visual studio 2022 preview latest version I guess 17.8 okay so I am here I have just I'm just creating a new project so in here if we check we have this Blazer web app so this is the new recommended way to use Blazer then we have different uh templates Blazer web assembly Standalone app this is the Blazer web assembly app we had earlier so this is stand alone that means this is entirely going to work in the client side if we want to do some server side Lo logic we need to uh in create a separate API layer and then we can connect this web assembly app to our web API then we have Blazer web assembly app empty so this is kind of same but this does not comes with those sample pages and all those then we have Blazer server app so this is that Blazer server app which is going to establish that signal or connection and which will have the server side Logic on server and that will flow to the client using signal AR then bler hybrid this is for Maui only so we'll talk about Blazer web app which is new in net8 now if you go next we have let me select this so let's say Blazer net 8 next and now this is the main screen where we have different things so first framework. neted preview then we have authentication type uh it comes with individual accounts authentication but we are not going to see this in this video after that this thing interactivity type so this is a new addition and we have four different options here so first is none it is that we do not want any interactivity in a Blazer app so now this Blazer app is going to be completely statically server side rendered we can say this is uh kind of same as MVC pages and razor pages work because all the logic everything happens on server it simply generates response on the server and Returns the complete entire HTML to the client and then we dump that uh HTML to the browser page so that is how it is going to work then we have server so using this this is same as Blazer server so we are going to have SSR with blazer server so whatever page requires interactivity on that page we can use this server interactivity so it will open up signal R connection for that particular page only then comes web assembly so this is uh kind of same as Blazer web assembly hosted inside asp.net core app what I mean is using this we will have a client web assembly project Blazer web assembly project but that will run inside a Blazers SSR app so we can have server side logic in our main container rapper application and then this web assembly application that will going to have all the client side logic so I'm going to show the project structure and we are going to uh play around with this later in the video and right now I'm just trying to explain things so for newcomers who are joining theet blazer for the first time so this might be confusing and it is confusing actually so initially before this we had simply Blazer server Blazer web assembly everything was clear and that was not clear for so many people but now with this net8 this is a bit more complex I understand it because I am following Blazer since long and I'm constantly working on it so it is okay for me I have worked on razor pages I have worked on MVC web API Blazers everything I have worked on so it is okay for me but if someone new is coming to this ecosystem then that is going to be way more complicated but okay I'm trying to explain it so that it will be clear okay after that we have Auto which is server and web assembly so how this is going to work we are going to have both Blazer server and Blazer web assembly in this asp.net cor Blazer SSR app so how this is going to work we will Define this on so we have this one more option interactivity location Global and per page or per component right so how this works if we have defined it per page or per component then we can have SSR for all the pages but the page which needs which requires interactivity we can Define this Auto or server or web assembly so for that particular page it will use these modes so if we have selected server it will establish a signal or connection for that particular page or component if we have web assembly then it is going to uh render that page or component using web assemblies all the interactivity all the logic inside that that is going to run on the client using web assembly and if we have Auto then it will if we already have web assembly downloaded then it will use that web assembly client side rendering only if we have not downloaded web assembly yet so we are not going to explicitly downloaded when we'll first visit this pager component it will check if we already have web assembly on the client it will use that if that is not there it is simply going to use server and which is it will generate establish a new signal connection it will use that to provide interactivity for that page or component and when we move out or navigate a from that particular component or page then the signal or connection is going to be disconnected and when we come back to the same page or component at that time we already have web assembly which was downloaded in background now it will use that so we'll see all these in detail but for now I'm just trying to explain and then Global means it will establish this connection or download this web assembly on the global level so it is not per component on per page level so yeah here this is all about a brief introduction now let's see how all these things are working so first I'm using none that means no interactivity at all so for this let me change the name of the project okay solution name Let It Be Blazer net 8 and for this page I'm going to say Blazer net 8. SSR server side rendering next and interactivity typee none if interactivity uh interactivity type is none then interactivity location does not matter okay include sample pages okay now we are going to create it so let's see what we got all right so let's see what we have here we have this project structure and this is a bit different from what we have been seeing uh from earlier versions of net for Blaze here so now we do not have that Pages folder we just have this components folder and in this components we are going to have layout pages and all those okay initially these layouts and all these were part of shared then all the pages routable Pages were part of this Pages folder now this has changed a bit then if you go to program.cs here we will see that there is no so this is also a bit different we have ADD razor components map razor components and in this map razor components we have this root component which is app component so this is the main entry point of uh this application for a Blazer so this app component if we check we have this inside this components this app. Razer so this is the main HTML main entry page here we can see we have head section body complete HTML so everything we have here now in this if you look closely we have two Dynamic components one is Head outlet then one is Route so head Outlet is a part of head so using this Head outlet uh it will going to inject the logic and whatever is related to head section for example we have page title so that is part of this Head outlet only then inside body we only have these two things first is routes which is a Blazer component and then one script which is blazer. web.js so this is Blazers JavaScript which will help us to up and running Blazer and uh do the diffing and all patching HTML all those things and now if you go to this routes which is here routes. raser this is this thing where we have defined out our router so this is a router for this particular assembly only found not found if you have been following Blazer we can set up our authentication State and authenticated and non authenticated views here all that is here okay now default layout is main layout so if you go to layout we have this main layout so this is a shared part for our application so this main layout we have this small markup we have page we have sidebar where we have nav menu this is again a Blazer component then this main section where we have this hardcoded link and then this body this part is dynamic now if you go to Pages we have homepage uh let me Zoom it a bit H this is homepage so this main layout this is by convention that main layout is a layout for all the pages which do not exp explicitly Define a layout so this thing layout main layout and Main layout main layout so this is default this is by default so main layout is by convention is the default layout for all the pages cool then we have this weather page where we have something that is stream rendering true I am going to show you what is it then we have this era. Razer P so if there is any error then it will going to be displayed cool so now let's try to run this app we have it here we have everything home weather hello world welcome to new app if I go to its source here you will see I have this about WEA welcome to new app hello world so that means everything is statically generated on server so we can see everything is in the view Source now if you go to weather first we saw that loading dot dot dot then we see this data now we go to the view s of this page there is one change I don't know how it is going to affect the SEO but if we use stream rendering how it works so HTML ending tag is here so before this we had this loading and after that for uh streaming rendering what it does it creates a Blazer SSR tag with all the data which came after the initial page render it adds that data inside this Blazer SSR tag which is which it it appends after HTML I don't know how it is going to affect SEO or it will be fine for this but this is how it does now on weather so all this is from server side rendering statically rendered on server what I mean is if you go to home and if here let me add a code block and we if we overwrite on initialized method and then let's override one more method that is on after render AC what is it okay Pro protected override void on initialized async and protected protected override void on after render acing so this initialized method this is going to run on the server side only then comes on after rendering it executes after rendering but when this page is generating on the server side there is no rendering it is not being rendered and when this page got to the client then it simply rendered directly and that is not a part of we could say now it is not a part of blazer because this is statically rendered on the server so now this method is not going to call on the client so if we check it let's have one let's say One S Str some common string so here we'll say private string s Str and let's have a default value we'll say default then on initialized we'll say Str Str equals initialized or let's say on initialized and then let's do the same thing in this on after rendering here we'll say on after render save everything now if I run it so it is here and we see on initialized so initially the value was default then it came to uninitialized it became uninitialized but after that this on after render this never executed because this is not client side rendering this is totally statically server side rendered and there this rendering does not uh exist so this is not going to be called same thing we can check if you know Blazer using Blazer we can use JavaScript we can uh use JavaScript entro to connect with JavaScript so what if I inject ijs runtime here let's call it JS and let's do this for this JS if I try to use this JS do invoke async so let's say invoke vo async and here let's call the mean alert method with some random alert on after render like this okay it is an async method so it needs to be void void so AIT then we need to change it to a sync and task and this will be on after render asnc cool now if I rerun it we are here because render method does not get executed uh what I wanted you to show you let me copy this and add it here in on initialized method okay so let me change it to this on initialized async now if you run it we are going to see something and that something is this so it says invalid operation exception JavaScript interrup calls cannot be issued during server side static rendering okay so this is the thing it is doing it is rendering this on server and on server Javas does not exist Okay cool so I think this is all about uh statically server side randing we cannot use JavaScript we cannot have Dynamic interactions what I mean is dynamic interactions let's do one more thing here I'm going to have uh let's take example of the counter so here let me have a label where I'm going to say counter and let's have a variable here we'll say private end counter equals z and here I'm simply displaying this counter and then I'm going to have a button button type button plus let's say BTN BTN primary we have bootstrap already added to this template so we'll say increment counter and on here let's use on click method so we'll say increment counter and we'll Define this method here we'll say private void increment counter and using this we will simply say counter Plus+ now if I run it so this comes under uh interactivity feature right we made this page interactive we are adding a button and we are performing some action on this button and which is modifying the state which is this counter state but if you see if you see I'm clicking on it and nothing is happening that's because we do not have interactivity on this page on this in this application because it is Blazer static server site ring so we do not have anything that is client side so when we use this we have on click that means user is going to click and where user can click it can click on client so that means this logic is going to work on client side but we do not have any client interactivity enabled for this app because this is typ ly server side render so we are not going to have anything for this okay so I hope this is clear if this is still not clear maybe you can uh drop comments in the comment box I can try to answer your questions and maybe I can try to create a new separate dedicated video for this if you want cool so that's all about this uh server side rendering now let's create a new project and this time we'll use a different thing so let's use bleret 8 dot and this this time we will use uh server render mode server interactivity mode okay so we'll say blazered do server or let's say in server interactivity let's do this server or interactive server oh my God interactive server like this next and here interactivity type we are going to select server okay interactivity location Global perpose component does not matter let me show you on perpose component let it add the sample Pages let's create it so now we have this project let's see what difference we have in this project first let me close all the tabs cool so inside this also if you see we have the exact same structure we have trip W root we have components folder app settings program.cs in components we are going to have same layout and Pages we have app. razor routes razor everything is same okay the only difference is this sample page it added this counter. Razer we'll see it in a bit then if we go to program.cs we are going to see a difference uh this is SSR static server side rendering here we had add razor components map razor components with this root component now if you go to this in server interactive you will see after add razor components we have this one more chain which is ADD interactive server components same thing after map Razer components we have ADD interactive server render mode so we have enabled server uh interactive server render mode on this app and now where we are going to use it if you go to pages and counter on this we have this attribute which says this page this counter page is render mode interactive server so this page is interactive using server render mode and here we have the exact same thing we have this current count which I manually implemented in that so we have this current count current count which is a private in variable here we have a button click me and from here we are calling this increment count and this method simply incrementing this count okay now let's try to run this interactive server so I'm going to run it so app is here let me open the dev tools if you go to network let me clean everything console clean everything we have this hello world welcome to new app same thing weather loading and this same thing everything is fine now if you go to counter I tapped on it and you see web socket connected to this now if you go to network we have this web socket established which status is pending and if you go to WS which is web socket let me Zoom it so that you can see it clearly we have this Blazer websocket and here we are exchanging messages now if I click on this click me see when I tapped on it there are these things happening over signaler connection this web socket connection so what it is doing whenever I'm clicking on it it is sending this action to the server that user tapped on this click me clicked on this click me button so when we use this uh Blazer server at this time it has the complete we could say this UI State on the server as well so it knows that we clicked on click me so it will check what should happen when user click on clickme it should increment the counter then it is going to patch here then it will return this response to the client and on client we have that blazer. web.js if you remember if we go to our app. Razer we have this blazer. web.js so it checks that and it then patches that thing here so this is how it works now one more thing right now it is working if I move away from weather away from this counter you see connection disconnected that means now that uh signal or connection is not there so that means now we do not have interactivity right so this is completed everything completed now this now in this weather page we don't need that interactivity we have not enabled that interactivity so we don't need to have that signal R Connection open so that is free server resources has free now if you go to home weather everything works fine now if again we go to counter then it is going to establish a new signal or connection and that will work same as before now we can have this interactivity okay now let's do the same thing this is the thing which makes this component or page interactive now let's do this in our SSR on homepage I have added this thing right let's try this on this page again so if I go to homepage on the interactive server I'm on homepage let me add the same thing uh let me add this exactly same thing everything like this and let's have some BR Tex so these are on different lines okay now let me copy this code block as well I should have copied Everything at Once okay save everything save everything let's have this JavaScript and let me inject this IGS time as well cool now let me run it oh my God my mouse what is happening run it so we have same issue which is this JavaScript interrupt call cannot be issued at this uh static server side ring because this page on this page we have not defined that this page should be interactive using this render mode interactive server that means it is not using interactivity so this is same as static service now let's add that attribute here we'll copy this come here and add this interactive mode at the very top like this now if you run it now if you run it we will see a different error message this is although invalid operation exception but that is fine so this is related to uh this static server uh not static server side interactive server mode and this is the same in uh Blazer server as well so here we will see JavaScript interrupt calls cannot be issued at this time this is because component is being statically rendered when pre-rendering is enabled JavaScript interrupt calls can only be performed during on on after render Asing life cycle method so when we use this at this time this on initialized this method is being executed on the server only there JavaScript does not exist then comes this on after render async which is on client so if we run it now we will see this on after render async is going to be uh executed if you come here we can see we have this on after rendering which is that allowed message right increment counter on after adding again get called and we have this one that means this page is now interactive now if we see the details Network or [Music] console we have one web socket here which is generated for this thing because this page is interactive now now if you go to weather this web CIT is going to be disconnected if you go to counter there will be one more web soet connected because this page is also interactive if you go to home on after ending it is going to use the same web soet because we already have uh web soet connected these two pages are using interactivity server interactivity so this is going to reuse this web socket connection okay so this is all about interactive server render mode now let's see the next one which is going to be add new project this time let me copy this and here we'll say interactive web assembly so let's call it interactive version next and interactivity type we will use web ass simply create and now see what it does it creates two projects one is interactive was then second one is interactive wm. slang so when we say web assembly it is totally client side now if we had both of these things in the same project then it might have created confusions that what will go to the client and what will be on the server Now using this setup whatever we have in this do client project that is going to the client and whatever we have in this was main project this is on server okay so what I mean is if we have some setting anything that is related to let's say we have some Secrets or some sensitive information we should not have it inside this client because this is going on the client side we can have that in this main project project was so this is same as we had uh web assembly inside asp.net core hosted app earlier previously the same way it is going to beave now in here inside this client we have this counter page where we have this render mode interactive interactive web assembly so this is the page which has interactivity with this button click it is going to increment this count and all this is going to be done uh totally on the client side using web assembly okay now if we check program.cs for this one we will see we have ADD razor components and this time this call changed this is ADD interactive web assembly components same we go here app. map Riser component add uh interactive web assembly render mode then we have this additional thing which is add additional assemblies so if you are following uh Blazer you might know that for routing if our application has some different project in this case the main application is was we have this do client project which is for uh the client side only so if we have routable components in there so we have this flash counter that means this counter page this is routable we can uh navigate to this page using a router so if it has something like this we had to use this add additional assemblies and earlier we used to do this on a router this additional assembl is this now we can have this from here only oh I did not check we have this here as well we'll see if we remove this from here would it work or no that I need to check I have not checked it okay now if we see in the pages we have homepage and weather page that is a part of this interactive wasm only and this counter page is a part of this do client so this is going to be uh on client side only using web assembly it is going to perform this logic but all other things are going to be here uh on server side so let's try to run it first was this is the main project if we run okay we are going to get an errors [Music] and this fix counter am I running the yeah I'm running the correct project when they fixed it I don't think so home error was okay it is fixed oh maybe that is in uh Auto render mode okay let's see there was one issue I'll show you cool now if we check inspect and here in console we do not have anything in network let me remove this overview okay right now we are on homepage this this page is not interactive so we do not have any Server Connection any web assembly now if we go to weather same thing we do not have anything now if we move to counter you see something is happening and if you go to console now we can see it downloaded this web assembly now you try to click Pages interactive but there is no web socket connection nothing is happening nothing is going to server all this is happening on client side only we can do this we'll go home we'll come to the counter we can do this now it is all client side now let's try to do the same thing we have done for previous two pages for this homepage so let's go to homepage first thing let's inject JS runtime then let's copy all this code and add it here okay now if you run [Music] it inspect console we do not have web assembly right now if we click on increment nothing is happening because we have not enabled interactivity to this page let's do this we'll go to uh let's our counter page copy this thing attribute render mode interactive web assembly and let's add it on this page now run it is coming and we have some s let's see what is the error console and this is saying one or more error occurred root component type which is components page is home could not be found in the assembly blazered do interactive was and why so because that page if we have added where is it if we have added web assembly interactivity mode to this page this page should be a part of client project so let me do this let me create a copy of this homepage and we'll name it something else so let's do this Pages create a new razor component and let's call it test page Okay add and let me go to home copy everything go to test page and add everything here we'll say test and then we'll go to our layout nav menu and we are going to add one more link here which will say test test test save everything and now on this from this homepage we will remove this interactivity let's run it we are on this homepage interactivity is not going to work we know this is not going to work now let's move to test page and we again have a error and which will say the same thing this does not found in this assembly the reason behind it we still have this test page inside our main project which is was project so this as I mentioned earlier all the code which will be inside this this should be server site only so this test page when we say render mode interactivity web assembly that means it should be client side so in order to uh run this we should move this test page to our client project because there it belongs to the client project only because we have we assembly interactivity to this page so we need to move it so let's create a new project we'll move the complete code to uh ignore the all name space problems so let's say test page test space. raser then we'll copy everything we have this in here we'll add this here and then we will simply remove this test page from our server project so delete okay and now let's run it this time everything should work because this time we have this web assembly interactive mode on this test page and that's the test page is a part of the client project cool so if I go to test this time no error JavaScript run on after under sync is okay now if you click on interact increment counter you see we this interactivity is working and if we go to console we can see the web assembly has been loaded so everything is fine now counter would work home will work so everything will work but the this interactivity we do not have this on homepage that's why this interactivity is not going to work apart from this everything will work okay so I hope it is all clear to you and this model is also clear to you that's the main reason we have these two two projects right now if we have interactive web assembly so we can know that okay this is different and this is different now there is one more Point using interactive server and SSR we can have all the server database related logic file system accessing everything we can directly have in these two projects because every code everything is being executed on the server side only so we are good but when we come here in this web assembly uh interactive web assembly so we have these two projects so if we have some code some logic in this first project which is interactive one this is going to work on server side so we can have that logic here so uh maybe let's do this I can quickly show you okay let me show you so for this what I will do although I should not do this okay uh should I add Entity framework and database connection should I show it or I can show something else let's try if we can directly access file system in here so if I go on homepage can I inject I web poost environment web host EnV and in here let's say maybe on in on initialized web host EnV do content root path or web root path let's say content root path content root path here we'll say what files equals here I'm going to say directory. get files and here I will say path do combine content root path and then content root path is this uh the root of this project I don't know if we can access this or no but let's try to do this we have our files I'm going to add a break point here on this homepage let's try to run it if we can get this okay it is [Music] coming we are in here if we check content root path it should show the complete URL what is the issue okay let's check the files we have five files if we check we have app setting. development app setting. Json CS Pro CS proos user and program.cs these are the root files right if you see here one two and it has two files one file and then CS Pro so this file this call work in here we can try to display it on the UI we can display the name of these files right now let's try to do the same thing from this client so we'll go to Pages let's go to test page and in here we'll do same thing okay and on this side on initialized Asing we can have this JavaScript call in on initialize as well we'll see the this as well let me add a break point here web host environment we need to inject this inject web host environment save everything let's okay it does not exist here so we need to Microsoft as net core hosting is it here my Microsoft aspet core. hosting does not exist here so we need to inject that oh my God what else I can try uh Al it does not make sense but let's no it makes sense because this should not be a part of this client project but still let's try to uh install this if we go to homepage web host environment let's see from which package it comes so it comes Microsoft ASP netcore hosting abstractions version 8.0 so let's try this thing Microsoft ASP netore hosting abstraction save everything and go to this client project manage new get packages and let's try to install this package include pre-release abstractions aspet core hosting abstractions it is replicated why I don't know but let's right now let's try it apply I accept okay did it get installed hosting abstractions yes now if you go here if we check I have host [Music] environment Microsoft do aset core do hosting Dot I webhost and there is no ieb host environment okay I don't know what else I can show you but the thing is it is not going to work from here because this client project this is not trusted this is not executing on the server side so we cannot get the list of files we cannot directly connect with database we cannot connect with file system we cannot do any operation which directly interacts with server so now the question is what if we want to get some data from uh server from database of this file system so in that case what we should do so in that case what we should do we can have that in this interactive world we can use this project as an API layer we can create our API here and then from this Pages we can simply fetch data from this using this API okay and this will be same as connecting to some external third party API the only uh difference is going to be both of these projects in that case if I have API inside this project this API and this web assembly all these will run on the same domain same port because these are going to be the part of same project same application everything will be same so we will not need course cross origin resource sharing explicitly uh enabled so that will be this will be no need of that because both of these projects will run on the same domain same port so we can directly access them overp of course I hope it makes sense if it is still confusing do let me know in the comments again I can try to answer your questions queries or maybe I can try a dedicated video for uh this as well that how can we do that how can we get data okay now for now let me remove this cool save everything now let's move to the next project type new project Blazer web app next then again let me copy this and here we'll say interactive Auto which will be this Auto that means server and web assembly both okay create close everything close Al but this or close now if we check for auto as well we have the same structure so one is interactive Auto directly then another one is interactive auto. client this client is totally related to web assembly because now we have web assembly enabled now if we see program.cs we have ADD razor components and then we have ADD interactive server component it enables server interactivity then we have interactive web assembly that means it gives us web assembly interactivity okay and now if we move later then also we can see map risor components root component then we have ADD interactive server mode add interactive web assembly render mode so we have both of these modes here as well then these additional assemblies to find the routable components in other assemblies as well in our case this client assembly okay and in this client it is simply building web assembly host Builder so this is related to web assembly only now if you see the components we have Pages we have error page homepage weather page stream rendering true app everything is same the only thing is this counter. Riser which has render mode interactive Auto so now how this is going to work Auto means first it will check if we already have web assembly so if we move to this page for the first time we will not have web assembly so what it is going to do it will establish a signal connection to make this page this component interactive and it will download web assembly in the background right now page this page is using signal R server but it is downloading the web assembly Now we move out from the page it is going to disconnect the signal connection and if we come back to this page now we already have web assembly this time it is going to use web assembly directly so now if first let's try to run this project so that I can show you what I mean this is a combination of both but then it has the what we can say we can say the issue issue that issue is it is going to be a bit confusing that how would we know that it is right now running on client using web assembly or running on server using uh signal web soet connection this is problem but let's see right now we do not have any signal connection and we do not have any uh web assembly loaded because this page is not interactive now if you go to weather the same thing would happen no web assembly no signal signal now if you go to counter okay it is loading it is loaded if you check downloaded this first it connected to web soet connection we have this web socket which is using uh we could say This Server interactive server right now then it loaded this web assembly as well and after that it disconnected the uh what we say this signal connection now it is going to use let's go to network and move this go to web soet and payload messages clear everything now if we click on click me it is working but this time this is working totally on the uh web assembly because there are no request going on nothing is going on let me try this let me run this in some other browser stop it web browser let's use this Brave browser run inspect console nothing Network let's remove this overview I don't like this if you go to web socket this is different this is for hot reloading so we can close this and clear okay okay hope you can see it now if I move to counter page okay web socket connected downloaded the web assembly then disconnected the server so this is a enhancement but I remember this functionality was not there maybe something has changed right now if we have this web assembly then it totally disconnect from it and if you go to here we can see this time that means this call was completed this web connection was completed now we can play around with this all this is totally client side using webm now if you go back to homepage let's close everything come to counter page and we already have web assembly so it is going to work like this cool so this is render mode Auto now let's try to see one thing on this homepage let's use uh from this interactive server we had that logic on this homepage right this St Str and all this let me copy this and let me add this on this homepage we'll inject this inject this like this now we know this is not going to work because this homepage is not interactive right now but we'll use this render mode interactive Auto for this save everything okay now let's try to run it and let's use Edge only we change this homepage to be interactive inspect we have some issue and what is the issue p is home because when we say Auto auto means this will use first use server then it will go back to web assembly and when we use web assembly this cannot be part of this main project it should be part of the client project now what if I change it to interactive server when we have interactive Auto we can use Auto server web assembly on a requirement basis on what page what method we need we can use those so you see on after render okay that means the JavaScript call came because right now we are using signal R connection for this page we can say increment counter this thing is working although we have said uh interactivity Auto interactive Auto that means this project if you go to program.cs we are using both of these modes so we can use both of these modes on the requirement basis we can modify this we have Auto we had this counter page it is right now render mode interactive Auto we could change it to web assembly only so if you do this this page is not going to create the signal or connection it will always use the uh this web assembly on client side only cool so these are all the modes we have in pleaser in net8 so do let me know in the comment if these things are clear to you or this is a bit confusing now so for newcomers it is definitely going to be confusing in my opinion it is kind of confusing but all these things make sense and what I think what I am going to mostly use I going to mostly use this interactive vasm in most of the cases there could be some cases where I would need this Auto but in most of the cases I'll do do this so if I have some static Pages something I'll have those as a part of this main project so those will be server side rented and if apart from this whatever interactivity I'm going to have I will have this as a part of this client cool so do let me know in the comment if this video was any helpful to you or no and if you have some questions some queries you can drop me comments I will try to help you and and do let me know in the comment if you want uh maybe we can try some small project to do using all these modes maybe some uh to-do app or some some small project so that the video uh do not go that longer because we already have 1 2 3 four different modes so that means if we uh talking about a small project we are going to build four different projects for these four different render modes okay fine so that's all for this video do let me know in the comment if you like this video If you uh were already aware of all these things if you learn something new or you have some uh queries or some confusions I will try my best to help you out and please share this video subscribe my channel I'll be back soon with some other cool videos till then bye-bye

Channel: Abhay Prince

Views: 2,099

Keywords:

Id: -qG_DudU3I8

Length: 65min 20sec (3920 seconds)

Published: Fri Oct 20 2023