This Blazor Issue Could Ruin Your Project 🔥 Learn How to Avoid It!

hey friends Patrick here and today let's create a new blazer web app project here and then see what you have to pay attention to I talked about it before but I think I can't emphasize this enough it is important it might be strange at the beginning when you're seeing that and you're wondering why is Microsoft doing that but uh there is a reason why Microsoft said that pre-rendering is set to True by default so let's have a look what pre-rendering is Blazer pre-rendering do net8 maybe as the project name now regarding web assembly you might be used to it that the client has to download everything anyways and a component is only rendered on the client well I totally understand that I'm with you I uh thought the the same still thinking the same sometimes but when you're using net 8 you well you might have to think differently and uh long story short let's just show you let me just show you what I mean by that so we have the counter component here for instance and you see rendom mode interactive web assembly but it does even make more sense to use something like the uh example weather forecast for instance now here we have or we use static server side rendering with stream rendering now this means I think you know this by now if you watched my tutorials you did right that we are downloading or rendering the uh frame of this page here and the actual data comes streamed with later all right so this is stream rendering but we want to focus on pre-rendering here so what we can do is we can just grab the uh weather razor component and move that down here to our Pages folder remove it here Yep this is what I want to do and again at the random mode interactive web assembly for instance so here is the weather component just put it there it should just work out of the box because the uh navigation menu here links to the weather route all right and this route is still here we removed it up here from our pages so let's see we just run that and then have a look all right there we are let me open the uh console here the developer tools and we go for instance to network like that you want to see everything so now we go to weather and have you seen that already so we do not really have to look here at the network tab you you can also just look at the screen I do that one more time I go to home I restart the uh or reload the uh complete website then I go to weather again I see some data and then again we see the loading screen we can also just refresh the page here I see something and after a little while we see the loading text and the data is different now what the heck is going on here again let's have a look now at the uh the network tab so maybe let's just reload this again so there we are we see the weather page and let me open the response here or the preview so here you see our temperature Celsius for instance is 17 now when we have a look here it's actually 18 Fahrenheit 64 62 here it is 1 and here 36 and now if we scroll further down we do not see actually anything else just the very first call here which is not really a call it's just accessing our page right but again what I want to emphasize here is you see that the data is different again let me just close this reload the application or the uh the web app and you see First Data that is different after then the data that we get after waiting one or two seconds right now let me again have a look at the code we see a table we see the loading text here now this loading text is actually not seen the very first time we already see a table and what this application does is we have a delay of half a second and then we get random data back now you know by now that we uh got random data at first we see the data on the screen actually it is already there no loading text so the page has finished loading actually right but then again we see a loading text and then different data and again this is the magic let's say of pre-rendering and this means that the actual page the whole component everything that is going on here it it already happens on the server and the server then sends this static site to your client and this is why you already see the complete results okay and this is default by now but what we have here is we're telling our application that we actually want to use the web assembly render mode so what this thing does then is that it renders a second time on the client SO waiting for these uh simulated 500 milliseconds in this time or during this time we see the loading text and then we see the final new randomized weather forecast data it is is even more interesting and more crucial to know that when you really want to make a web service call so let's let's just say we have our client here we don't have this uh this stuff down here in the actual component we want to make a a call to a controller so let me Implement that real quick we for instance we just add a new folder and of course you can skip that if you already know what I'm doing but if not maybe just to explain you what is going on here you see that we already have done cor aut core app here um regarding the Frameworks in our server project of this Blazer web app so in essence we have everything we need uh for a web API so we can just add a controller here an API controller and we call this now for instance the weather controller and here I just add a method like public acing think task action results and what's the type again it is um actually they have it here in the component right so let me just copy that like that back to the controller there it is so now here we have uh a list of WEA forecast let's just call the sketch and add some angle brackets here so now this should work and again just grab the stuff here no delay or maybe a delay this time why not put this here and we have VAR forecasts and we return okay and then our forecasts like that all right let's make this this public as well and here now we add our attribute not really necessary but uh I think it's a good practice to add it here okay so this is now our weather controller does in essence the exact same thing as the uh component here where was it there it was all right so now what I want to do is I actually want to inject the HTTP client and make this call well problem is we have do not have the HTTP client here yet registered yet so let's register the HTTP Client First for that we write Builder services and then add scoped and here SP for service provider new HTTP client and this thing needs a base address so here the Base address is then the new URI and in our case Builder host environment Base address correct so now our HTTP client is registered we can go to our weather component we inject the HTTP client so add inject HTTP client HTTP for instance and here now we say wait HTTP get from J ason async and yeah again the type is we a list of weather forecast you see now regarding the uh clients we could actually for instance add a shared project where we have the type then reference this shared project there our URI now is API weather like that and let's just say our forecasts for cost costs is now the result of that call and we change the type here as well so now this should actually work hopefully right so we have our type we have our call we have the controller and so on and everything is rendered only on the client right because of our web assembly render mode so now it's restarting and all of a sudden it already happens invalid operation exception and I have to mute my phone canot provide a value for property HTTP on Blazer pre-rendering Pages whether there's no registered service of type system. net. HTP HTTP client and you are wondering what the hell I am going back back to my project I have a look here there's this beautiful HTTP client so what's going on there well let's try something and instead of the random mode interactive web assembly we now create a new instance of the interactive web assembly random mode and as you can see here we can set a flag and this is probably now written correctly now what is this flag all about you see it here the uh flag is a buol and it's called pre-render so in essence you want to decide do we want to create a new instance of the web assembly rendom mode with pre-rendering active or not and by default this is set to true but now it's set to false we restart our application and real quick open it and you see that it is loading this looks like another issue here let's just open the console here and it says 404 not found let's have a look again Local Host API whether it is yes of course it is I forgot something that's the beauty of the new web app template we have to register our controllers of course because by default we don't have controllers in our Blazer web app I'm still used to the asit core hosted templates or the whole architecture with uh Blazer web assembly inet 7 so not uh razor components we want to add controllers here like that with the semicolon of course and down here we have to map them so it's app map controllers why didn't you tell me I know you've seen that and you just want wanted to see me fail in this tutorial but now it works isn't that nice so here we see that we are actually making this call now the solution for that if you want to use pre-rendering would be to actually register the HTTP client on the server as well so let let's just try that and see the result so back to the uh program CS here then we go back and let's just we just try all right so we paste this here and you already see here's no host environment so we have to change that and give this thing an actual URI so what maybe makes sense is to uh to set an URI a URI in the app settings Json file so here let's just say our base URI and uh from that we want to get a value like that it is actually not there yet and it could be null so let's just add the exclamation mark here so now when we have a look again in our application there it is Locos 7164 it is so let's go to the app settings Json and up here we add base URI like that and it here and I'm too lazy so let me just paste this here remove the weather of course right and uh restart this thing again still works and now pre-rendering on please so back to our weather components we just add it like that now restart the application and you see again this is interesting right it now works we see data and then we see the loading screen and then uh we see other data and let's have a look at the console here we see um when we just hit all we now see our weather page here unfortunately we don't see data here so let's go to weather now working yep we see data here minus one celius 31 but you already see it here in the browser that it actually maybe like that then here is the actual call and here then we see the the same data that we see on the screen or on the page so setus 25 for instance and farenheight 76 and so on so now you really see the difference right first it was rendered on the server so the server did all the action and actually the server called the controller which already is on the server so it's kind of strange actually when you think under the hood okay the server is making a web service call to him to itself does some logic there and then the client does the web service call again so this is I hope this was not too confusing but this is in my opinion really a trap here in the new blazer. net 8 and I think we haven't talked about uh that enough yet but maybe now we did so really you have to pay attention whenever you see something strange and I got this a lot actually in the DAT Web Academy that students are asking hey I registered this service on the client and it is not working why is that it is about authentication it is about rendering stuff it so much stuff and in the end the solution so often is pre-rendering just disable pre-rendering and then then it works big question now is initially uh I was talking about that why did Microsoft do it like that why did they set pre-rendering uh to True by default well I don't work at Microsoft I can't tell you for sure but I assume it's about SEO search engine optimization because the thing is again when we have a look at the uh console here and then have a look at the weather page you see actually that this is what we get when we access the page and this is also what all the Crawlers see what Google Sees In the End when it would access your page now when we disable that again we set this to fals and restart the application there it is and then go to the weather page let me just do that one more time so we're really sure what's going on there yeah this is great this this works this is now the result and for search engine optimization that's not really good right because we do not really see your data there the content of your page so for instance if you're thinking of a Blog a portfolio page whatever it is where you don't really need and this discussion can go on and on but you don't really need this uh this architecture where you're making a web service call and the client has to wait for the result and then only render the result when the call is done in this case maybe you should really use pre-rendering or just use static service side rendering again this is a whole different topic here whole another uh completely different discussion but as you can see regarding SEO and Blazer web assembly this doesn't really work and this was also a problem with uh Blazer and donet 7 and six and five and so on so there you had to activate pre-rendering or make use of pre-rendering and this was a bit different than now now with the8 so in the end I think the direction is definitely a good direction when you get used to it it is a better way to implement your applications for the web and you're well you're building web applications there so in my opinion really it does make sense and again whole different discussion there but for many many many things you can now stick to static service side rendering with blazer but let's talk about that uh maybe in another video or maybe in the comments if you want okay so I'm stopping now with that I think I showed you the trap now pay attention there don't fall into it think of pre-rendering if you get these error messages that something is not registered although you think it is registered if you see a flashy effect on your page that something is seems to be loading twice then it might be the case that pre-rendering is the reason why this happens okay again I hope this wasn't too confusing I hope you learned something guys thank you very much for hitting the like button and subscribing to my channel does help to make these videos thank you so much thank you so much to all my supporters on patreon and thank you very much for watching this video I hope I see you next time take care

Channel: Patrick God

Views: 10,107

Keywords:

Id: njA7Wb1F7pY

Length: 20min 9sec (1209 seconds)

Published: Tue Mar 19 2024