I Waited 3 Years For This Router. It STILL Blew My Mind.

routing love it or hate it it's a necessary part of web development if you have a URL it needs to point to something and we've seen a lot of different ways to do that pointing back in the day we used to have a server that would return different HTML depending on which route you went to but as the web has modernized more and more the expectation is as you hop around your web page that you don't have to load new HTML as you go from one route to another but in order to do that on the client things had to get more complex and we ended up with some interesting choices I'm not here to say react router is bad it's not it got us through so much I am here to say file based routing is bad though because I as much as I love nextjs and even respect a lot of what remix and spelit are doing I found that file based routing makes it easier to find what you're looking for but harder to do what you're trying to do as soon as the use cases get more complex than individual pages with single IDs I'm not saying you can't do great things with file-based routing saying that I feel like it gets in my way more and more as I dive deeper into application type user experiences once you have things like complex query prams it gets even worse and since all of your route definitions exist as files not as configurations you end up losing a lot of type safety too because typescript has no concept of files it's just one big typescript system so it can't really infer the types off of another file just because it exists it has to import from it in order to do that all of these limitations have resulted in not great type safety experiences inside of these file based routing systems and God don't get me started on query prams I can do a long rant about how react router destroyed the way we use these words by changing what a query pram is anyways we're not here to talk about any of that we're here to talk about an individual who also had all of these problems and rather than complaining about it on Twitter like I do he actually took the time to try and solve it and along with a bunch of other really hardworking contributors Tanner Lindley has introduced a very very exciting new router so without further Ado let's take a look at tan stack router 1.0 Tanner is not just a great developer he's also a pretty solid video editor and just creative nerd so I always like to watch his reveal videos when he does something new so let's take a look look at this one all RS reserved on band camp [Music] [Music] rip [Music] I don't know how nothing else has all of this like it it it seems so obvious once you see it typ safe route completions with pams that are type safe [Music] like [Music] this a lot of things have but what he didn't really show here that I think is just as big is that he's using the tan stack router Dev tool built a whole tool set for tracking your tan stack router developer experience and debugging weird edge cases because when your routing gets complex you need good tools to figure that out and obviously he built those in because he's Tanner Lindley is not going to [Music] not [Music] tan stack router in case some of y'all don't already know Tanner he also created tanack query which you might know as react query as well as tanack table which you might know as react table he's also working on tanack form and a few other really cool things I'll be sure to update you because there's a couple more that aren't even listed here yet but we're not here to talk about any of those we're here for the router because I am genuinely genuinely really excited for this project as we saw a bit of in the video it's types safe and Powerful yet familiarly simple built in data fetching with caching and search pram apis to make your state manager jealous because no other router even has one of these three much less all three fure rich and lightweight 100% type safe yep Tanner always provides these really elaborate kitchen sinks for his projects don't take this as you have to use all of these features to benefit from tan stack router and certainly don't take this as this level of complexity is necessary as you use the project this is more to Showcase all of the cool things you can do rather than showing off the exact right way to use this project in a simple example so let's take a look at this absurd kitchen syn example that Tanner provided us we start by defining a new router the router is a route tree which importantly is Cent by generating the route tree we're able to have much better syntax and ergonomics as we Define things and also have the direct types without multiple chains of inference you're also able to opt out of the generation which I think is really cool I also want to go through and see if on here he has more info on the code gen interesting so is this file based routing then interesting that's cool so remember before how I said hstack router is kind of a response to file based routing keyword there is kind of because with the code genen stuff they've introduced you actually can do something very similar to file based routing which is really cool to see something I want to try quick here is change this to something else and did it just fix itself yeah so if I'm understanding correctly this is running in the background and it's making sure that the route you've defined here is matching the file name so if I change this to dashboard users do random yeah that's really cool and it's Snappy as hell too okay did not know it did that now that's nuts and we're just getting started there's so much going on here I'm going to opt for a simpler example and then we will move to these more complex ones so here is a simple example with no file based routing this is the bare minimum quick idea of how tan stack router works so here we have react react Dom all the usual client side react stuff imported as you would expect and we have the TC rouer Dev tools as well which I as I mentioned before really handy way to keep track of all the things that your app's doing we have the root route new root route component here is the component that is the root and in here we have the outlet as well as the T Dev tools and two links we have the index route which has the parent of root it has this path and here's the component for its actual contents that if you're curious what Outlet is this is when you have a child to your route where it goes so if you have this as the parent the root route and then you have a component in that route in this case function index returns these things this will now appear inside of outlet and its parent we also have the about route which still has root route as its parent path slab component function about same deal now we have a route tree where we're adding these children we have the root route we've added these two children to it and the router takes this route tree and also an optional preload behavior in this case it's intent which if I understand correctly means when I hover over those links it will preload them in the background we've also declared a module with this type definition this is a really cool trick because it means when you import tanack router stuff in other places in your code base everything will be type safe so you don't actually have to do like what we did with upload thing where you pass the generic of your router to stuff and have to import from your custom version this is effectively overriding the internal type definitions to use your router's definition which is huge because now you can just import directly from tan stack router and have things behave the way you would expect we also have like this is just the typical react render stuff we grab the RO element and then we render this there we wrap it with the rout provider router is this router now we have inst stack router with all these things if you've already used a lot of react query this shouldn't be too unfamiliar the big difference is that we're creating these routes outside of the jsx and the jsx is a child of them but we still have the ability to compose them other routers have leaned into jsx as the thing that describes the behaviors or have leaned into the file routing as the way to do that tanc router is just JavaScript in the sense that you're writing your route definitions and jsx just happens to be what they return in some cases I like this a lot it feels much more I don't know any good word for it other than like it feels like I have more ownership of this much more control and the ability to change behaviors if I need to for different various Dynamic use cases and this is just the routing side for which route goes where there is so much more especially once you start involving react query server side rendering location masking scroll restoration data loading and all the things around that the data loading stuff in particular is nuts we have lots of different ways to do it so when you create a route you can give it a loader and whenever this return turns is now content that the route has access to you can either call it via the use load or helper I'm assuming God the more I scroll it's just insane how much stuff this supports these are one of those rare instances of docs that you're going to get smarter as you read them because there's just so much thought that went into it not like you're going to better understand how tanst router works but you're going to understand why these decisions were made and why Tanner built this the way he did and I really need to do a deeper dive on this if I want to go deep in all of the crazy data loading stuff that could be its own separate set videos even but I want to showcase some of the crazy things tan router does so let's do that with the kitchen sync example from the homepage in the previous example everything was inside of that one file but you don't have to do that in fact you can actually do traditional file based routing how does that work if everything needs to be in that one file well they do some code gen as well we hop into here we see all of these different routes that either have these dot name patterns or folders as well and I'm assuming I could put all of these in a folder named dashboard and it would behave how I would expect we just playing with this and there's some some really cool stuff like if I try to update this file route to be something else like dashboard users SL other it autof fixes itself because the CLI is running in the background yes there's a CLI for your router and it is reading your routes directory and generating not just the correct file paths for each of these routes when you export them not only is it going to generate these names in these file route exports for you properly it's also going to generate this entire route tree file which will give you both type definitions as well as the route manifest that you use to run the whole project super super cool stuff let's actually play with this app a bit because there's a lot going on here first in the route we create the router we're importing the route tree from the route tree gen file that is generated with the CLI we also have a default pending component so this is a generic spinner when things are loading and we also have a default error component which can even take the error that a page throws yet another really cool thing that tan router handles well is when a page errors out it could be because something on the page through it could be because one of the data loaders through but having a consistent way to get an error from your routes is really nice and being able to write a generic component that takes that error and does something with it or shows it to you in some way super super handy we also have context in this case we have off that is undefined and by doing this this way we're able to add that context later on as it makes sense and we also have the default preload behavior of intent which again means if we intend to do something with a bunch of crazy code underneath like for hovering over a link we probably want to go to that so it'll pre-load that page so when you click it it shows up faster nextjs does this as well declare module Yep this again to get those types everywhere they need to be now we have our app we have a loader delay we have pending milliseconds and pending Min milliseconds I think this is to again simulate really slow stuff tweak or sandbox set up in real time yes and now we have bunch of Tailwind of course a button for changing all the loader delays and our main render so we have the app strict nothing too interesting here but in here we should also render the router provider yes so this is just always going to be overlaid on top the router provider is where the interesting stuff happens this is the actual router and we're passing all of these values in because we're configuring them from here I could also for the sake of demonstration scrolling is annoying delete all of that all that is now hidden let's browse away also click the little T router button to see all of the route definitions and everything going on here might even be easier to open this up in a new tab well that cool that's really handy so here's the project here's the dev tools and we can see the current router state is loading false transition y y bet if I click this you'll see it switch to true then false again you can see all the different rout that this route currently matches you do this as well you see it's part of route and then dashboard we can go to invoices and see that this is part of root dashboard then invoices and all the places this data comes from as you see here we're on SL dasboard invoices sl6 because we're on the six invoice but this isn't that complex of something being computed there let's find a page that has more complex stuff going on sure one of these has oh here we are just sort what you might be noticing here is that those query progams are not formatted in a way you're probably super familiar with users view equals and then a bunch of percents and what's going on here it's actually one of my favorite tan stack router features that I've been waiting for for a while what's going on there is some very very complex search param management if you're familiar with search prams it's the things that come after the question mark it's useful for keeping track of a lot of different state so why don't we use it more well it has some gotas specifically doesn't really have a way to do nesting because it's just key equals value the value has to be a string or a number it can't be an object or something nested he's handled that for us as he said you've been hearing a lot of use the platform lately and for the most part we agree however we also believe it's important to recognize when the platform falls short for more advanced use case and we believe URL search programs is one of them traditional search progams always assume a few things they're always strings they're mostly flat that they're being serialized and deserialized using URL search pram and that that's good enough which it is not the search pram modifications are tightly coupled with the url's path name and must be updated together even if the path name is not changing and reality is quite different from that especially when you're building complex things like search interface you don't want to reload the whole route every time you add one more character there are many ways to serialize and deserialize with different trade-offs also super important yes there is a lot of good stuff here mutability and structural sharing every time you stringify in Pary oral search progams referential integrity and object Integrity is lost again like that sucks you don't know if the things have changed because it's a new object every time you deserialize it and like if you want values that aren't a flat key value pairing like a nested value or a date time or a lot of these other things you might be putting in the url url search pars is just going to give you a bunch of strings so it's really nice that they have focused on getting this right and one of the most most underrated features when you use search prams properly is this guy here you can command or control click a link and it will open correctly in another tab I use this so often I already have a whole video about why query prams are great and super underrated this is just pushing them way further so check out that video if you haven't already know that they're doing this really well here Json first is a big part here where basically anything that could be Json serialized can be dropped in to this which is great like arrays that's not something you could do before and they handle the serialization and deserialization for you as well as the dding changes you don't have to worry about things re-rendering when they don't need to very very handy also something he hinted at in the video validation and typescript since all the cre programs are being run through tan rouer they can also be validated with something like Zod and you can have type definitions for which search prams a given route should or should not have as well as validation functions to reshape them and make sure they're the way they're supposed to be and even include defaults when you do this very very handy yeah there's so much little stuff in here that nothing else does that this does incredibly well like no one else has done builtin validation for the things in your url because everything else's URLs just have string key values and nothing else so nice so nice to have this built in directly so here we see this one new invoice button it goes to/ dasboard invoices Pam invoice ID3 let's put a new user here so I'll do link and we'll say go to user link I'm going to rip the class names just so so that it looks just as good looks great doesn't it but you'll notice we're getting a type error it's cuz right now it's not linking to anything so we need to make this link to something so we'll say link 2 equals string and it autocompletes because again it knows all of the routes in your project because those are all type definitions that it's able to consume and use absolutely huge we want to go to a specific user though so we'll do that we're still getting a type error why are we still getting a type error it's because we haven't put the prams in yet and this route needs to know the user ID so if we put user ID I'll say seven as a string we're still getting a type error because it actually expects it to be a number so I'll switch that to a number and now go to user will bring me to the right place with the correct URL so nice I can't believe nothing else had this before you know Ethan nicer he created the Beth stack and some really cool content on his YouTube channel he actually created a project called Next types safe URL that tried to code gen a lot of similar behaviors but I've never seen anything do this at a router level as a builtin and it's so so cool to see and Ethan's actually in chat and just pointed out that he was heavily inspired by tste router when he built next type safe URL super cool stuff so we get some of these parts in other projects if we put enough effort in but having it all centralized in a single existing router is just so so cool from the type safety of the routes to the first class search pram management to the data loading and better caching patterns I'm sold this makes a lot of stuff so much better and I'm hyped but we need to talk a bit about how we can use this though because as you all know I'm pretty heavy on my nextjs in my server components so where does this fit in there let's take a look at the SSR tab get an idea of how they feel about it right now soide rendering is the process of rendering a component on the server and sending the HTML marker to the client client then hydrates into a fully interactive component there two flavors non- streaming where the page is rendered and then sent to the client and the client reruns all the code to hydrate or SSR where the critical first paint is rendered on the server and send the client single HL request and then we send serialized data for updates to the client over time and the rest of the page is then streamed to the client this guide will explain how to implement both flavors of SSR with t stack router non streaming SSR yep and as was hinted at earlier there is an interest and arguably even a need to create tan stack start which would be similar to solid start or spelt kit where it's a whole framework boiler plate wrapping a lot of the cool work being done here rendering the application on the server y react render to string the good old classic let see to say about streaming it is really cool that they got streaming working for this I wasn't sure if it would make it for the 1.0 but you can create an async promise and to pipeable stream your content and respond with that in order to get content to your user that's dope that's really really cool to see I need to address the elephant in the room it's a pretty big elephant has a triangle on it it's named nextjs I will not be moving off of next anytime soon and if you didn't notice all the examples in here were V based so am I even going to use this well I do actually hope to there's a lot of use cases that this makes a lot of sense for for me for something like upload thing this might not be the best fit because most of our pages are pretty simple we have like I think six routes and most of them have 0o to one parameters but if you were to build some more complex dashboards maybe a page where you can search through your files and filter things or God forbid an admin panel on a different route on the same project it would be pretty cool to take a sub route of my nextjs app and dedicate that to tanack router just do the double bracket with a triple Dot and dedicate a given route to tanack and now you can have all of these benefits for a subset of your application I think this makes a ton of sense and I'm genuinely really excited to get to try the stuff out gotten word from the team that while it's not necessarily an intended use case it should totally be supported and they've already had luck doing this with projects like Astro I will say that 10stack adoption is going to be an interesting ride because a lot of the people who should be using it are currently on react router and they would have moved to something else already if they had a big enough reason to and making a router swap is not easy it's pretty difficult when you have all of the behaviors of possibly years if not Decades of your application baked into these weirdly placed components all over your code base but if you're starting something from from scratch that's really client heavy this makes a ton of sense or if you have a really Dynamic page in your existing application dedicating a sub route to using the stuff seems really cool I think for something like TC router to succeed incremental adoption is essential because your router is one of the scariest things to screw with and if you get it wrong bad times thankfully it looks like that's a totally viable path with what they've built here and I'm genuinely really excited to play with it more if I was building a new client side heavy app today and I needed anything in my query prams bet your butt I'm going to be using tan router for that but most of what I do is really really server heavy and benefits a ton from server components to be clear I'm not saying you can't use tan router alongside server components just that it's not the intended use case at this point in time I expect these things to get more and more interruptable in the future and I'm excited for that because I want to push this really hard there are so many good ideas here that I want to see the rest of the web Embrace huge shout out to Tanner and all the people who have been contributing I know crutch Corn's been showing up a bunch in chat too making sure I know what I'm talking about because as probably noticed I haven't played with this this much since the original beta and it has changed a lot since one more fun note before we sign off I actually contributed the first serers side binding for Tan stack router way way back over a year ago I'm sure the code has been dropped since but uh I'll find a screenshot to sneak in here because it's a point of Pride that I had some even though entirely minuscule contribution to what's been done here it's such a cool project and I want to highlight it for those reasons thank you guys as always if you want to hear why I have so many problems with next's file based routing I'll pin a video in the corner here describing why good to see as always see you in the next one peace NS

Channel: Theo - t3․gg

Views: 97,426

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: DrP8gIpwkUg

Length: 21min 29sec (1289 seconds)

Published: Fri Jan 05 2024