Introduction

nuxt-multi-cache is the ultimate server-side caching module for Nuxt 3. It greatly improves performance for Nuxt apps that have a lot of dynamic content (think of large CMS sites or user generated content). But even if you just have a few dozen pages you can increase average performance.

• Several cache backends (memory, redis, Cloudflare KV) via unstorage
• Fully modular, pick whatever feature you need
• Cache invalidation API
• Minimal impact on client side bundle and performance
• Works in SSR (server-side rendering) and SSG (static site generation)
• Large test coverage

Setup

Step 1: Install

Install the module using your preferred package manager.

npm install --save nuxt-multi-cache

Step 2: Configure

Add the module to your Nuxt config.

export default defineNuxtConfig({
  modules: ['nuxt-multi-cache'],
})

By default the module does not enable a single feature, you have to manually define which you'd like to use.

Component Cache

Cache rendered markup of components on the server. Ideal for complex, deeply nested components like menus or footers.

<template>
  <div>
    <RenderCacheable>
      <Navbar />
    </RenderCacheable>
  </div>
</template>

Route Cache

Dynamically cache pages and API routes.

useRouteCache((helper) => {
  helper.setMaxAge(3600).setCacheable()
})

Data Cache

Generic cache for anything that can be stringified.

const { value, addToCache } = await useDataCache('weather')

CDN Cache Control

Dynamically set Cache-Control and Cache-Tag headers for Cloudflare, Fastly and other services.

useCDNHeaders((helper) => {
  helper
    .public()
    .setNumeric('maxAge', 21600)
    .setNumeric('staleIfError', 43200)
    .addTags(['one', 'two'])
})