N
Nuxt•3d ago
Just Simeon

Cache Policy

Heya, I am trying to set a proper cache policy for images in /public (and images generated by the nuxtimg sizes tag) and stuff in _nuxt, how would I do that?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll help you set up proper cache policies for your public images and Nuxt Image generated assets. Caching Public Images and Nuxt Image Assets For images in the /public directory and those generated by NuxtImg with the sizes attribute, you have a few options: 1. For Nuxt Image Generated Images Nuxt Image uses the IPX provider by default which handles image optimization. When using NuxtImg with the sizes attribute, it generates optimized versions of your images that are served from the /_ipx/ path. These images are automatically cached by the browser based on the response headers. You can configure caching behavior through Nitro's route rules: 
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_ipx/**': {
        cache: {
          maxAge: 60 * 60 * 24 * 7, // 7 days
          staleMaxAge: 60 * 60 * 24 * 30, // 30 days
          swr: true
        }
      }
    }
  }
})
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_ipx/**': {
        cache: {
          maxAge: 60 * 60 * 24 * 7, // 7 days
          staleMaxAge: 60 * 60 * 24 * 30, // 30 days
          swr: true
        }
      }
    }
  }
})
This configuration enables server-side SWR (stale-while-revalidate) caching for all images processed by Nuxt Image. 2. For Static Assets in Public Directory For regular images in your /public directory, you can set similar cache rules: 
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/img/**': { // Assuming your images are in public/img
        cache: {
          maxAge: 60 * 60 * 24 * 7, // 7 days
        }
      }
    }
  }
})
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/img/**': { // Assuming your images are in public/img
        cache: {
          maxAge: 60 * 60 * 24 * 7, // 7 days
        }
      }
    }
  }
})
3. For _nuxt Assets For assets in the _nuxt directory (which contains your bundled JavaScript, CSS, and other assets), you can set: 
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/**': {
        cache: {
          maxAge: 60 * 60 * 24 * 365, // 1 year
          immutable: true
        }
      }
    }
  }
})
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/**': {
        cache: {
          maxAge: 60 * 60 * 24 * 365, // 1 year
          immutable: true
        }
      }
    }
  }
})
The immutable flag tells browsers that the file will never change, which improves caching efficiency. Additional Considerations If you're using Nuxt Image with a specific provider like Vercel or AWS Amplify, they have their own caching mechanisms. For example, Vercel's Edge Network automatically optimizes images when you deploy to their platform, as mentioned in the Vercel provider documentation. If you're generating a static site, Nuxt Image will optimize and save your images locally during generation, as noted in the Static Images documentation. Remember that if you're using the dir option to change where Nuxt Image looks for source images (e.g., from public to assets/images), this might affect how caching works for certain providers: 
export default defineNuxtConfig({
  image: {
    dir: 'assets/images'
  }
})
export default defineNuxtConfig({
  image: {
    dir: 'assets/images'
  }
})
This configuration is explained in the dir configuration documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?