.NET 8 Blazor🔥All Render Modes (SSR, Server, WebAssembly, Auto) Explained for Beginners

hey friends Patrick here and today let's focus on the Blazer rendom modes the new rendom modes with net 8 because I think there's still lots of confusion regarding the random modes and in this quick tutorial I want to go over them really short hopefully let's see how long it will take and uh explain how every single one of them works so regarding the configuration you see it here I'm using the Blazer web app template we also have a web Blazer web assembly template with 8 but this is not the one we need here we want to use all the rendom modes so for that you have to use the Blazer web app templ template here Target framework of course do8 no authentication htps and now here we are already interactive render mode we start with none so this means we're going to use Blazer SSR which is also called Static server side rendering and then we will introduce the server render Mode web assembly and also we will have a quick look at the auto render mode regarding the interactivity location now this means do you want to use one specific random mode for the complete application then you would choose Global or you want to be a bit more flexible and then you choose per page or component this is what I usually uh select and then include sample Pages why not let's just create this application real quick and there we are already you see we have uh the components folder with the pages here and the only page that will be interesting for this tutorial is the homepage and another file that is really interesting and important is the program CS because here you can see we've got for instance this line and this tells us that it register Services required for server side rendering of Razor components and then also this line here with map Razer components you can read the tool tip by yourself and then you know what this function is doing right okay when we run this and have a quick look remember this is static server side rendering we can also open the console here and when we now just uh reload the page then we won't see any um websockets we won't see any web assembly stuff nothing like that let me open that here wasm no files WS websockets this is just for debugging and stuff this is Visual Studio actually but this is not the websocket connection you need for interactivity but we'll get to that in a minute and here what you see is when you just select the first file you see that this has already been rendered on the server actually and just then sent to the client so this is static serers side rendering in action now let's add interactivity for instance let's say we want to add a button to our homepage here so let's say we just add simple Bon button with uh simple HTML in the end right this is the great stuff of a Blazer among lots of other stuff and we say on click with add on click we want to call a function for instance button clicked or on button click you name it and to make this work of course we have to add the uh code block here with also add code and then we just enter void button clicked for instance and then here what I want to do is I want to change a text actually so let's say this is an empty text at first and then here I want to display this thing so span add text and then we now enter the parenthesis here of course we have no error anymore but now we can say text is button almost button has been clicked like that for instance so again we have a simple HTML button with the onclick event when the user clicks this button we change the content of the text here and we display the text in a simple span should be simple right when we now restart the application we see the button here already but when I click on this thing nothing is happening I can click as often as I want nothing will change on our page we won't see anything so now we have to introduce a Renda mode for interactivity now there is one other way to realize that and that would be a form with forms you can already do a lot with blazer SSR even all the CR operations for instance I did another video about that so if you want to see that if you want to know that check out the info card and then or maybe just subscribe to my channel that would be nice and then you will see that that video as well maybe also activate the the Bell notifications that would be nice thank you so much for doing that all right so now interactivity two places have to change here or have to be changed to make this work the first one is the homepage here where we have to add the new rendom mode uh directive but first let's go to the program CS I already told you this one line is important so here we will add something new and that would be another function add interactive server components that's the one we need and as you can see here it says add services to support rendering interactive server components in in a razor components application I love these tool tips so in short with that we activate the interactive server render mode or if you already know Blazer it's in essence the old Blazer server right with websockets so this is what we need and then also here in the map brazer components line we add the interactive server render mode this says configures the application to support the Microsoft as core components web render mode interactive server render mode so many render modes now here when we just leave it at that we restart we have it available actually but page has been restarted we can click here still nothing is happening but now now comes the magic so now we enter add random mode and then Interactive server we restart the application it's rebuilding we click on that button button has been clicked magic isn't that nice and when we now have a look at the uh websockets there they are we have this thing here this is the new web soet connection and when I click here you see that some messages are exchanged and sometimes here on render completed sometimes you're lucky and you're see see what's actually happening here and you see even the cord here you see the event name love that event where is it this patch Event Event name was click and you even see the coordinates of the mouse I assume on the screen client and so on and then Blazer is doing its magic regarding the the web soet connection here and what you can also see is when we go to the console you see you see this now web circuit connected too remember go to the weather page for instance after a couple of seconds Yep this webo connection has been disconnected and this is also great when you choose the uh specific locations for your interactive render mode meaning for a page or a component then you can really decide I want to use this web so or for that component I want to use this web soet connection or for that page and when I leave that page this web web soet connection has been closed then automatically and when you choose Global for your interactive rendom mode then this won't happen your whole application will have this web socket Connection open all the time makes sense in par in some specific cases maybe but um in this case I just love that fact that you can close this automatically all right let's go back to visual studio and now I would say I mean there's of course a lot more we could do we could for instance move all that to you know what let's do that we move all that now meaning the whole button in essence to another component and with that I want to show you that you can even choose to uh change the render mode for components meaning when you let me just do that we we move that to a component so let's for instance just add another folder here I know this is really spontaneous not planned at all no script nothing like that that I just thought Let's uh create this tutorial here real quick because in particular on X or on Twitter there's lots of confusion regarding the random mode so I think this is really important H oh and by the way I'm not paid by Microsoft or anything like that no not really I get comments about that on X but no I just I just love developing stuff with net and Blazer that's it anyways uh let's call that shared then here we uh create another component which shall be a button so a new razor component and this is now my button and here I just say I copy that or cut that brother move everything here and now this is important I do not specify the rendom mode here inside this component right I save this and here I remove that as well but now what I can do is I can just say my button yeah let me just uh move that to the Imports razor file so add using like that and back to home and now let me do it like that and this is now my button no parameters no parameters nothing like that that would be too much I guess and when I do it like that we just restart the application let's have a look we go to the homepage we still see the button but nothing is happening here right because no render mode again even here in uh the component and there is no random mode specified but now what I can do I can say add random mode and then here I say interactive server right quite similar to uh the directive here on the page random mode is not known in uh virtual Studio here maybe this should be fixed well I've got the notification about a new version so maybe it's fixed then pretty sure it's fixed then so restart the application and uh has it been yeah already great so now you can see this works all right so this is everything I wanted to show you regarding um the change here regarding the interactive interactivity location so you could choose the page or you could choose the uh the actual component meaning you just add the component here and then say I want to use interactive server because the great thing now is that we can move this button here this component to another project to a client project we will do that in a minute and then uh what we are able to do is we can then choose to use the web assembly render mode the server render mode or the auto random mode and everything for the same component isn't that nice okay let's do that next all right so now here in our solution what we do is we add a new project and this shall be a Blazer web assembly Standalone application of course you can also find it here the Blazer web assembly Standalone app project template for creating a Blazer app that runs on web assembly this template can be used for web apps with Rich Dynamic user interfaces thing is that we uh have to change that a little let me rename that to Blazer render modes Blazer render modes and then client a as well no authentication actually don't need any sample Pages here let's just create that and then we'll have a look because there's lots of stuff we don't need actually and uh maybe I haven't found it yet but I haven't seen a template that will only gives me the uh the files that I need here because for instance I don't need the ab Razer file right so that's why I can uh remove it Imports is something we need that's true ww root is something we need as well properties not necessary dependencies yes layouts nope not necessary and even the pages actually it's not really necessary comes from the from the uh um sample pages of course so we have the program Cs and even the program CS is too big because we do only need actually this stuff here let me remove this of course so we only have the uh Builder all right and then we say run aing to run the application okay this is everything you need and again when you use the web app template the Blazer web template and directly say I want to use weap SD or the auto render mode then you have this out of the box so you do not have to uh think about that actually but now we did it a bit differently so uh let's fix that real quick we have the WW root well regarding this thing we also actually actually we don't need that as well when you use the web app template then you get the app settings Json file here but this is everything actually you need but one thing now is very important and this is the dependencies because what we need is that we reference the client project here on the server project check when you have a look here at the dependencies we have the framework right same thing here or similar thing here let's say we do not have the aspnet core app down here but now the server project this is our server project this thing has to know about the client project and for that we add the pro project reference here this the first thing we have to do and now they are connected so here you see in the projects we've got the Blazer renom modes client project all right and now let's have a quick look here here again at the packages also important what you see here when you do it yourself then you need the Microsoft as core component web assembly package for this web assembly uh project all right let me show you exactly what I mean here you so you see the packages this is actually not necessary the dev server but uh the first one this one is important okay so again these are some details just when you follow these steps you know do not use again the web assembly or Auto random mode directly in the configuration of uh creating or while creating a Blazer web application all right so these are the dependencies and now the next step is really simple actually what I want to do is I just want to move that to the client also remove the shared folder here I guess we have to change something now because this is not known anymore so when I now want to use this button we need another reference here so let's have a quick look it's actually this one so we go to the Imports paste This Here and Now shared question is is this known it seems it is yeah yep now it looks better so now the error is gone again we know the button here and we can still say I want to use the interactive server random mode this should still work so let's just restart the application and let's just see if it does still work actually all right so you've seen web soet connection is here and we still have the result button has been clicked this is nice but now I want to use web assem you see there's still the web soet connection right so how would we do that well first thing again is adding the interactive uh web assembly random mode actually so you know add and then enter X active web assembly components is the function actually but we now have a look not there why is that well I did not tell you everything we still need another uh package here on the server so let's just uh right click the project manage you get packages and here now we have a look for web assembly server and that's the one is the that the one web nope not the def server this one so here we see Microsoft ASP nit core components web assembly server so let's install this thing yes we accept and we go back to the program Cs and now magic there is the function we need it is now known and similarly down here we add interactive web assembly random the mode and there is still one more thing we have to add and that would be the function add additional assemblies remove this thing and you know we have to give this thing an assembly and the easiest way to do that is simply get our my button that's the one uh component and here now we just say assembly like that and that should be it and again as you can see here this configures the application to support the interactive web assembly random mode and here it says adds the given additional assemblies to the component application the provided assemblies will be scanned for pages that will be mapped as end points all right so with that then in the end we able to activate the web assembly render mode and as you can see here again this was the program CS here we still using the button but nothing has been changed so far but we move the button to the client project and this is important we have to move or create everything that we want to use with uh the web assembly render mode we have to create it or move it to this client project program CS here again minimalistic and now comes again Moment of Truth here we say interactive web assembly now save that restart the application and this is different now right no websocket connection we see that resources have been loaded and when we now have a look at Network and then uh go to WM you see this stuff has been downloaded all right so these are the web assembly files and Ence and here no web soet connection for this interactivity but we haven't clicked the button yet right let's click it now and button has been clicked okay works so this is web assembly and I see now that the tutorial isn't actually as short as I was hoping it would be anyways server and web assemly I guess you already learned a lot I hope don't forget to hit the like button if you did thank you very much for that and uh now comes Auto and auto the auto random mode well this is quite simple actually we just change that now to interactive Auto and now this just means that we start with a web socket connection but as soon as the user reloads this page or the component then we will use web assembly and this can only happen because when we use the web s Connection in the background you're downloading all the WM stuff and then our application is that that smart to know that we already have the websocket stuff the websocket files and then we can use it and that way we can use offline functionalities and we are in the end then also a bit faster compared to using web sockets but for that I think I have to uh go to application and remove everything clear side data it is I hope now we go to console and now let me just reload this thing and we should see yep now here we see that's what I wanted to show you website connection is there so now we really using a websocket connection regarding the interactivity here but you see that in the background we already downloaded the wasm files so now when I reload this thing no websocket connection anymore only wasm files are used and these now should come from the cache so here now we're really using web assembly and this is the the the big thing about Auto right so we're using Both Worlds important now is again that you place your component in the client project this is in essence the most important thing here that when whenever you want to use web Sly or the auto render mode that you move that stuff to the client project because when you want to use web assembly or the auto render mode and something is here in the server project then you cannot use these rendom modes there server is server this is cloud all right something else somewhere else but client is at home Local Host on your client and um with that for instance you can use it offline with websocket this is not possible you still you have to you need a internet connection all the time I hope I made this clear now okay if you still have any questions please feel free to uh write some comments I definitely read every comment but I canot promise to to to to add a reply to answer any question you have but the community is Big right maybe there are other smart people that can answer these questions anyways I hope I could help you with that I hope you learned something today if so it would be amazing if you hit the like button and maybe even subscribe to my channel it would really help grow this channel would mean the world to me so thank you very much for subscribing and if you want to support me even further there's a patron page linked in the video description so maybe you want to check that one out thank you so much to every single Patron here I love you guys and girls thank you very much thank you very much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 8,578

Keywords:

Id: C_bYPn-OTtw

Length: 23min 41sec (1421 seconds)

Published: Tue Jan 16 2024