wetr3 / nuxt-elastic-cache

Flexible fully transparent cache middleware for Nuxt3 SSR rendering with Redis support

nuxt-elastic-cache

Flexible fully transparent cache middleware for Nuxt3 SSR rendering with Redis support

Quick Setup

1. Add nuxt-elastic-cache dependency to your project

# Using pnpm
pnpm add -D nuxt-elastic-cache

# Using yarn
yarn add --dev nuxt-elastic-cache

# Using npm
npm install --save-dev nuxt-elastic-cache

2. Add nuxt-elastic-cache to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-elastic-cache'
  ],
  elasticCache: {
    enabled: true,
    storage: {
      type: 'redis',
      redis: {
        url: 'redis://localhost:6379',
        /* Or */
        host: 'localhost',
        port: 6379,
        username: '..',
        password: '..',
        db: 0
      },
    },
    pages: [
      /*
       * Powered by https://github.com/isaacs/minimatch
       * Also supports RegExp
      */
      '/about/*',
      '/about/**/*ending'
    ],
    key (req) {
      return `c-${yourCustomLogic(req)}`
    }
  },
})

Configuration

Top level configuration

Option	Type	required	Description	Default
enabled	boolean	No	To enable/disable the SSR cache	true
storage	Storage	No	Config storage for cache	undefined
pages	string|RegExp| Array<string| RegExp>	No	Pages to be cached	[]
key	(req: IncomingMessage) => string | false	No	Can be used to generate custom key. Return falsy value to bypass cache	(req) => req.url

Storage configuration

Option	Type	Required	Description	Default
type	'memory' | 'redis'	Yes	Cache storage	'memory'
memory.ttl	number	No	Number in seconds to store page in cache	1 hour
memory.max	number	No	Max number of pages to store in cache. If limit is reached, least recently used page is removed	500
redis.url	string	No	String to Redis instance. This option has priority over options below.	undefined
redis.ttl	number	No	Number in seconds to store page in cache	1 hour
redis.host	string	No	Redis instance host	undefined
redis.port	number	No	Redis instance port	undefined
redis.username	string	No	Redis instance username	undefined
redis.password	string	No	Redis instance password	undefined
redis.db	number	No	Redis instance db	undefined

That's it! You can now use nuxt-elastic-cache in your Nuxt app ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Caveat

important security warning: don't load secret keys such as user credential on the server for cached pages. this is because they will cache for all users!