背景
在ssr的页面中经常需要根据数据生成页面的情况，这种时候如果服务端可以将数据缓存起来就可以直接生成页面，减少首屏加载时间。
基本流程
对于不需要及时更新的数据，可以将请求的结果在服务端进行缓存几分钟，在过期前使用缓存的数据，过期后再重新请求接口，而不需要每次客户端的页面请求都向接口服务器获取相同的数据。
结合需求考虑，在访问量不大、缓存数据较少的情况下，不使用redis，直接使用内存存储数据。减少开发工作。
cache-request-1.jpg
要点
Nuxt
根据需求，代码应在服务端进行页面构建前判断是否存在缓存与数据请求，而nuxt提供了Router Middleware路由中间件。
Router Middleware可以在页面显示前执行函数，其中首次访问的页面渲染是在服务端进行的，后面通过前端路由跳转的函数有客户端执行。所以在执行逻辑前需要判断process.server确保当前的运行环境。
Router Middleware还提供了页面context作为函数传参，其中包含了vuex的store实例，通过store就可以将数据传递给客户端。
lru-cache
lru-cache是一个用于缓存的js库，通过这个库，我们可以实现设置数据新鲜度与大小限制，对于短时间内的并发请求，还会进行合并成一个请求。
实践
// @/utils/cache.js
const LRUCache = require('lru-cache')
const { getList } = require('./get-list')
function createCache() {
const cache = new LRUCache({
max: 500, // 大小限制
ttl: 1000 * 60 * 2, // 过期时间
fetchMethod: getList // 请求接口函数，通过promise返回值
})
return cache
}
module.exports = { createCache }
// @/middleware/initData.js
import { createCache } from "@/utils/cache"
const cache = createCache()
export default async function({ store }) {
// // 只在服务器初始化获取blog列表
if (process.server) {
const list = await cache.fetch('list')
store.commit('setList', list)
}
}
// @/nuxt.config.js
module.exports = {
...
router: {
middleware: ['initData']
},
...
}
注意
在本地通过NODE_ENV=development启动服务时，可能出现缓存无效的问题，这是因为在开发环境下，中间件函数不以单例模式运行，每次请求都会重新初始化lru-cache。但在生产环境不存在这个问题。
如果想要开发环境也统一使用缓存可以通过module自定义模块，在应用构建时创建lru-cache实例，再利用addServerMiddleware方法，创建一个接口用于获取缓存。路由中间件修改成从这个接口中获取数据。
