⚠️ You are looking at the english version of the page. Help us translate it here.
Want to take a look at our new docs? Our new docs are now in beta. Have fun!

How to cache Vue components?

Although Vue's SSR is quite fast, it can't match the performance of pure string-based templating due to the cost of creating component instances and Virtual DOM nodes. In cases where SSR performance is critical, wisely leveraging caching strategies can greatly improve response time and reduce server load.

To avoid boilerplate, use Component Cache module for Nuxt.js. This module uses vue-server-renderer to add LRU cache support for Vue components.

Usage

  • Add @nuxtjs/component-cache dependency using Yarn or npm to your project
  • Add @nuxtjs/component-cache to modules section of nuxt.config.js
{
  modules: [
    // Simple usage
    '@nuxtjs/component-cache',

    // With options
    [
      '@nuxtjs/component-cache',
      {
        max: 10000,
        maxAge: 1000 * 60 * 60
      }
    ]
  ]
}

See component-level caching for more information.

Don't forget, that

  • Cache-able components must define a unique name option.
  • You should NOT cache components, that
    • have child components that may rely on global state.
    • have child components that produce side effects on the render context.

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us