!nuxt-multi-cache banner

Nuxt Multi Cache

This module provides several layers of server-side caching for your Nuxt app:

- SSR component caching (caches rendered markup of a component)
- Route caching (pages, API routes)
- Data Caching (generic cache for anything)
- CDN cache control headers (e.g. Cloudflare, Fastly, Varnish)
- API for cache management
- Cache tag based invalidation

Documentation -
NPM

It is compatible with Nuxt 3 and Nuxt 4.

Features

$3

Cache data directly in your Nuxt app or Nitro event handlers using
useDataCache:

``typescript
const { value, addToCache } = await useDataCache('weather')
if (value) {
return value
}

const response = await $fetch('/api/getWeather')
await addToCache(response)

return response
`

$3

Use the wrapper component to cache the markup of the default
slot:

`vue

`

The component is only rendered once and its markup cached. Afterwards the markup
is directly returned.

$3

Cache rendered pages or custom API responses:

`vue

`

$3

Manage the cacheability for the current response. This will set the correct
cache control and cache tags headers for Cloudflare, Fastly and other cache
providers:

`vue

`

The state is managed inside the current request and can be changed for the
entire duration of the request. The headers are generated right before the
response is sent.

$3

The optional API provides endpoints to manage the caches.

`bash [curl]
curl -X POST -i \
-H "x-nuxt-multi-cache-token: hunter2" \
--data '["Navbar::de--chf"]' \
http://localhost:3000/__nuxt_multi_cache/purge/component
``

Why?

Does your Nuxt app serve thousands of pages from a CMS? Does it have tens of
thousands of requests per day? Does the data change frequently? Does rendering a
single page require fetching data from multiple APIs? If you've answered any of
these questions with "yes", then this module might be for you.

I work fulltime on building frontends with Nuxt for large CMS sites. Rendering a
single page might require up to 10 API calls to get all the data: Menu, footer,
translations, route, page data, user state, additional data... It all adds up
and doing that for every request can quickly become a bottleneck. Maybe you can
work around this problem by getting all the data in a single API call, but I
didn't like to have components dependent on global state.

Instead my solution was to cache the API responses locally on the server. Either
for a fixed amount of time, like 5 minutes, or until the cache entry is being
invalidated. In addition, I cache components that appear on most pages, like
menu or footer.

The hardest thing in IT is cache invalidation, so I also added a way to
invalidate cache entries by key or using cache tags.