Lazy Loading Routes

[00:00:00]
>> Brian Holt: Okay, so let's go fix order so that it can be lazily loaded. Here at the top, we're gonna say, import, create lazy file route from TenStack.create React router. That's correct.
>> Brian Holt: If you didn't modify, make sure that these are all dot dot slash instead of dot slash, cuz obviously they're up a directory, not in the same directory anymore, okay?

[00:00:32]
And then what we're gonna do here, just underneath this, we're gonna say export const route. Cuz remember, TanStack Router is expecting it to be on this route named export. And we're going to say equals createLazyFileRoute. We're gonna tell it where we want it to be. We want it to be at /order, right?

[00:00:59]
And we're going to invoke that immediately afterwards with the component.
>> Brian Holt: Lowercase c, sorry, this one. And we're gonna pass an order.
>> Brian Holt: So we're passing in this function as the component there.
>> Brian Holt: And this doesn't need to be exported anymore, so you can just delete that. So it's just function order.

[00:01:30]
You can, doesn't matter. Does it matter? I don't think it matters. But let's not.
>> Brian Holt: That's really it to make this a route. Now it's a full on route, it'll be rendered in that outlet whenever people are on the order URL, that's it. Our issue at the moment is that we have no index route, right?

[00:02:00]
We need an index route. So let's go ahead and make another file here called index.lazy.jsx, Index.lazy.jsx.
>> Brian Holt: Actually, I wanna show you a really cool trick that this will do. So, you can just ignore this for a second, if I say npm run dev.
>> Brian Holt: Okay, it's gonna tell you all the stuff that it's doing here.

[00:02:27]
You'll see that this route.gen.ts got generated. Never modify this directly, because it'll just get overwritten later, right? This is generated code, this is generated by TanStack for TanStack. Just ignore it. But I wanna show you this very pleasant thing that I discovered that TenStack Router does for you.

[00:02:44]
I'm gonna create a new file here, index.lazy.jsx, and it stubs it out for you. I didn't do anything, it just did that for, but your V server has to be running for that to happen.
>> Brian Holt: So just a text like, you're making a new route. Here you go.

[00:03:04]
>> Brian Holt: I thought my computer was haunted for a while. [LAUGH] All right, so on our home page here.
>> Brian Holt: It did all that stuff for us, we're gonna import a link as well. So links are just a tags, right, anchor tags that use on the page. But if you use Link, then it'll handle all the routing and it'll do a client side redirect, as opposed to doing like a full side browser redirect, but it still manages all the history correctly, so it's all good.

[00:03:35]
So in other words, if you're using a router like this, use the Link component, don't use a tags, that's what I wanna say.
>> Brian Holt: Okay, and then we're just gonna do a, we're gonna call this index function, index,
>> Brian Holt: And we're just gonna return a bunch of markup.

[00:03:54]
Feel free to just copy and paste this. None of this is very interesting, in terms of like, there's nothing new to learn here.
>> Brian Holt: Div className = index-brand.
>> Brian Holt: We're gonna say h1 padre genos
>> Brian Holt: P, Pizza and art at a location near you. Ul, li, and then we're gonna say Link.

[00:04:36]
This is gonna go to Order.
>> Brian Holt: Order.
>> Brian Holt: And same thing here, link to past, and this will be past orders. We don't have anything here yet, so that won't work, but, it just won't go anywhere, yeah.
>> Brian Holt: Cool, that should work. Last thing, head to header, really quick.

[00:05:12]
We're just gonna wrap this one here. Everyone expects if you click the header, it takes you back to the home page. Let's just make that work really quick. So, import link.
>> Brian Holt: And we're gonna wrap the h1 in it. That's all. Link to = /, and we'll just move that inside of it.

[00:05:42]
>> Brian Holt: Okay.
>> Brian Holt: So let's go see what carnage we have wrought.
>> Brian Holt: So Padre Gino's right on our homepage. Pizza and art at a location near you, that sounds like some marketing genius wrote that.
>> Brian Holt: Actually, that was the designer that wrote that. So, sorry, Alex. [LAUGH] And now if we click on Order, it should take us to our order page.

[00:06:17]
>> Brian Holt: So, kind of cool here. Refresh the page. I'm gonna look at all here for just a second, and I'm gonna trash this for a second. If I click on Order, notice that it loaded Order.jsx, Pizza.jsx, Cart.jsx, after I clicked it. If we had not done the lazy loading, it would have just been one file bundle would have loaded when you initially loaded the page.

[00:06:54]
But because we're doing lazy loading, it's going to say, I'm gonna hold off loading these until the user request something that does this, which is cool. Again, this is 27 kilobytes of code. It's not worth lazy loading, and once we actually minify it and do all that kind of stuff, it's gonna be kilobytes, like, a few, right?

[00:07:20]
But imagine if this page had like Three.js on it, right? Three.js is is a big whole bundle, right? Or if you're loading Monaco from VS code, huge bundle. That makes a ton of sense that you would wanna do that.
>> Brian Holt: So, cool, notice we got a little friend down here on the bottom left, TenStack Router.

[00:07:45]
Click to get nice little view into what we have.
>> Brian Holt: So honestly, I didn't really use this one too much, cuz we're not gonna use the router too, too much here. But imagine if you have a giant app with a bunch of routing rules and stuff like that.

[00:08:04]
This can be helpful to kind of dig through, why is this getting routed the way that it is, what data is being passed around, all that kind of stuff. So I loaded in there just so you can take a look, know that it exists, know how easy it is to install.

[00:08:20]
This will only show on your local host development environment, as long as your node is equal to production, like I told you about before, none of this stuff gets shipped, so you don't have to worry about that. This will only exist in dev.