TanStack Start Is Kind Of A Big Deal...

Tanstackstart is a pretty awesome full-stack framework. Let me show you three things that I think make it worth trying out today and why I am actually using over next and next right now. So, I have an example Tanstackstart application here and let me show you a few things I really like about Tanstackstart. First, this is the root and I really like these type server functions. So, by default, this is a client component unlike next where you have these server components. Essentially, you can create server functions that you can call from the client from a button click or a submit. It's encapsulated. This will run on the server. It's not dealing with any API routes and I feel like the DX is better than server actions that you might have in the next side. Also, I like how you can set the method here for gets or posts or whatever you like. Unlike in the next server action side, I believe they all default to posts. It has this input validator and then this handler here. So, I can put in all my server component code. This is all encapsulated. It's not going to be linked to the leaked to the front end, so I can put environmental variables here. You can surround this by a use server function hook if you like if you're trying to like throw and do some redirections. Though, it I think it just the DX is much simpler than I've seen in other full-stack frameworks. Another thing I really like is search params that are validated. So, you can use this thing called create file route. This might look familiar in next with search query params, but I think it's much easier to use. So, we have this validate search. So, what I can do is if we have a query param like this for user e equals Eric CH, I can create the validate search so that this is typed. So, now this user is typed as type string and if it is not in there at all, it still defaults to an empty string. And this type will be throughout my application. I also can do this nice loader depths, which means that if this user value changes, this whole thing reruns again, and then I can add a loader to it. So, before this route loads all the way, I can run a get GitHub user this function, this server function, this create server function, and have it pulled the user data in it. And like I said, this nice this user is already typed as type string, and it's already set inside this validate search. So, I'm already having types. This get GitHub user also returns a typed response. And in here, you can see here, I'm using this interface that I created. Well, in this case, I'm actually passing back an user an object that has a user and an error in it. And obviously, if there's an error, I pass in the error to it. And then inside here, inside my actual function home, I I have some really nice things. I can use use this route.use search to grab the query out. In this case, I'm just I'm just changing the name to query, which is a type string. Just kind of renaming it so it doesn't clash with this use loader data. And this use loader data is actually the data that's comes back from this loader here as the route was loaded. It's really nice. Now, this whole user, you can see here, I have it's completely typed. I have the bio, the followers, the following, the HTML URL, the login, everything I expect. And then the error is type string. So, now inside my function here, I have a form submit. Now, if you're familiar with React, TanStack of course uses the same JSX in here. I have this on submit that calls this lookup. So, on the submit, it has this lookup here. I have our this is the same kind of pattern you see in all the React apps with value equals input and then the on change. So, every time you type, it sets the value of the input. And it's basically, by the way, defaults to the query that it gets from the search. So, if you already have the query string in there, it'll show up in that box. And then from here, uh as you submit, it does the prevent default, so the page doesn't reload. And then it does this navigate, which basically adds that query param from the input box into your URL. And if you have multiple ones in there before, it makes sure it actually makes sure those are in there as well. And that's why it it spreads the previous query params in there, so you don't lose them. And then it and it trims any white space at the end of it. So, that's essentially how it works. If there's any errors, then you will see an error text in here, and there's a whole user value. If the user comes back, you see this. So, let me uh show you what this looks like. Uh let's see here. Let's Let's just run it. Let's see it. It's on port 3000. And if I refresh here, here it is. So, if I type in, let's make this a little bigger. If I type in EricCH, you can see the query param at the top changes, and I see it inside here. I could also just put in something inside here, enter it. You can see here it entered it directly into the text box, and it pulled it up. And if there's nothing in here, then you'll get a not found. Uh so, it's a a simple application, but you could see how everything works together. If we looked inside inspector, we'll see that in the console, we're not seeing these calls to EricCH. There's no or I guess in the network tab, if you want to change it to network, and then maybe just XHR requests, and we do the look up here. Uh we do see a fetch here, but this is the fetch to the back-end server. So, it's actually we don't see that the fetch to the GitHub you GitHub request at all, cuz it's all done on the server side. If we look inside here, we can see a little bit of what it's doing uh in the in the terminal. We could probably console log out and see the terminal running if we wanted to. The last thing I want to show you is TanStack Intent. It's the package for knowledge agents. It's basically for your code your as coding assistants. So, you can install it and then have it be available for you as you're using your TanStack app. So, I know a lot of us are not writing all our code by hand. We're using our favorite coding assistants. In this case, I'm going to use Kiro and I'll show you how this works. So, in this this uh inside the terminal here, I'm going to install this intent. Looks like this. Uh NPX TanStack uh intent at latest install. And what that'll do is it'll add this nice uh agents.md. Now, uh it'll either add to it or it will create a new one and it just has some nice skill loadings information in here. Now, this can be used for libraries uh or it could be just used for your project. And it says, "Hey, you can run this command here and find what skills are available and then you can you can load them or install them as needed or just search through them." So, what you could do is uh after you have this inside your agents.md, it gives your coding agent a little bit of a hint of what to do and how to get grab the latest information on TanStack start. So, what I do is I open up my favorite coding agent. In this case, I'm using Kiro CLI. And then I'm going to ask the question. So, I'm just copy and paste it here. Uh I'm going to say, "Please review my existing repository against the newly loaded TanStack Intent rules. Check my implementation for antipatterns, missing edge case, or duplicated syntax." And what this is in Kiro CLI is already going to look at this agents.md file that's in here. And it's going to start uh looking up these skills and finding out what inside my app needs to be updated. I could have been been much more specific. I could have written the exact file. Like, "Hey, double-check the syntax that was written to make sure it it works as as intended." In this case, it needs some shell. I'm just going to trust it. Well, let's give it the full command. Uh I'll give some of the partial command, and I'll trust it here. Okay, so it finished, and it gives me a a couple of things that it found that it thinks might be worth checking. The verbatim module syntax syntax, some dev tools for TanStack start, uh some shell components. I think the the thing it didn't like the most was I didn't wasn't using the latest version tags in the package.json, and then it kind of gives me an actionable issue that I can do. I can turn this to true and set it. But, this is really invaluable because our our coding assistants don't have the latest information out there, and that changes all the time. It And instead of having it to search the docs, it can use these skills to know exactly what it needs to do. So, I hope you guys learned everything. I really appreciate it. Leave a comment below if you like videos like these where I go over giving you tips on the latest frameworks. Appreciate it. Thanks.