Nuxt•2w ago

Old version keep cached after deployment

When I deploy my nuxtjs application, my users' browsers cache the old version. I build a docker image via a github CI/CD and then redeploy the Jelastic docker container behind a nginx loadbalancer. Should I also restart the nginx loadbalancer? Is any particular action required in this case?

2 Replies

kapa.ai•2w ago

Hi @Valentin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there are a few approaches you can consider to address the issue of old versions being cached after deployment in your Nuxt.js application: 1. Use a unique key for useFetch: One solution is to add a unique key to your useFetch calls. This forces a re-fetch of data when the key changes, which can be useful after a deployment. You can use Date.now() or a similar unique value for this purpose. Stack Overflow (https://stackoverflow.com/questions/77073604) suggests:

const { data: res } = await useFetch(
    "<https://your-api-endpoint.com/",>
    {
        key: Date.now(), // Add this line
        method: "GET",
        // other options...
    }
);

const { data: res } = await useFetch(
    "<https://your-api-endpoint.com/",>
    {
        key: Date.now(), // Add this line
        method: "GET",
        // other options...
    }
);

2. Implement on-demand Incremental Static Regeneration (ISR): If you're using Vercel for deployment, you can implement on-demand ISR to purge the cache for specific routes. This allows you to invalidate cached content when needed. Nitro documentation (https://nitro.unjs.io/deploy/providers/vercel#on-demand-incremental-static-regeneration-isr) provides instructions on how to set this up. 3. Configure route rules for caching: You can use Nuxt's route rules to set specific caching strategies for different routes. This allows you to control how long content is cached and when it should be revalidated. Nuxt documentation (https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering) shows how to configure this in your nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products': { swr: true },
    '/products/**': { swr: 3600 },
    // Add more rules as needed
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products': { swr: true },
    '/products/**': { swr: 3600 },
    // Add more rules as needed
  }
})

4. Handle chunk loading errors: Nuxt provides built-in support for handling chunk loading errors, which can occur when a new deployment invalidates old, hashed JS chunk URLs. By default, Nuxt will perform a hard reload when a chunk fails to load during route navigation. You can customize this behavior in your configuration. Nuxt documentation (https://nuxt.com/docs/getting-started/error-handling#errors-with-js-chunks) explains how to do this. Regarding your specific questions: 1. Restarting the nginx loadbalancer: The knowledge sources don't provide specific information about restarting an nginx loadbalancer in this context. It's possible that restarting the loadbalancer could help clear any caches it maintains, but this would depend on your specific setup. 2. Required actions: The most direct action you can take is to implement one or more of the caching strategies mentioned above, particularly adding a unique key to useFetch calls or implementing route-specific caching rules. Remember that browser caching behavior can be complex and may also be affected by your users' browser settings and network configurations. Implementing these server-side strategies should help, but you may also want to consider adding cache-busting techniques to your client-side code if the issue persists. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Old version keep cached after deployment