Nuxt•2mo ago

Caching images generated by NuxtImage

I am experiencing a high server load since I started using NuxtImage, because images get generated from scratch all the time. Is there no way of caching images generated by nuxt image for a longer duration? It seems they are cached for 60 seconds only. I tried using something like

    nitro: {
        routeRules: {
            '/_ipx/**': { swr: 600 },
        }
    },

    nitro: {
        routeRules: {
            '/_ipx/**': { swr: 600 },
        }
    },

but this breaks images completely.

2 Replies

kapa.ai•2mo ago

Hi @Tackleberry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with caching images generated by NuxtImage, there are a few approaches you can consider: 1. Using routeRules: Your approach of using routeRules is on the right track, but the configuration needs to be adjusted. Instead of using swr, you should use the cache option. Here's how you can modify your configuration:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_ipx/**': { cache: { maxAge: 60 * 60 * 24 * 7 } } // Cache for 7 days
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_ipx/**': { cache: { maxAge: 60 * 60 * 24 * 7 } } // Cache for 7 days
    }
  }
})

This configuration will cache the generated images for 7 days. You can adjust the maxAge value as needed Caching route rules (https://nitro.unjs.io/guide/cache#caching-route-rules). 2. Using publicAssets: If you want to serve your images as static assets with specific caching rules, you can use the publicAssets configuration:

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        baseURL: "_ipx",
        dir: "public/_ipx",
        maxAge: 60 * 60 * 24 * 7 // 7 days
      }
    ]
  }
})

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        baseURL: "_ipx",
        dir: "public/_ipx",
        maxAge: 60 * 60 * 24 * 7 // 7 days
      }
    ]
  }
})

This will set a Cache-Control header for all assets under the _ipx path Config > Features > publicAssets (https://nitro.unjs.io/config#publicassets). 3. Pre-rendering images for static sites: If you're building a static site using nuxt generate, you can pre-render your images during the build process. This is especially useful if you have disabled server-side rendering:

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/image1.jpg',
        '/_ipx/w_140/image2.jpg',
        // Add more image routes as needed
      ]
    }
  }
})

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/image1.jpg',
        '/_ipx/w_140/image2.jpg',
        // Add more image routes as needed
      ]
    }
  }
})

This will generate the specified images during the build process, reducing server load Advanced > Static Images (https://image.nuxt.com/advanced/static-images). Remember that the exact caching strategy you choose should depend on your specific use case, considering factors like how often your images change and how much traffic your site receives. If you're still experiencing issues after implementing these solutions, you might want to consider using a CDN or a dedicated image optimization service to further reduce the load on your server. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Caching images generated by NuxtImage