Nuxt SSR数据缓存优化

当前nuxt版本2.14.3 

axios数据缓存 

场景

纯数据列表展示,不对列表某些值进行手动修改,比如新闻列表等数据流

 1. 安装axios-extensions扩展 https://github.com/kuitos/axios-extensions  axios-extensions 3.1.3左右  该插件将提供axios数据缓存功能 
npm i axios-extensions -S //都安装在生产中
npm i LRUCache -S   //v:4.1.5左右



2. 在自定义的axios.js插件里面对axios进行扩展
import { cacheAdapterEnhancer } from 'axios-extensions'
import LRUCache from 'lru-cache' // 为了自定义缓存配置，如果不需要，可以不使用

export default function ({ $axios, redirect }) {
  // 请求中使用了useCache: true的话，会被缓存起来以便下次直接返回从而减少服务器压力
  let defaultAdapter = $axios.defaults.adapter
  let cacheCfg = new LRUCache({
    maxAge: 1000 * 10, //有效期10s
    max: 1000 // 最大缓存数量
  })
  $axios.defaults.adapter = cacheAdapterEnhancer(defaultAdapter, { enabledByDefault: false,     
  cacheFlag: 'useCache', defaultCache: cacheCfg })
}

// 3. 在api请求时添加useCache标志即可，如在某个页面中
export default {
  asyncData ({ params,$axios}) {
    let id = params.id
    return app.$axios.get(`/getDetail/?itemId=${id}`, {useCache: true}).then(res => {
      return (res && res.data) || {}
    })
  }
  //注意 只能使用$axios.get() //这种请求方式才能获得缓存功能
  //$axios({method:"get"})//无法获得缓存效果
}

注意点:

只有get请求可以被缓存。默认不启用缓存机制

如果需要对数据进行修改,需要对数据进行深克隆,否则,会影响到缓存数据

const res= awite $axios.get('xxxxxxx',{useCache:true}) 
//返回数据res={name:1,code:123}
delete res.code 
return {data:res} //第一次数据请求完成

//此时缓存中res为{name:1},delete影响了缓存中数据

深拷贝一份请求的结果
const result= JSON.parse(JSON.stringify(res)) //深拷贝一份,用这份数据delete不会影响缓存

 

组件缓存

1. 不能依赖全局状态 比如依赖vuex的数据变更
2. 不能对其他上下文组件有影响,
3. 页面级添加serverCacheKey后,asyncData还是会执行,不过他的created等钩子函数将不再执行

场景

适用于单纯的v-for的数据展示列表 并且是根据某个属性id变更后才需要更新的列表

serverCacheKey: props => props.item.id + '::' + props.item.last_updated //属性id 加上时间戳


其他静态组件,永远不可能有更新的,比如页脚foouter,官网顶部header等静态内容,可以直接返回一个静态字符串,

 

 

 配置

npm i @nuxtjs/component-cache -S //下载组件缓存插件,官方社区提供

// 2. 在nuxt.config.js中配置模块

{
  modules: [
    ['@/nuxtjs/component-cache', { maxAge: 1000 * 60 }]
  ]
}


// 3. 按照vue ssr组件缓存的规则，在需要缓存的组件中，添加serverCacheKey,必须定义name,
// 在某vue组件中
<script>
export default {
  name: 'cache-com',//需要定义唯一的name字段
  props: {
    post: {
      type: String,
      required: true
    }
  },
  serverCacheKey: props => props.post,//由这个属性决定,如果变更,则组件将重新渲染,常量则会被静态化
}
</script>



serverCacheKey: () => Math.floor(Date.now() / (1000 * 60)),//一分钟刷新一次

组件缓存，只是缓存了dom结构，如created等钩子中的代码逻辑并不会被缓存，如果其中逻辑会影响上下边变更，是不会再执行的，此种组件也不适合缓存