How can static assets be cached?

[dbzx10299]

How can I cache a static asset such as a font or a stylesheet? I know there are route rules, but I am a bit confused how to go about doing this since when the build step is ran the output has a different hash.

[manniL]

Everything in _nuxt, which are all static assets, is cached by default already through the route rules ☺️

[dbzx10299]

So would we be able to create a route rule something like this then?

export default defineNuxtConfig({
  routeRules: {
    '/_nuxt': {
        headers: {
          'cache-control': ''
        }
    }
  }
})

It‘s nice nuxt does this by default but I would like to know a bit better how this could be done manually.

The above example isn‘t the best I guess but I‘m wondering hypothetically if we had to cache an asset manually in the public folder how that might look.

[manniL]

More or less like:

export default defineNuxtConfig({
  routeRules: {
    '/_nuxt/**': {
        headers: {
          'cache-control': 'whatever-you-want-here'
        }
    }
  }
})

Related: #15465

[dbzx10299]

Got it, thanks!

[dbzx10299]

One more question regarding this automatic caching that nuxt performs for assets, does nuxt automatically set the cache headers for a netlify runtime?

[manniL]

It should. You can check it in your dev tools.

[dbzx10299]

Netlify has some of their own cache headers so I guess those would be set as you specified earlier with route rules

https://docs.netlify.com/platform/caching/#supported-cache-control-headers