Route Slots

[00:00:00]
>> Scott Moss: So route slots or AKA parallel routes. I think route slots just makes more sense to me. Parallel, if I said, hey, you could do parallel routes. What do you think that would mean?
>> Speaker 2: It's only two.
>> Scott Moss: Yeah, you could do two, but like visually on the app.

[00:00:19]
>> Speaker 2: Always happened. Side by Side.
>> Scott Moss: Side by side, yeah. What does the URL look like? Exactly, yeah [LAUGH] that's the part that I'm talking about. It's like, okay, so I always just call them route slots instead of parallel routes. It's basically where you can have different sections of a layout be an individual route.

[00:00:43]
We'll dive into that a little bit and index.js isn't the first framework to do this or every framework I'll ever use has had some concept of this. If you ever use like OG Angler, I think this was called, actually I don't know what it was called, I can't remember.

[00:00:58]
In view, it was actually called slots, which is why I call them slots here, because that's what it was called. In fact, you've actually already been using slots. If you have a layout, let's go to our main layout here. We're using children, okay? Children is actually the default slot.

[00:01:16]
It's the slot that you don't have to configure yourself. It's given to you for free. In the case of a layout index.js children is the current page, the child page of this layout, right? That's a slot. What we're gonna be doing, parallel routes or route slots are named slots.

[00:01:32]
Slots that we create ourselves and we can put them in a layout and we can put them wherever we want in a layout. That's basically the difference. So, there are some benefits you get simultaneous rendering. So multiple components or pages can be rendered at the same time within the same layout, which can be really cool.

[00:01:52]
This is very similar to what we talked about with the Astro Islands. So if you have multiple components on a page, each one of those is like its own page, then they have their own caching strategies, their own loading UIs, their own error UIs, whatever you wanna do on a per page basis, now think of that only per component basis.

[00:02:14]
That's basically what you get and then you can do like conditional rendering. So you might be able to say, I wanna show this slot if the user's level is admin. If they're not admin, show this slot. So you can dynamically show different slots depending on some logic and then because it's server side, you can access the database.

[00:02:36]
So there's some interesting things you can do there that you could not have done before index.js but to be honest, a lot of frameworks already really had this if you've ever built a react app, using like react router, like you're able to do this pretty much already. So it's just bringing it over to index.js and because index.js does routing with folders and files, they have to create a new syntax and it looks like this, it has an at sign.

[00:03:02]
There's only so many characters they can use and [LAUGH] they chose the at sign, which I'm starting to like it a little more. I think I have some better opinions on it. I might reach out to them and like, hey, maybe we should try this but I think it's good.

[00:03:16]
But basically when you make a folder with an at sign in front of it, you're telling index.js that, hey, this is a slot, it's not us. And again, a slot is a page that's meant to be rendered in a layout with a given name. Maybe they should even just call them slots, I don't know.

[00:03:35]
But you make a folder with an at sign in front of it. What this does, it's very similar to a grouping where when you have the parentheses around the folder, that name does not get included in the URL segment. So does this if you have a at sign in front of it, the name does not get included in the URL segment, that it does not change the URL at all, and because it doesn't need to.

[00:03:58]
And I'll show you what I mean when we get into it. But whenever you do this, you make the folder, you now then have to go into your layout, that is the nearest parent of those folders, and that layout will have as its props, the names of those slots.

[00:04:18]
So if I had a folder called Team and a folder called Analytics and Slots in its parent layout, inside of the props, I'll have a prop called Team I have a prop called Analytics. And it's literally the same thing as children with just those names. I can put it wherever I want it to lay out.

[00:04:34]
There are some caveats with this we'll see in a little bit but so first, we need to talk about two different types of navigation just to preamble on that, you have hard navigation, or I call like server side navigation. That's when you make a request, it goes to the server, there's no caching, or there might be caching, but you're basically not using a client side router.

[00:04:53]
It's as if I went to your website, typed it in the URL and hit enter. It's gonna do a hard navigation, right? But when you use the link component within index.js, that's a client site router. It doesn't go to the service. That's soft navigation. So when doing soft navigation, index.js keeps track of what the active slots are because again, they're not bound to a URL path.

[00:05:14]
So the URL doesn't tell you what slot you're on index.js has to keep track of that for you. But when you do a hard navigation, it's impossible to know until your layout starts to render and that logic kicks in, it doesn't know. And because those slots are technically routes, they'll 404.

[00:05:32]
So you don't want like random 404 is on your dashboard if you have like multiple slots. So what you have to do is make a default. You make a default file in the slot to say, hey, basically, until you can figure out what slot needs to get rendered here or if it ever gets rendered, here's the default component to render for this slot.

[00:05:51]
Most of the time it's always just gonna be null. It's just gonna return null, which is actually a valid component. You can return the index.js, you could just say no. At least from my experience, I've always just returned null. But if you don't use get a 404 and you don't want that so.