N
Nuxt•7d ago
FunAndFriendly

How to dynamically render a different page for a request. /pages/some/thing.vue or other/thing.vue

Hi, I'm trying to make a middleware like this - but setRequestURL() isn't a real thing and event.path is read-only. Requirements:
1. no client-side redirects. I want to change the response for /some/thing 2. I need to dynamically decide to make the switch or not. 
// If the request is for /some/thing, return the render for /other/thing
export default defineEventHandler((event) => {
  const { pathname } = getRequestURL(event);
  if (pathname === '/some/thing' && random() > .5) {
    setRequestURL(event, new URL('/other/thing', getRequestURL(event).origin));
  }
});
// If the request is for /some/thing, return the render for /other/thing
export default defineEventHandler((event) => {
  const { pathname } = getRequestURL(event);
  if (pathname === '/some/thing' && random() > .5) {
    setRequestURL(event, new URL('/other/thing', getRequestURL(event).origin));
  }
});
I want to cache dynamic content - there are only two versions of GET /some/thing - /pages/some/thing.vue and /pages/other/thing.vue How to do this? Thank you!
3 Replies
kapa.ai
kapa.ai•7d ago
Hi @FunAndFriendly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To dynamically render a different page for a request without client-side redirects in Nuxt, you can use the defineRouteRules utility or set up route rules in your nuxt.config.ts file. This approach allows you to control the rendering behavior on the server side. Here's how you can achieve this: 1. First, create both pages: /pages/some/thing.vue and /pages/other/thing.vue. 2. Then, you can use defineRouteRules in your /pages/some/thing.vue file: 
<script setup>
defineRouteRules({
  '/some/thing': { redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined }
})
</script>

<template>
  <!-- Your page content -->
</template>
<script setup>
defineRouteRules({
  '/some/thing': { redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined }
})
</script>

<template>
  <!-- Your page content -->
</template>
Alternatively, you can set up the route rules in your nuxt.config.ts file: 
export default defineNuxtConfig({
  routeRules: {
    '/some/thing': { redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined }
  }
})
export default defineNuxtConfig({
  routeRules: {
    '/some/thing': { redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined }
  }
})
This approach satisfies your requirements: 1. It doesn't use client-side redirects. The decision is made on the server side. 2. You can dynamically decide to make the switch or not (in this case, using a random function). For caching, you can add caching rules to your route configuration. For example: 
export default defineNuxtConfig({
  routeRules: {
    '/some/thing': { 
      redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined,
      swr: 3600 // Cache for 1 hour
    },
    '/other/thing': {
      swr: 3600 // Cache for 1 hour
    }
  }
})
export default defineNuxtConfig({
  routeRules: {
    '/some/thing': { 
      redirect: () => Math.random() > 0.5 ? '/other/thing' : undefined,
      swr: 3600 // Cache for 1 hour
    },
    '/other/thing': {
      swr: 3600 // Cache for 1 hour
    }
  }
})
This setup will cache both versions of the page for 1 hour, revalidating in the background. For more information on route rules and hybrid rendering in Nuxt, you can refer to the Nuxt documentation on Hybrid Rendering. Remember that this approach uses Nuxt's built-in routing system and doesn't require custom middleware. It's a more idiomatic way to handle dynamic routing in Nuxt applications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7d ago
<@478253467077574666> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
FunAndFriendly
FunAndFriendlyOP•7d ago
Thats a good try, but routeRules doesn't take functions 😦

Did you find this page helpful?