Everything You Need To Know About Blazor in .NET 8

hey there and welcome to the code wrinkles Channel as you might know a few days ago net 8 was released and I have a confession to make after all these years we've been together Blazer is not the same anymore indeed it has drastically changed for better and for worse and in this video I will walk you through everything you need to know about the new blazer in net 8 but before we get to this let's have a very short reminder on how exactly Blazer used to work so up until now Blazer was all about different hosting models so when you wanted to start a new blazer application you had a very big decision to make do you want to go for the Blazer server or for Blazer web assembly now these two different hosting models were kind of like different the Blazer server was actually generated or all the HTML was generated on the server and there was a websockets connection always open that listened to events that happened in the browser and through that web so connection the new differential HTML was generated and sent back to the browser where it was actually rendered the other hosting model was Blazer web assembly and in this model we would ship basically everything to the browser all the DLS and everything that we need so that everything can run in the browser through Blazer web assembly this entire status quod has been literally Blown Away by Blazer in. net8 you can literally take all this idea all all this discussion about hosting models and throw it to the bin however I'm not saying yet this is something bad but it is something that we really need to investigate nowadays Blazer is is all about static server rendering you might even call it server side rendering but you'll see just in a second that this naming might be a little bit misleading now the core concept of a Blazer web application right now is that everything is rendered server side by default this brings obviously a lot of different advantages like very small download sizes very high speed in everything that happens there but it also has downsides because by default if you have static server rendering you won't have any interactivity But Here Comes the very nice part so even though we have this default which is server rendered if we want to add interactivity to certain pages or even for just certain very small components we can totally do that by adding on top of this server side rendering also interactivity for each component and when it comes to interactivity we have plenty of choices on how we can do that we could use for instance what it is called an interactive server mode now the interactive server mode actually works works exactly the same like the Blazer hosting model previously the only difference is that by default when the application is rendered you just have the server side rendering so no web assembly connection is established but in the moment that the component needs to be rendered that is marked with interactive server mode then the web socket connection will be established a circuit will be established and everything works just like in Blazer server but the choices obviously don't stop here so if you want to go for an interactive mode that is similar to what we had in web assem then you can definitely use interactive web assembly mode which essentially works exactly the same as the web assembly hosting model that we had in previous brazer version the only difference also in this case is that only by the time that a component appears on the browser that is marked with interactive web assembly mode only at that point we download the net rtime and everything that's needed to run that component interactively in the browser besides those two we have also a third option which is the interactive auto mode and the auto mode is kind of like very interesting because it combines together the interactive server with interactive web assembly so in this mode what we could do or what the default Behavior would be is that first of all when the component needs to be downloaded it will be downloaded through the interactive server mode because it's much quicker and in parallel in the background all the different net run times and the DLS and everything that's need for that component is also down downloaded and when that download complete that component basically switches to interactive web assembly mode but enough talking let's see how this actually works in practice here's the first Blazer sample that I would like to share with you and the first thing that catches the eye is the fact that we don't have any razor Pages anymore so we got rid of all that stuff so the entire structure looks more sleek and it's easier to understand we have here for instance in these components and you can see that in these components we have even the layout here we have for instance the the app Razer which is the entry point in the application and in the body here we see that we have the routes which is the router of this new blazer web application and this is all very very straightforward in the pages we have the regular counter the error the home the weather this application is already configured to work with the interactive server mode as a way to add interactivity to the default server side rendering and we can notice this because the way that we set the application up is just a little bit different so once again here in the services we need to add the razor components and then we need to add the mode that we want to use for interactivity and we will see a later bit later that we can even combine them however in this case we have this add interactive server components which adds the interactive server mode or the option to use interactive server mode on our pages and on our components the other thing that has changed here because now Blazer virtually Works back by the net minimal API that returns always razor components and that's why here we have this map razor components and here we specify which is the entry point of the application and also here we need to specify in this middleware that we want to have interactive server mode enabled if we want some components to be displayed like that now I would like to Showcase you this counter component and as you can see here in this counter component right now we haven't defined anything that defines the rendering mode now this is a component however that theoretically should need some interactivity and right now everything will work or would work only based on this Blazer SSR or static server rendering so let's run the application cool so now we have the web app running now if we click here on this counter we see that the behavior itself like switching from home to the counter was actually very smoo typical for a single page application now here there is one thing if I click on the button obviously since everything is just server render this button will just not work however there are two points that I want to be aware of right now so first of all the navigation that we had here from home to counter as you can see there is no page refresh at all and I would like to show you something here so here's our Network tab in our developer tools and we see that basically when we refresh the homepage one thing that is downloaded is actually this Blazer web.js Javascript file and as you can see here it's only done through a fetch now even if we click on the counter and if we can go back here we can see that this counter it is a fetch operation now this is called enhanced routing and this is a very cool feature in baser because even if the application is fully server rendered as you see when you navigate you have the very smooth behavior of a single page application and the way this actually works is that this Javascript file actually intercepts these requests and makes its own HTTP request like fetch request to get only the component that it needs and then it displays it into the browser so this is how even if we have only server side rendering at least navigation itself is very smooth however the downside as we have just seen is that if we click on this button nothing happens because we need interactivity so let's add interactivity adding interactivity is actually very simple the only thing that we need to do is to specify the render mode and here we see that we want to have the render mode interactive server so here we have our application open and if we go here on the console we see that we don't have any type of web socket connection but the moment that we click on the counter as you can see a lot of things were downloaded including also this specific file that was used usually for for Blazer server let me maybe move this a little bit more to the side and if we can go to the console you can see here that we have also an established web soet connection but until we needed to render this component that has or that is marked with this interactive server mode this was not there so everything was just Ser rendered and obviously now if we just start to click here on this button everything just works fine and is okay now since the application is running I want to show you another very important stuff and this thingss if I go here on the weather and as you can see here the only thing that we done was actually only one single HTTP request and we had this brief moment where we had this information that it is loading and then we got the data which is a very nice behavior that we would expect in Blazer however I have to tell you that this behavior is not achieved through a mechanism that you probably are aware of so let's move to this weather component as you can see here the markup is very similar to what we had previously but the only thing here is that this component is not marked with interactive server mode or it is not marked with any type of interactivity however it is Mark with each attribute which is stream rendering and from my point of view stream rendering is one of the coolest new features that we have in the new blazer in net 8 now the concept of this stream rendering is that you are still doing everything fully server size rendered however you can still display conditionally this type of stuff and the reason why you do this is that the first request that is made here to our application it's a regular HTTP request response but it will only get this B however the connection will stay open until we get the data and we have here this task delay to simulate that we wait a little bit for that specific data and the cool thing here about is that through the exact same connection you have seen earlier that only one single connection was there open when the data is available that data will be streamed to the client to the browser and then this part will be displayed that will only contain data and this is one very cool way in which we can add a certain type of interactivity when data fetching without actually doing any interactive server mode or web assembly mode we are just using stream rendering which is very very powerful because it means that for components that fetch data we don't need to add interactivity they can just be server side rendered and they will work mostly the way that they worked before on in or in earlier versions of net and now come the less fun parts let's say for instance that I want to make this component to be interactive web assembly and the problem is that well I really can't do this in this project so let's switch to another project and understand why so this project project is configured to work with web assembly interactivity however you will already ask hey then but why do you have two projects here in this solution and I would say hey that's a really good question and the answer is because you can't do it differently and from my point of this is a really big paino now let's understand exactly why this is the case for instance in order to have web assembly interactivity you also need a host like we have here that is configured for using for working with web assembly and then the components that you want to have web web assembly interactivity on they need to be part of this web host because when we want to add this interactivity this host will be actually also downloaded to the browser so that it can add the web assembly interactivity so this means that if you want to have a project for instance where you want to configure both or you want to use both the interactive server mode and interactive web assembly you would need to have at least two projects because one of them should hold hold the web assembly host and the components that should be rendered with web assembly interactivity now the main application is exactly the same like we had previously the only difference is here that we have activated or we have configured or I have configured this application to work with interactive server mode but also you work with interactive web assembly components and also here in the map Riser components we also have configured it to also work with the web assembly render mode but also with the server mode and obvious here we also need to add additional assemblies which is the assembly that contains our web assembly interactivity components that's a little bit cumbersome I know now the reason why I have configured this application both with interactivity for the server and for web assembly is because in this project I want to showcase you also how the auto mode works but for now let's just run the application once again we have in Split mode with the dev tools because I want to take us a good look at here here we have a lot of different files for CSS and svgs but there is no web assembly there is no net runtime and anything else that would show us that that this is or this contains some web assembly stuff now let me just here clear everything and let's go on counter and once we went on the counter if we go back to network we can see that this time we have a lot of different stuff like we have a lot of different files here but we also have these net run times that we have here and if we C on this counter we can see that everything works fine so now if we come back to our counter component which is once again in the project that has a web assembly host we see that this component is marked with this render mode interactive web assembly now what we can do here is change this uh in interactive Auto and this will go in the next mode which is essentially from the behavior we will not see any major differences but we will see that now what happens is that initially when the component is rendered it will be rendered to a web socket connection so to This Server mode but afterwards it will be rendered or used to the web assembly interactivity so once again we have here nothing but once we go on counter we see that suddenly or immediately the button appears because we didn't wait for everything to be downloaded and in the background the download still happened and right now as you can see we have once again the net runtime we have this uh Blazer app vasp so we have everything downloaded right now but for the really instance when we clicked on counter we already saw the button so it means it was downloaded via the server but then in the background everything was downloaded that needs to be there in the browser for web assembly interactivity there is however one other very important topic in the new blazer that has changed fundamentally and that is authentication and I would like to also look into a dedication part but before we do that I would like to share some critical thoughts about this new setup with all the SSR and adding different types of interactivity from my point of view the main problem here is that we actually have three different ways to render components and the thing is that each type of these components or setups come with different ways to handle HTTP context H handling data retrieval and generally handling a lot of different other stuff and this is obviously very very painful because from now on when we want to design our components we need to be very very careful to understand exactly okay hey what type of interactivity does this typ does this component use because if it's using for instance server interactivity and I need to do something for instance with ef core then I would need to use the idb context Factory and all the stuff that we are accustom with from the Blazer server and on which I did really a lot of different videos but if we want to use web assembly then hey we might need to call an API so things would be a little bit different but what if we want to change our component for instance from now on to be from interactive web assembly to interactive server or vice versa it means that we would have to set up the component totally differently and that would also need from us a way of decision making and thinking of how do we want to develop that component at all actually because in the end we would have one option for instance to try to make the components basically work on all the different interactivity modes but in that case we would definitely need to make some checks for instance on the interactivity mode that is currently working working and based on that to to to implement different type of stuff and this is from my point of view really really cumbersome however we can for instance try to make sure that we add interactivity only to components that really need interactivity and here the streaming stream rendering comes into very nicely because usually for data retrieval stream rendering seems to be really very helpful and we don't need to bother with all this stuff however what if we just want to have also web assembly components and server components as you have seen we need to have at least two different projects which from my point of view once again is not really an optimal Dev experience and it will give place to a lot of potential mess in our Blazer project and I don't know I have really played a lot with these different interactivity modes and I started to get the feeling that this Blazer web assembly interactivity is something like that distant cousin that is a jerk and that everybody hat and nobody want to have it around but obviously for family dinners he still needs to be invited so probably most developers or at least myself we will be tempted to use just the server s rendering with interactive server because I don't have to fire up a different project a different web assembly host that's a little bit cumbersome but maybe that's only my feeling however still I think that mixing up together all this interactivity modes is a bad idea because it gives really room to have a lot of potential different Pro problems and maint maintainability issues down the way with our bler applications but that's enough for that let's go over to authentication because that's really exciting here's another project that is set up with individual authentication and I am really excited about how authentication Works in this new blazer setup remember the default in this Blazer web applications right now starting with net 8 is that everything is server rendered and therefore what is the benefit of it is that we always have this request response cycle and this means that we can get rid of needing for instance CSH HTML files for authentication for login and registration and that was the default that we needed when we used Blazer server so if we just take a look here in the different component you will see that we have here some account components and here we have a lot of different things you see that we have manage we have change password we have everything here and if you take a look everything is a razor component so nothing is a CS HTML file because in this case we can totally do authentication directly in Blazer we don't need to kind of like have this very weird workarounds that we had in bler server with CSH HTML files now if we look a little bit in the files that we have here which are generated with this template we can see that what happens in the background as said in the new blazer basically everything is backed by minimal apis that return razor components as return types and that's why we have here this file in which we have different groups for account and for all the other authentication stuff so that we can use them in our Blazer application one other thing that's very nice to see here is in this identity R redirect manager is we have this cookie Builder and the cool thing about using this new blazer SSR by default is that we can rely on cookies for authentication and from my point of view cookies are actually very good for authentication they are even better better than Jon web tokens and we can totally use them because everything is server rendered and whenever you make a call even if you use something that has web assembly interactivity you still has the have the cookie and then you can just use the cookie and it would be used for authorizing a certain request if you make a request to your internal API obviously there's not enough time in this video to go in depth in all the authentication things that we have here in the new blazer but I promise you I will probably create plenty of different videos covering authentication Topics in blazer because as you might know I have already created a lot of videos about authentication in Blazer sear at so definitely I will have to update everything so as you see what I said in the intro of this video is or was not really clickbait or just drawing attention Blazer has indeed changed fundamentally in net 8 I hope this video was helpful for you and if you enjoyed it don't forget to hit the thumbs up button and like it that would mean the word to me and it will make it more discoverable also for others that might be interested in this topic and also don't forget to subscribe to the channel if you didn't do this already I would totally appreciate that if you have any comments ideas or things that you would like to share don't be shy and head over to the comment section and leave a comment and I would be more than happy to get in touch with you this being said thank you very much for watching and until the next time I wish you the very best

Channel: Codewrinkles

Views: 9,141

Keywords:

Id: frDr5uVd-QQ

Length: 21min 18sec (1278 seconds)

Published: Thu Nov 16 2023