Alright guys, in the last lesson, we learned all about pages and how to inject them from a module. Now, what if we have some pages that needs additional headers? Or maybe couple of routes in our application that should have different caching strategy, or another page or two that should be static? Usually, things like that requires additional logic somewhere in the server to implement the desired behavior.
But in our case, since NOC 3 is using Nitro as a server engine, this is a piece of cake. NuxtKit provides a function called extendRouteRules and it enables us to add logic at the top level of Nuxt's default configuration of Nitro. This is useful for redirecting, proxying, caching, and adding headers to routes. Let's take a look at the options for this function.
I'll hit command and then click on the function. That will take me to the declaration file for this function. It accepts the first parameter for the route as a string. But keep in mind that this string must match the OnJS Radex 3 route patterns.
You can check out the repository on GitHub, OnJS Radex 3, and then check out the redmi for the patterns. And here they are. The second parameter here is the rule, which is the rule for this route. And the third parameter is an optional options parameter.
We already have a page injected from the last lesson over here. So I'll use that for testing our new utility, which is ExtendRouteRules. So the first parameter we agreed that it's a string for the route, so that will be Courses, and the pattern will be all descendent routes from this Courses route. As for the second parameter, which is the Rule, let's activate Still while Revalidate, like so, and set it to 600 milliseconds.
So this rule will be applied to all the descendant routes for the courses. Now, if we run DevEnvironment, check the route which is Courses and 3, and then let's inspect, go to the Network tab, hit Refresh, and let's check out what's happened. So in the CacheControl header, we notice that StaleWallRevalidate is activated. And by the way, this implementation is exactly as if we have done this instead so I'll pass cache and then we'll set the cache to stalewire-revalidate and set it to true and then have the max age set to 600 milliseconds so this is the exact same thing but in different syntax and in case you're not familiar with stalewire-revalidate it's a cool trick to cut down or completely eliminate origin latency basically when the cache data gets old your CDN can still show it while quietly fetching the fresh data in the background.
But keep in mind that not all CDN providers are on board with this. For example, Fastly makes it very easy because Staleware Revalidate is supported out of the box, but with Cloudflare, you'll have to roll up your sleeves and set up this strategy using workers from the ground up. Anyway, back to topic, there are many other useful options we can pass to the ExtendRouteRules function. Like, we can use the route rules to implement a redirection like this, so instead of all of that I can just say redirect and then just add a string for where do I want this to be redirected to.
So let's say I want to redirect it to another route called test. So if we run dev now, and if we head to course 3 for example, that will redirect us to test. We can also add any headers we want, so let's add Headers. And let's add a new header called View School.
And set its value that it is cool. So View School is cool. I bet cheesy, but it will work. Inspect.
And let's check out the headers in the Network tab. Hit Refresh. Where is the headers? And there it is, View School is cool.
And headers are always right. The final option that I'm gonna talk about now is the static option. Like so. And this magically allow you to load specific routes statically.
You may need this for documentation pages or pages that doesn't need to be dynamic. Now, really take your time to explore all the options right here and play with them. And if you have any trouble implementing any of them, just let me know in the comments. Back to the module definition, there is another function that I want to talk about, which is addRouteMiddleware.
This allows us to inject middlewares from within the module to the application. But we first need to create one inside the runtime directory. So I'll create a new file called Redirector, then I'll export a routeMiddleware, so export default defineNextRouteMiddleware, like so. and it has a callback function that passes two parameters, to and from.
Then that will be an arrow function. And of course we need to import that from imports, because as we keep saying, we don't have auto imports inside the module. So that will be import, defineNuxTrout, middleware, from imports. And I want this middleware to do a basic task.
So if the user is requesting... the path that includes maybe an old Courses page, I want to return and navigate the user to Courses 1 route. Okay, so of course I need to also import that from imports, and now we have our route middleware. And this is basically if the user is trying to access this route, it will navigate the user to Courses 1.
Now let's get back to the module definition and start working with a new function to inject this middleware. So add route middleware and it accepts an object where we get to define a name for this middleware and I'll call it Redirector. Then we need to define the path for it. tas.
And finally we can make it global. like so, which will make it available on all routes. If we remove the global property, the user will then have to explicitly add the middleware to the page using the fine page meta. Time to test.
Let's run yarn dev and in the browser navigate to old courses page and we are redirected to the desired page which is courses one. So that's it for pages and routes, feel free to explore the documentation and all the options in there, and if you have any trouble with any of them just let me know in the comments and I'll get back to you as soon as I can. And we will explore the Nuxtket utilities for Nitro Server in the next lesson, so I'll meet you there.