1.0.7 • Published 5 years ago
memcache-component-cache v1.0.7
memcache-component-cache
Nuxt module to cache components in memcache.
Setup
- Add the memcache-component-cache package to your dependencies with npm or yarn:
# With npm
npm install memcache-component-cache --save
# With yarn
yarn add memcache-component-cache
- Add the module to your
nuxt.config.js
and configure the memcache connection:
{
modules: [
// Simple usage, memcache at localhost:6379, TTL at 15 minutes
'memcache-component-cache',
// With custom TTL: 60 minutes
['memcache-component-cache', { ttl: 1000 * 60 * 60 }],
//With custom memcache connection
['memcache-component-cache', {
server: '192.168.0.102:11211'
}],
//With custom memcache connection and TTL
['memcache-component-cache', {
server: '192.168.0.102:11211',
ttl: 1000 * 60 * 60
}],
]
}
This module uses memcached, and is compatible with all the memcached connection modes (TLS, sentinel...).
This means, the memcache
module option takes the same parameters as the memcached
object.
Follow the memcached connection documentation to know more about the possible options.
Cache a component
To cache a component, you need only 2 things:
- Your component must have a unique name
- Your component must have a
serverCacheKey
function
Example:
<template>
<div>
<p>{{ item.message }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
serverCacheKey: (props) => props.item.id + '::' + props.item.last_updated,
props: ['item']
}
</script>
Follow the Vue.js SSR Component Level Caching documentation for more informations about when cacheing your components.