N
Nuxt•2w ago
lazygopher

I enabled cache with nitro but don't receive the cache-control header in response

I enabled cache for svg images through routeRules in my nuxt config 
const weekInSeconds = 60 * 60 * 24 * 7
export default defineNuxtConfig({
  routeRules: {
        "/logos/**.svg": {
            cache: {
                maxAge: weekInSeconds,
            },
        }
}
const weekInSeconds = 60 * 60 * 24 * 7
export default defineNuxtConfig({
  routeRules: {
        "/logos/**.svg": {
            cache: {
                maxAge: weekInSeconds,
            },
        }
}
I deployed my app and ran it in production mode. I don't get cache headers in response for .svg, this is what I get instead GET /logos/demo.svg HTTP/2 HTTP/2 200 alt-svc: h3=":443"; ma=2592000 content-type: image/svg+xml date: Fri, 22 Aug 2025 06:10:44 GMT etag: "7419-tX8YQdFZsQx9F2S2GbSocZDHfBw" last-modified: Thu, 21 Aug 2025 17:15:24 GMT vary: Accept-Encoding via: 1.1 Caddy content-length: 29721 Why I don't see cache-control header?
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @lazygopher. 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 knowledge sources, when you define cache rules for routes in your Nuxt config using routeRules, Nitro should automatically add cache headers (like Cache-Control) to the response for those routes in production mode. Your configuration appears correct for enabling server-side caching for SVG files: 
const weekInSeconds = 60 * 60 * 24 * 7
export default defineNuxtConfig({
  routeRules: {
    "/logos/**.svg": {
      cache: {
        maxAge: weekInSeconds,
      },
    }
  }
})
const weekInSeconds = 60 * 60 * 24 * 7
export default defineNuxtConfig({
  routeRules: {
    "/logos/**.svg": {
      cache: {
        maxAge: weekInSeconds,
      },
    }
  }
})
However, if you are not seeing the Cache-Control header in your response, here are some possible reasons based on the documentation: 1. Static Assets Handling: If your /logos/demo.svg is served as a static asset (e.g., from the public/ directory), Nitro's routeRules and caching layer do not apply. Static files are served directly by the server or CDN, and their headers are controlled by the server configuration, not by Nitro or Nuxt routeRules. Nitro's cache rules only apply to server-rendered or API routes, not to files in public/ or static/ folders [Hybrid Rendering]. 2. Reverse Proxy or CDN: If you are deploying behind a reverse proxy (like Caddy, as shown in your response headers) or a CDN, those may override or strip cache headers set by your application. You would need to check your proxy/CDN configuration to ensure it allows or forwards Cache-Control headers from your app. 3. Nitro Preset/Deployment Target: Some deployment targets or Nitro presets may handle static files differently. For example, on Vercel or Netlify, static assets may be served directly by the platform, bypassing Nitro's routeRules [Server Endpoints & Middleware]. 4. Cache Rules Only for Dynamic Routes: The Nitro caching layer and routeRules are primarily designed for dynamic routes (API endpoints, server-rendered pages). For static files, you should set cache headers at the server or CDN level. Summary:
If your SVGs are in the public/ directory, Nuxt/Nitro routeRules will not set cache headers for them. You need to configure your server (e.g., Caddy) or CDN to set the desired Cache-Control headers for static assets. If you want Nitro to handle the caching, you would need to serve the SVGs through a server route (e.g., an API endpoint), not as static files [Hybrid Rendering]. If you need further control over static asset headers, refer to your server or CDN documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?