routeRules apply only to server responses

[piet-maier]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.2.2
• Nitro Version: 2.2.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: routeRules
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-u1ewa9?file=pages/index.vue

Describe the bug

Using the routeRules part of the configuration to specify redirects only works when changing the URL, but not when using a NuxtLink to navigate, and also does not work with trailing slashes, even though they should be allowed by default (and do work for normal navigation to existing pages).

Additional context

No response

Logs

No response

[danielroe]

At the moment, routeRules are a purely server-side thing. They don't affect the behaviour of your client-side app once the initial SSR response has been made (except if you are continuing to make API calls or interact with the server).

I think it would be a good idea to think about a unified interface though, so this kind of thing can flow over into the Vue app too, if desired.

[PizzaConsole]

Not sure if this is related, but ideally I would like to do:

routeRules: {
	'/**': { ssr: false, prerender: true }
}

This is so I can render my web application as a SPA and still render the server as a REST API. Specifically I am trying to do this with cloudflare_pages

[lwpinion]

At the moment, routeRules are a purely server-side thing. They don't affect the behaviour of your client-side app once the initial SSR response has been made (except if you are continuing to make API calls or interact with the server).

I think it would be a good idea to think about a unified interface though, so this kind of thing can flow over into the Vue app too, if desired.

I switched all of my redirects to routeRules not realizing this. For the most part, it doesn't affect us as most redirects need to be handled server-side (e.g. a URL given out for marketing needs to redirect to a particular page). However, we have a few links on our site that use a shortened URL for SEO purposes, but that need to redirect to a dynamic page with contents determined by the route parameters.

So until the routeRules work client-side, what is the recommended methodology? I feel like I've seen mixed answers online. And none of them are concise in format as routeRules unfortunately!

As always, thanks in advance for your help, Daniel.