TanStack Start SSR: 3 Reasons To Love It

Let me show you three reasons why you are going to love Tanstack Start's serverside rendering or SSR. And be sure to stick around to the end because the third one is a unique architectural option that is only available in Tanstack Start and for certain types of applications it is going to rock your world and your agent probably doesn't know about it. All right, this is the selective serverside rendering page. This is a fantastic resource for you when it comes to serverside rendering on Tanstack Start and it's kind of what we're going to be following along with in this video. The first reason you're going to love Tanstax SSR is it is both easy and on by default. This is a Tanstack start example repo. Of course, all this goes available to you for free in GitHub and a link in the description right down below. This index page is serverside rendered. How do I know that? Well, if I take a look for SSR strategies, I should be able to see that in the HTML. If I go over to view page source and I look for SSR strategies, we can see it right there in the HTML. So that means that the server has rendered the page before it's sent it out to the client. Thus, it is a serverside rendered page. Let me show you how easy that is to do in Tanex. So if we take a look at source routes and then index.tsx, that is our homepage. We create the file route for slash and then we give it a component. That component is just a standard React component specified right down here on line 26. It's just a function that returns JSX and it is just as easy as that. But for most applications, serverside rendering involves loading some data. So let me show you an example where we load some data. We have three examples for that. The first is full SSR. They all do exactly the same thing. They all go off to the Pokemon API service and go get a list of the Pokemon and then render it. I can look for say Bulbasaur, go to the page source, and now I find that there's Bulbasaur in that HTML that's coming back from the server. So this whole page is serverside rendered. Now let's go take a look at it in the code. So I'm going to go over to the with loader page and we can see now that we have specified a loader. So that loader calls fetch Pokemon. Fetch Pokemon is really importantly a server function. And we use create server function to build that. We give it a method and a handler and then we go off and we do whatever we're going to do on the server to go get some data. The reason why it's important that is a server function is that this loader isn't always called on the server. If you're doing a soft page navigation from one route to another, it's actually called on the client. How do I know that's the case? Well, if I go over to our browser again and then I bring up the inspector and specifically look for fetches, we can see that if I just refresh the page, we don't see any fetches off the client. But if I go to the homepage, don't see anything there because we don't have any loader on the homepage. But if I go back to that loader route, we actually get those requests for that server function. And we actually get it right away because we're doing preloading for you. So that data is already there before the customer hits the route. It is that well set up. It's fantastic. The big gotcha here is you always want to make sure that whatever you're doing in that loader is a server function if it needs to be run on the server. And of course being Tanstack, all of this is strongly typed. The output of fetch Pokemon is a promise of an array of Pokemon. And then over here, because we use route use loader data, we get a Pokemon array all strongly typed from end to end. The second reason why you're going to love Tensacarts SSR is that it is so easy to turn it off. We go over to client only. We can now see that same page is making calls from the client. And if we clear it and do a hard nav and just refresh it, we will see that it is making the server call from the client. So how did we enable that? Well, if we go over to client, all we've done is say SSR is false. And that's all it takes. Otherwise, the code is exactly the same. How cool is that? And of course, if you want SSR false to be the default, there's an easy way to do that. Now, the last reason to love SSR on Tensac Start is the data only mode. This is phenomenal for certain types of applications, particularly dashboards. Let's take a look. So, if I go back to the homepage and I go over to data only and do a hard refresh, you can see that we're not actually making any server function calls, but we are only doing the rendering on the client. How do I know that? If I do view page source over here and I look for Bulbasaur, Bulbasaur isn't in any of the HTML, but it is in the data. So, we're sending data to the client and then the data is rendered exclusively on the client. So, in the case of something like a dashboard, it really doesn't make much sense to do serverside rendering on the server and then essentially do it all again on the client, which is how React works. But it is really nice if you have the data and sometimes it's a lot faster to do a serverto-s server fetch of the data and then send that to the client and that is what we're doing here. And so this data only mode is a fantastic architectural element that you can use in your dashboard applications. And how easy is it to use? Well, let's go take a look at the code. If we go over to data only, the only change we've made is to change SSR from true or false to data only. And that's it. Features like these are the reason why developers love Tanstack. Tanstack is written by developers for developers and it shows. All right, be sure to put any questions or comments in the comments section. In the meantime, of course, if you like the video, hit that like button. And if you really like the video, hit the subscribe button and click on that bell and you'll be notified the next time a new blue collar coder comes