Nuxt•3mo ago

Is it possible to exclude a component from a cached route?

In a project, I have routeRules like:

  routeRules: {
    '/*': {
      cache: {
        maxAge: 60,
        staleMaxAge: 120,
      },
    },
  },

  routeRules: {
    '/*': {
      cache: {
        maxAge: 60,
        staleMaxAge: 120,
      },
    },
  },

Pages get cached correctly, and inside some pages I use @nuxtjs/device to render different components if its mobile or not. If routeRules are not caching the page, @nuxtjs/device is able to SSR the correct component. However, as soon as the above rules are implemented, it starts warning about hydration errors, as the SSR is returning cached html that is no longer valid. Here's a reproduction of the issue. https://stackblitz.com/edit/nuxt-starter-ttceua?file=nuxt.config.ts (just comment the routeRules to observe the disappearance of hydration errors when the rules are disabled). Is there a way to exclude certain components from routeRules cache? I couldn't find a way to do so.

Urb Gim Tam

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

3 Replies

brunomgmateusOP•3mo ago

@danielroe Sorry for pulling you in, but would you think that: a. this is a bug of the module? b. this could be an enhancement for nuxt core? c. I'm just a d*mbass and it should be done in a different fashion?

danielroe•3mo ago

I doubt nuxtjs/device could work with cache without significant refactoring. the concept of the module is to return unique info on a per-request basis, and setting cache route rules strips headers and shares a response across requests.

brunomgmateusOP•3mo ago

Thank you. I assumed that, but I'm also guessing that, being a fairly used scenario, there would be some way of bailing some components from cache. Thanks anyway (happy that it wasn't a dumb question 🙂

Gaming

Programming

Is it possible to exclude a component from a cached route?