Nuxt•3mo ago

Possible to render a route client-side on demand?

My app is completely prerendered with contents coming from a CMS. I would like to be able to opt-in to client-side rendering per request, say, if a certain request header exists or a certain URL param is present. Then the page should not be serverd from prerendering, but be rendered freshly on client-side. How is that possible in Nuxt 3?

2 Replies

kapa.ai•3mo ago

Hi @riccardolardi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt 3 supports hybrid rendering, allowing you to configure rendering modes per route using route rules. You can disable SSR for specific routes (making them client-rendered) by setting ssr: false in your nuxt.config.ts under routeRules. For example:

export default defineNuxtConfig({
  routeRules: {
    '/some-path': { ssr: false }
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/some-path': { ssr: false }
  }
})

This will make /some-path render only on the client side, even if your app is otherwise prerendered or SSR-enabled. However, this configuration is static—it's determined at build time, not per request. Dynamic opt-in to client-side rendering per request (e.g., based on a header or URL param) is not natively supported by Nuxt's route rules or prerendering system. Route rules are evaluated at build or deploy time, not at runtime per request. If a route is prerendered, Nuxt will serve the static HTML for that route, and there is no built-in mechanism to bypass this and force client-side rendering based on runtime conditions like headers or query parameters. If you need this level of dynamic behavior, you would need to avoid prerendering those routes and handle the logic in middleware or in your app code, but this means those routes would not benefit from static generation. Alternatively, you could serve a minimal shell (SPA) for all requests and handle content fetching client-side, but this would forgo the benefits of prerendering for those routes. Summary:
- You can statically configure routes to be client-rendered using ssr: false in routeRules Hybrid Rendering. - There is no built-in way to dynamically switch between prerendered/static and client-rendered output per request based on headers or URL params. - For full dynamic control, you would need to avoid prerendering those routes and handle rendering logic client-side. If you need more advanced dynamic rendering (e.g., SSR for bots, CSR for users), you may need to look into custom server logic or external solutions, but this is not covered by the official Nuxt documentation. Hybrid Rendering
Prerendering ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1041745889842184222> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Possible to render a route client-side on demand?

Did you find this page helpful?