Mastering .NET 8 Blazor: Server-side Rendering (SSR)

hey Bobby here with coder Foundry let's talk about Blazer render modes here at coder Foundry we're getting ready to switch over to Blazer in 2024 and one of the main questions that came up in our research when trying to use the preview is what are render modes how do they work when should I use them so we built an application called Blazer movie to explore all the render modes using the same page layout to see how the different modes work how do you code them how do they behave to the end user so that you can make good decisions when you're building your apps out so today we're going to talk specifically about just one of these modes which is SSR or server side render now there's two modes that go hand in hand together with this this is SSR and then streaming okay and we're going to show you how both of those work but in general SSR mode will bring back an entire HTML page on a response so it it basically you make a page request the request goes out to the server and then it comes back with the full page and if I refresh that you can see that's what happens here you can see the spinning is loading and then the page comes back okay and so interactivity for server-side render mode is going to be done with JavaScript now I know you're probably thinking hey I thought Blazer removed the need for JavaScript well Microsoft has introduced multiple render modes and some of those require JavaScript server side is a lot like NBC and razor Pages um and it's just a basic server-side render mode that brings back an entire page if you want this button to click you got to use JavaScript to do that now you're probably asking yourself well why would I use this instead of MC I already know how to use NPC well the component story is so compelling here that allows us to build our page with components and it makes it easier and faster to develop also because of the way the code is organized it's easy to just turn on some of these features down the line whether you want to use signalr or webassembly or even the auto mode without changing the code so there's a lot of reasons why we want to adopt server-side rendering in our applications all right so when we have a need for a static page hey we can render this all right so let's look at the code to see how this works all right so I'm going to go into visual studio now of note when I'm recording this this is in the preview version of visual studio and I think it's preview seven and also how to separately download the SDK for net 8. so in order to get this running you're going to have to download the preview for visual studio and a separate download for the SDK for net eight all right until this is in a release version Okay so you can go to the GitHub and go to our GitHub the link is below and you can clone this repo and bring it down or get you a copy of it but let's focus in on how this code is organized so the first thing I want you to understand is there's a client project and a server project the only thing we're concerned about with today is the server project the client project is obviously for when we cover webassembly but today we're talking about SSR server side rendered so we only care about the server project and in here there is a Pages folder and these are our Pages they're really components but they're pages and a pages is a component with a route and so let's look at the movie list SSR component and just look how it's laid out real quickly and then how do we achieve this with a render mode now at the top here you can see we have a using statement that allows us to bring in some models to our page some types that we've put together and this is how routing Works in place or we just have a page directive here and we just give it a wrap pretty simple pretty basic but pretty powerful you can call this page whatever you want so the route to this is slash movies slash SSR and if you type that into the browser it'll respond to that and come to this page okay we've also injected an instance of an HTTP client if you're not familiar with c-sharp and you're coming from other things like JavaScript HTTP client is the c-sharp way for us to call um web apis or endpoints so it's a lot like a fetch that you've seen if you've used that in JavaScript so HTTP client is our way to do send and receive HTTP messages okay all right so um that's kind of how it works now notice here we also can run C sharp inside of this is called a razor page or a razor component and we can check to see if the movie response is null and you may be thinking like what is what does that mean okay well look down here in our code behind here and you can see I have this a weight here that just delays the page purposely for three seconds so we can see what's going on here and you can see here I have an HTTP request that goes out to a URL here movie slash popular now hey if you've called HTTP requests before either from Fetch or some other way or even from HTTP client you're like hey that's not a complete URL how does that work well I'm glad you asked let's go over that real quick inside of program CS we have set up a couple of um minimal apis here that allow us to call the endpoint to the movie database all right API and that's injected from a service here so we have a little Quick Service that we put together here right here that sets the base your The Base address you can see your api.movie.api.org-3 this is the base URL for this client and then we also can pass in our Bearer token right here on line 14. you're going to have to put your bear token either here as a string or configure your user Secrets inside of visual studio if you're new to visual studio and you don't know how to set up user secrets that's fine you can just put your string right here and it'll work it's a good practice to use um user Secrets because it also if you want to publish this and get it out you're going to put this in an environment variable and this ports environment variables and user Secrets all right but either way you need to get your your own key here for this to work and then we have in here we can just simply call this on this endpoint it'll listen on this endpoint here and it'll return to us a a strongly typed response from the movie API okay and this is called popular movie response and this is a class that we've put together okay and basically the class allows us to take Json and map that to c-sharp properties so let's look at our models here and you'll see that in here we have popular movie response you can see I've got a page and then I've got a list of popular movie and inside of the popular movie I've got whether this is an adult movie or not you know backdrop genre IDs you can look at their documentation of their API if you need more information about this but this will take this one API endpoint pull it into a class and um we can use that class throughout our code all right so let's look at um go back over here to movie list SSR now here's where it gets kind of cool all right so once I call an API endpoint all right and I get a response from the movie API it's going to put it into this object and you can see here it's of type popular movie response now what you need to know here um that's interesting is notice that this doesn't have any connection at all to our UI it's just calling out to an endpoint a third-party endpoint getting us a response and putting that response in a movie response object pretty simple all right and now in here because of the way the Blazer is organized it will detect that change and then build out this URL here or build out all this content here now in the case of SSR specifically this render mode and I'll notice here at the top here I don't have a render mode specified so if I don't specify it it's going to default to SSR that means that it will run this code here for each over this and build out this movie list for me okay um and it waits until this is complete in order to do this and then when it's done it basically then returns that to the page okay but notice we didn't have to do anything else so this is our on initialize event this is when the page comes up this runs it gets a response and then the magic happens where it builds out the page here because this has a value now okay notice here we're checking to see if it's no and if it's not no it'll come down on this else and start building the page out for us now you hear these green lines here these are components and then this is a component for our model so we're using two components here and notice that um were for eaching over the response here the object that we got and then we're putting each card in a column and this is a bootstrap row and a bootstrap column and that's how we make our four columns across okay so if we go back and look at the code here or the sample here you can see this is the result we get so when we refresh it it calls out to that API endpoint brings back the movies displays them in the cards okay notice we didn't have to write any JavaScript or anything else to do this so far so that's pretty powerful right let's continue to look at some more code here so if I go back into Visual Studio let's look at the component because the component is kind of what's driving how these are displayed and this is really why people are super excited about Blazer is the com it is a component first framework where everything is a component and it allows us to do some really powerful features here the notice here this has a couple of properties in here so let's look at our movie card and this is our component here and in our code here we have parameters that are coming in okay and one of them is use JS for button and one of them's popular movie okay pretty simple all right and if the popular movie is not no okay that means that it has a movie in it then um take that object and start putting things in here now the other thing is if the component says use JS for the button then it's going to render the button this way and you can see here it's using a JavaScript on click event an attribute here to call it JavaScript function to show the details we'll go over that in a minute or if it doesn't have that it's going to do it the C sharp way and this will work for other render modes so let's say that we're using something like signalr or webassembly our buttons are going to look more like this and we'll cover that in a later session but if we're using server side rendering if we want interactive in other words we want this button to do something that's not a form post respond to a click event then we need to do JavaScript for that and that is one of the distinctions between server side render and the other modes is that the other modes make the use of you can use minimal JavaScript to do most of the things whereas server side Runner you're still going to do JavaScript the old-fashioned way all right so this is just rendering out these components as it has results right and so you can see here I've got a component here and it's just going to render and because I said use JS button for true go back here and look at the card here it's going to render this as a JavaScript button kind of cool all right so finally um let's look at what happens when we render it out in streaming mode because now you can see okay so it just it it basically maps in on the server side runs to this Loop builds out a bunch of cards in this Loop and then we also have this one component here called a movie modal that gets loaded well look at that real briefly and so in the movie modal here is just HTML it's just HTML it has no code behind it doesn't do anything at all but notice here we have IDs on all of these HTML elements so that when we call our button we can access all these elements by ID and insert values in there just like we would with we used vanilla JavaScript to do this but um if you have a another type of framework there's ways that are very similar to this where you grab a hold of the element set its values those types of things all right so let's go back to movie SSR here and let's look at how this is different from the two modes here so if we go to stream render here you can see here we set an attribute does streaming render true but everything else is exactly the same the code doesn't change we just change the the streaming render mode and this is where the power of Blazer will start showing itself all right so let's look and see how that looks differently so we notice here when I refresh this page nothing really happens until it's finished running and then the page refreshes and it shows us the eight movies well let's look what happens when I change over to the streaming mode you can see now I have placeholder content and then the movies come in so if we look at the code for that we go to the streaming render code component here you can see here it says if movie response is null meaning there's nothing in it meaning that on this initialize this is not completed yet it may take a few seconds to run you may have a long running database process this API may be slow and so this will take a minute or a seconds to come back so what do I want to show I just want to show movie cards but I don't have any properties coming into it I'm not giving it a movie in here I'm just saying show me eight blank cards and so we can look at the movie card here and we can say if property if popular movie The this is the value the parameter being passed in is not null just show some placeholder HTML we're using placeholder styling straight from bootstrap here okay and then when it does find some movies in here then then bind it with the real information about the movie and show the card correctly all right and so this if statement is checking to see if popular movie is not null now here's where it gets interesting right so if we go back and look over here I want you to think through this and so if I refresh this notice it builds eight cards and then suddenly the cards change but if you look at the code we really didn't do anything to make them change we didn't bind them to the UI or anything like that it just changed on its own and this is the power of streaming so what streaming is doing is it opens up the HTTP request and the first time it opens up it says hey I'm going to load the HTML that I have and it comes to this component and it says popular movie as null so it says okay I can load I can I can load this placeholder content and it goes through and loads eight of those all right and if you go back and look over here this is where this is being done here I've got I'm looking at for each response to the movies but if they're null the movie responses no just give me eight blank cards and I'm using the same component for this but my properties that are being passed into it make it behave differently and that is very very powerful so I can use the same UI for both of them but because I'm passing in a movie it'll behave different now what we can do is the magic is is that this takes a few seconds to run we delayed it by three seconds and then we call our endpoint and then that takes a second or two to come back from the movie API and we get a response well notice it loaded in movie card the blank ones right here and then as soon as it changed as soon as this value changed it re-executed this if statement and said oh it's no longer no now let me stream just the movie Card results to my UI all right so let's go look at it one more time and show you how that works in real life and so I'm on the stream endpoint here this stream here and I'm going to just refresh the page and you can see here it loaded one two three and then finally the move response object changed and then it rebound the UI we didn't have to write JavaScript to do that we didn't have to do anything to do that all of that happened on the server but the streaming mode allowed us to see parts of the page before the long running process was finished we go over at SSR you can see it away and then it'll load and it loads all the page at once streaming allows us to show the end user something some placeholder content and then when that long run process completes it shows us the real content all right so finally let's look at how JavaScript Works inside of Blazer so when I click more info here I have a a modal that pops up and it's bound to whatever's in the current movie I'm looking at so here's the trench if I click here heart and stone we get the information about that movie or if you went and if you're a Barbie fan we get here information about Barbie now notice here we're using the same modal HTML just binding it with different values and this is a very common technique that you're going to use with whatever framework you're going to have you want to have you want to write a modal for each card here because this list can be 100 and we don't want to have um a hundred modals with specific information in them we want to dynamically set this modal and this allows us to do it inside of visual studio so let's look inside of Visual Studio here and see how that works now notice here I've got when when we load in our stuff here I just load in a copy of the modal because the modal when I want to pop it needs to be on the page and that's kind of how that works for bootstrap it hides the content and then when you hit the button it displays the modal our job is to put information inside of that modal okay notice there's no code here to do that all right so what's doing it is the buttons inside of our movie card so if I go over to movie card here and I've got this parameters being passed in use JS for a button for streaming side rendering SSR we still have to use JavaScript for interactivity okay if we're using signalr or webassembly then we get the more enhanced versions of this and it behaves more like a spy app that you see with angular or react okay so right now what we're using is client-side Javascript to fill this model up so we have an on click event all right and so this on a click event runs show movie details and then it passes a copy of the button in there so that we can get this popular movie ID that was set on the server so we know what movie to put our information in okay and so to do that we need to use JavaScript now we can add JavaScript to this project just like anything else so right here I've got a in my WWE root I have a JS here and you can see here this function here is in JavaScript and it can find it because it's attached to the page and if you look at this we attach it here in appraiser here this is our startup component here and you can see here we at the bottom here we're referencing our custom JS right here okay now typically in a lot of cases if you're running wasm or singular you don't have the need for this but I want to show you that you can do it just like you would normally if you run something in an SSR mode all right so but as you'll see as we go forward to this to do this we basically get the movie ID from the attribute on the button that was being passed in and then we call our endpoint right here so we're calling a git movie function here that's another IC function here and it calls a fetch to get our minimal API endpoint all right and so we've set these up pre um as I said before in your program CS we have a minimal endpoint for popular and one for pulling back a specific movie okay and this returns Json just like any other API that you would call right but we're calling it to our server and then our server calls out to the movie API so that our API key can be protected our server makes the call to um the movie API and not the client okay and that's real important that our our credentials are on the server side and it's a security setting and that's why we use an API Point endpoint to be in the middle of our request here okay so let's go back over here or let's go back into our JavaScript so inside of our JavaScript here you can see here this counter endpoint and now I have a movie response back in JavaScript and then I have a lot of vanilla JavaScript to set the values for the modal here now I'm not going to go over this if you don't know how to use JavaScript that's fine just know that there's a lot of work here to set that and what Blazer is giving the promise on as we review other modes here is that this type of code goes away when you use signalr or when you use webassembly or the auto mode or if you just allow the server to do it you don't have to do this but in the case of modals and pop-ups and things like that currently with SSR we've got to use JavaScript to do that and it's a lot of code here but it does work let's look at it one more time here see how it kind of works and then if I click more info here I get the trench and if I come down here to Across the spiderverse I get a different movie okay all done with JavaScript okay so that's the first um two modes that are by default out of the box or Blazer it's called SSR in future videos we'll go over signalr how that code works and also was them in Auto well I'll see you in the next video good luck and keep coding

Channel: Coder Foundry

Views: 4,726

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, blazor, ssr, serverside rendering, server-side rendering, .net 8, web dev, web developer, blazor .net 8.0, blazor server side rendering

Id: 2kGR1lgEL50

Length: 23min 54sec (1434 seconds)

Published: Mon Sep 11 2023