nuxt-ssr-cache: caching not working
I tried to use it but it is not working, the component which wraps a axios call still calls the webservice. I also tried to cache all pages by using just ‘/’. any idea what could be the issue? Thank you
nuxt config:
const isProduction = (process.env.NODE_ENV === 'production')
const host = (isProduction) ? 'api.xxx.com' : 'localhost'
const scheme = (isProduction) ? 'https' : 'http'
const baseUrl = (isProduction) ? '${scheme}://${host}/rest-api' : '${scheme}://${host}:8080/vrmandat-rest-api'
export default {
env: {
api: {
host: host,
scheme: scheme,
baseUrl: baseUrl
},
payment: {
stripe: {
mode: 'test',
test: {
publicKey: 'pk_test_xxx'
},
live: {
publicKey: ''
}
}
}
},
mode: 'universal',
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://www.paypalobjects.com/api/checkout.js' }
]
},
css: [
'@/assets/styles/global.scss'
],
plugins: [
'~/plugins/axios.js',
'~/plugins/validate.js',
'~/plugins/mq.js',
'~/plugins/global.js',
'~/plugins/print.js'
],
buildModules: [
],
modules: [
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
'~/modules/nuxt-auth/lib/module/index.js',
'nuxt-i18n',
'nuxt-stripe-module',
'nuxt-ssr-cache',
],
axios: {
baseURL: '${baseUrl}/',
https: (isProduction) ? true : false,
progress: true,
debug: false
},
/*
** Build configuration
*/
build: {
// Add exception
transpile: [
'vee-validate/dist/rules'
],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
},
/*
** Router configuration
*/
router: {
middleware: [
'auth',
'auth-refresh'
]
},
/*
** Auth configuration
*/
auth: {
plugins: [
'~/plugins/auth.js'
],
redirect: {
login: '/auth/login',
logout: '/',
home: '/',
callback: '/auth/callback'
},
strategies: {
local: {
_scheme: 'local',
name: 'local',
endpoints: {
login: {
url: `${baseUrl}/auth/getAccessToken`,
method: 'post',
propertyName: false
},
refresh: {
url: '${baseUrl}/auth/refreshAccessToken',
method: 'post',
propertyName: false
},
logout: {
url: `${baseUrl}/auth/logout`,
method: 'post',
propertyName: false
},
user: {
url: '${baseUrl}/auth/user',
method: 'get',
propertyName: false
}
},
tokenRequired: true,
tokenType: 'Bearer',
tokenName: 'Authorization',
globalToken: true,
accessTokenKey: 'access_token',
refreshTokenKey: 'refresh_token',
automaticRefresh: true,
expiration: {
factor: 0.9,
timeFormat: 'seconds'
}
}
}
},
/*
** i18n configuration
*/
i18n: {
locales: [
{
code: 'en',
name: 'English',
file: 'en.json'
},
{
code: 'de',
name: 'Deutsch',
file: 'de.json'
},
{
code: 'fr',
name: 'Français',
file: 'fr.json'
},
{
code: 'it',
name: 'Italiano',
file: 'it.json'
}
],
lazy: true,
defaultLocale: 'de',
langDir: 'locales/'
},
stripe: {
version: 'v3',
publishableKey: 'pk_test_xxx'
},
cache: {
// 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 '/'
'/charts/alter',
],
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
ttl: 60,
},
},
}
package.json:
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"@nuxtjs/auth": "^4.8.4",
"@nuxtjs/axios": "^5.6.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "2.1.0",
"highcharts": "^7.2.1",
"highcharts-3d": "^0.1.7",
"highcharts-vue": "^1.3.5",
"libphonenumber-js": "^1.7.23",
"moment": "2.24.0",
"nuxt": "2.10.2",
"nuxt-i18n": "^6.0.2",
"nuxt-ssr-cache": "^1.5.1",
"nuxt-stripe-module": "^2.0.0",
"popper.js": "^1.15.0",
"v-click-outside": "^2.1.3",
"vee-validate": "^3.0.3",
"vue-html-to-paper": "^1.1.1",
"vue-mq": "^1.0.1",
"vue-multiselect": "^2.1.6",
"vue-router": "^3.1.3",
"vue-script2": "^2.1.0"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.3.1",
"vue-jest": "^4.0.0-0"
}
}
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 7
- Comments: 16 (1 by maintainers)
I had solved via this:
Hello there!
Indeed, for me it was not working either, but I think I found the reasons:
1.- If you don’t use a custom function for the cache key, remove the
key
function from the nuxt config. 2.- For some reason,req.host
andreq.hostname
can be empty, so the default cache key function won’t work. You can fix it this way. 3.- In Redis and cloud environments, most of the vendors do not allow you to use the Redis’CONFIG
(note that I also changed it to caps from the original code). So in your nuxt configuration, remove theconfigure
property.To have all these fixes, and because it looks this is not mantained anymore, I forked the repo, built it and installed my own version from my GitHub repo’s
compile
branch.its Working !
If anyone is looking for a working solution, try this package instead: https://github.com/ziaadini/nuxt-perfect-cache
This not working for me either. Any additional documentation on how to make this work @arash16