Code Monkey home page Code Monkey logo

nuxt-page-cache's Introduction

@kimyvgy/nuxt-page-cache

NPM version

Page-level caching module for Nuxt.js (multi-stores).

This module is based on arash16/nuxt-ssr-cache with more features added.

Supported Stores

Installation

Install via NPM/Yarn:

# yarn
yarn add @kimyvgy/nuxt-page-cache

# or npm
npm install @kimyvgy/nuxt-page-cache

Setup

Configuration

Please activate this module in nuxt.config.js:

  1. Passing options directly
module.exports = {
    modules: [
        ['@kimyvgy/nuxt-page-cache', options],
        // ...
    ]
}
  1. Or you can provide cache property in nuxt.config.js:
module.exports = {
    modules: [
        '@kimyvgy/nuxt-page-cache',
        // ...
    ],

    cache: {
        // ...
    },
}

Page Cache Options

module.exports = {
  // ....

  modules: [
    '@kimyvgy/nuxt-page-cache',
  ],

  cache: {
    // enable page-cache module for the production only
    enabled: process.env.NODE_ENV === 'production',

    // add x-cache-status header into response:
    // MISS: The page was not found in Cache Storage
    // HIT: The page was found in Cache Storage
    // NONE: The page is not eligible for caching
    cacheStatusHeader: 'x-cache-status',

    // The name of function that can be used to set cacheStatusHeader.
    // Ex: - Express: 'set'
    //     - Connect: 'setHeader' (default of Nuxt.js)
    // setHeaderFunc: 'setHeader',

    // If you provide a version, it will be stored inside cache.
    // Later when you deploy a new version, old cache will be
    // automatically purged.
    // EX: `myapp.v${pkg.version}-build-${process.env.CI_BUILD_NUMBER}`
    version: pkg.version,

    // if you're serving multiple host names (with differing
    // results) from the same server, set this option to true.
    // (cache keys will be prefixed by your host name)
    // if your server is behind a reverse-proxy, please use
    // express or whatever else that uses 'X-Forwarded-Host'
    // header field to provide req.hostname (actual host name)
    useHostPrefix: false,

    pages: [
      // these are prefixes of pages that need to be cached
      // if you want to cache all pages, just include '/'
      '/page1', // will cache all pages: /page1*
      '/page2', // will cache all pages: /page2*

      // you can also pass a regular expression to test a path
      /^\/page3\/\d+$/,

      // to cache only root route, use a regular expression
      /^\/$/, // will cache only for homepage: /
    ],

    key(route, context) {
      // custom function to return cache key, when used previous
      // properties (useHostPrefix, pages) are ignored.
      // - return falsy value to bypass the cache
      // - return string value to cache this page with default TTL value.
      // - return { key: "your_cache_key", ttl: 84600 }
      //    to return cache key with customized TTL value.
      if (/\/articles\/.+/.test(context.req.url)) {
        return { key: context.req.url, ttl: 84600 } // 1 day for page: /articles/*
      }
    },

    // if you don't use `pages` property, you can define `isCacheable` instead
    /*
    isCacheable(route, context) {
        // custom function to decide this page that need to be cached,
        // when used the "pages" property will be ignored.
        // return falsy to bypass the cache.
    },
    */

    // cache storage configuration
    store: {
      type: 'memory',

      // maximum number of pages to store in memory
      // if limit is reached, least recently used page
      // is removed.
      max: 100,

      // number of seconds to store this page in cache,
      // default TTL value for all pages.
      ttl: 60,
    },
  },

  // ...
};

redis store

module.exports = {
  // ....
  cache: {
    // ....
    store: {
      type: 'redis',
      host: process.env.REDIS_HOST || 'localhost',
      port: process.env.REDIS_PORT || 6379,
      password: process.env.REDIS_PASSWORD,
      db: process.env.REDIS_DB,
      prefix: process.env.REDIS_PREFIX,
      ttl: 600, // seconds
      configure: [
        // these values are configured
        // on redis upon initialization
        ['maxmemory', '200mb'],
        ['maxmemory-policy', 'allkeys-lru'],
      ],
    },
  },
}

Uses cache-manager-redis under the hood.

memcached store

module.exports = {
  // ....
  cache: {
    // ....
    store: {
      type: 'memcached',
      options: {
        hosts: ['127.0.0.1:11211'],
      },
    },
  },
}

Uses cache-manager-memcached-store under the hood.

ioredis store

module.exports = {
  // ....
  cache: {
    // ....
    store: {
      type: 'ioredis',
      options: {
        hosts: ['localhost:6379'],
      },
    },
  },
}

Uses cache-manager-ioredis under the hood.

multi cache (layered)

module.exports = {
  // ....
  cache: {
    // ....
    store: {
      // multi cache stores pages in all caches
      // later tries to read them in sequential order
      // in this example it first tries to read from memory
      // if not found, it tries to read from redis
      type: 'multi',
      stores: [
        { type: 'memory', /* ... */ },
        { type: 'redis', /* ... */ },
      ],
    },
  },
}

Notes

  • version property can define at root-level of nuxt.config.js or inside module options.
  • version value must be uniqued for each release to make sure the cached pages are pured after deploying to production. Your code changed -> content hash changed -> assets URL changed. I recommend to use CI build number if you are using CI/CD.

License

MIT

nuxt-page-cache's People

Contributors

kimyvgy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

nuxt-page-cache's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.