Using Cache Control in Nuxt to improve Performance

Caching is important because it improves system performance and efficiency by storing frequently accessed data or content for quick retrieval, reducing the need to regenerate or fetch information repeatedly⁠. It enhances user experience by decreasing load times and minimizing strain on backend resources⁠.

In this article, I would like to focus on introducing you to the topic of Cache Control header in Nuxt so that you can instruct the browser how it should cache certain pages to improve performance!

Enjoy!

🤔 What is Cache Control?

The Cache-Control HTTP header holds directives (instructions) for caching in both requests and responses. If a given directive is in a request, it does not mean this directive is in the response.

• Private - only cached in the client
• Public - can be also cached in the proxies
• no-store - content won't be cached
• no-cache - content can be cached but require validation from the server
• max-age - tells the browser to keep cache for a certain number of seconds

For more directives visit Developer Mozilla.

🟢 Using Cache Control in Nuxt to improve performance

Hybrid rendering allows different caching rules per route using Route Rules and decides how the server should respond to a new request on a given URL. Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer.

export default defineNuxtConfig({
  routeRules: {
    '/': {
      swr: true,
      cache: {
        maxAge: 60
      }
    },
    '/products': {
      swr: 3600
    }
  }
})

In the example above, Product pages are generated on demand, revalidates in background, cached for 1 hour (3600 seconds)

What is swr?
Stale-While-Revalidate extension adds cache headers to the server response and cache it on the server or reverse proxy for a configurable TTL (time to live). The node-server preset of Nitro is able to cache the full response. When the TTL expired, the cached response will be sent while the page will be regenerated in the background. If true is used, a stale-while-revalidate header is added without a MaxAge.

This is the most common usage of web caching in Nuxt but we can also set our own custom rules like following:

export default defineNuxtConfig({
  routeRules: {
    '/categories': {
      headers: {
        'Cache-Control': 'max-age=600 Public'
      }
   } 
})

For all available caching options, check out the documentation of Nitro here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

🙋🏼 Bonus resources

If you would like to learn more about the topic of Caching, check out following resources:

• https://dev.to/ymir/mastering-caching-in-nuxt-3-a-comprehensive-guide-22ea
• https://masteringnuxt.com/blog/writing-a-cache-composable-in-nuxt-3
• https://nuxt-multi-cache.dulnan.net/
• https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering
• https://dev.to/jacobandrewsky/leveraging-cache-in-vuejs-and-nuxtjs-4b26/edit

✅ Summary

Well done! You have just learned how to use both Nuxt Image and Nuxt Cloudinary module to deliver performant images to your user.

Take care and see you next time!

And happy coding as always 🖥️