Routing Techniques

[00:00:00]
>> So we're gonna talk about some best practices and tools and tricks when it comes to routing, which is, as we know, with any enterprise grade level app, we're gonna have different paths and routing is a very big piece of this. So when it comes to the pieces that make up routing, there are three sort of categories I'd like you to consider, architecturally speaking.

[00:00:23]
Earlier, we referred to the View Components, right, and so this is where you have your Views folder at the root level, and you define page level components. Examples of this include like Home, About, Dashboard, these are the same components that we're going to use to actually like map our route to.

[00:00:41]
And this should never get any, like this is basically the key thing, the key thing that makes them view components, whoa, gosh, the view. The key thing that makes them like V-I-E-W components is this coupling with the routes. If there are no routes associated with a view component, then you probably should be including them in the regular components folder.

[00:01:03]
That's kind of where you should be thinking about this. And then, in addition, this was actually brought up earlier regarding presentational components. I actually also recommend creating a layout components directory, cuz this is where you have some clear examples of components that are shared between pages and have sort of more global impacts.

[00:01:21]
So whether that's like a header, sidebar, these sort of things, these actually would probably make sense as the layout components that will import into the view components. And, basically combine those together to form our pages, that we then obviously fill in with individual components. So that's a mental model worth considering.

[00:01:40]
And finally, there are the actual routes that we define inside of our router. So this will be where we actually say like, if we go to slash home, you wanna actually load up the home component. And so, for those who haven't used Nuxt, for example, Nuxt is, so the framework does a fantastic job of accessing page level routes.

[00:02:02]
So that based on how you organize your dot view files inside of a directory, it will automatically configure your routes for you, which is a phenomenal DX, and one of the many reasons I think why I love Nuxt. And so, as you're looking at routing, especially as your app gets more complex, definitely look into Nuxt to see if it can sort of help you enhance that experience for your team because Nuxt definitely does a lot of great things to make our lives a lot easier.

[00:02:29]
As far as those main categories now for organizing your routes, views, and layers, allowance, one of the technique that I want you all to know about is this idea that when you have router view components being defined, to actually add a dynamic key to it. And so what do I mean by that, so as you go through the router view, so basically this is the thing that's switching out your components.

[00:02:52]
So this is what's being like, if it's on this page, then you're gonna go ahead and load up this component. And so, you'll see what I've done here in this code snippet is that I've put a v-bind on the key which we typically see on a v-for loop, for example.

[00:03:05]
And I've bound it to the route's full path, now why are we doing this? One of the sort of weird quirks of routing that I've seen on different applications is that when people are changing routes or updating sometimes, they'll notice that nothing has changed. And basically, the reason for this is because by default, view wants to try to be as performant as possible.

[00:03:27]
And as a result, what you end up with is that it'll try to keep certain pieces of state and not have to re-render them if it doesn't have to. And so with routing this, you end up in sometimes in a weird place where you're like, I definitely change the parameters, I'm updating, nothing's happening.

[00:03:44]
And so, without getting into the internals and the complexity of it, because this is something that most people want, like when most people refresh a page, they don't just want you to refresh like a small portion of it. They want you to refresh the page, they want a full state reload.

[00:03:58]
Similarly, if we change route paths, same deal, normally, we're reloading everything. And so, because this is the default, I recommend using this key property which binds to the full path of the route. And basically, this ensures that every single time that the router view changes the view, view will trigger a rerender.

[00:04:16]
And that way, you can ensure you're getting the behavior that you're expecting. So, this is one technique, definitely to keep in the back of your pocket when it comes to defining things. The other one is a tool that I highly recommend which comes out of yet again, the phenomenal Nuxt ecosystem, which is vue-meta.

[00:04:37]
And so, as we all know, when it comes to defining SEO, SEO is a big deal, especially with enterprise grade level applications where we want to allow people to search for things and discoverability is huge. And so vue-meta is a plugin that you can add into your app that allows you to actually define these header properties basically, programmatically, rather than having to do it like basically do it in a way that would be much more painful.

[00:05:03]
So you can see here that in this particular example, by declaring that metaInfo option, right that function, you can then define like what the page title should be. Inside of your meta, you'll have like, this is like the meta tags that you would expect for SEO results. And so, this you can see, we're defining the description, but on top of that, we're actually defining the content.

[00:05:22]
And so, here, you see that we're actually dynamically pulling in the username in this example, to actually then render that out to the page and so that SEO-wise, everything looks great. And so, vue-meta is definitely the tool to keep in mind when your team or company's talking about SEO and how to make sure that all those pieces are being updated correctly in your app, vue-meta is the way to go.

[00:05:45]
The other thing I wanna talk to you about is lazy loading routes. And so, we know that when it comes to building applications, performance is, it's a big deal. After all, when we're looking at delivering bundle sizes, we want users to load the page as quickly as humanly possible.

[00:06:01]
And so one of the things with routing though is that when you import a route like directly, so we can see here with our constant routes. We have this component Home which you can, it's usually like you would define the top as import Home, as you know, quotation mark at components Home.

[00:06:19]
When you do that, just means that it's bundled with, basically the piece that shipped to the user immediately, because again, view is assuming, the bundle is assuming that you need all of this at once. But what you can do, what you actually see, by default, if you add view-routers plugin to your view app is that any of the pages beyond that first initial one that you're basically pretty sure most people are landing at first, can then be imported with this function, right?

[00:06:44]
And this function this is a bit of a Webpack thing, but it's saying to hey, call this thing and import it dynamically. And so, you'll see a couple things that's default about it, like one that there's this comment block that tells you the webpackChunkName, which is part of like just a configuration for Webpack.

[00:06:59]
But then, you actually pass the path that you would expect to import the component in. And the beauty of this is because you've defined it this way, this means that going forward, when your code is being built for production, it will automatically code split these routes to ensure that only when the user wants to fetch that thing, then the browser will make that call to that specific, basically like code chunk and bring it in.

[00:07:23]
And so this is for the amount of effort that it requires, it's a fantastic default to basically do inside of your routes.JS when you're defining your various routes. Again, unless you think that's something that should be shipped every time cuz you like saying that you will be loaded like 80% of the time or whatever, then that might be an example not to do lazy loaded routes.

[00:07:45]
But otherwise, I would recommend by default, just go ahead and lazy load your routes and get that performance boost for very little effort.