nuxt服务端数据缓存存取
时间: 2025-01-13 20:53:46 浏览: 46
### 如何在 Nuxt.js 中实现服务端数据的缓存与读取
#### 使用 `nuxt-server-init` 进行全局状态初始化并设置缓存策略
为了提高性能,在服务器端渲染 (SSR) 的过程中可以利用 Vuex 来管理应用的状态,并通过自定义中间件或插件来处理缓存逻辑。对于全局性的初始加载,推荐使用 `nuxtServerInit` 方法。
当应用程序启动时会触发此函数执行一次,适合用来预填充 store 或者设定一些默认配置项。如果希望某些 API 请求的结果能够被持久化存储以便后续页面重用,则可以在该钩子内加入相应的缓存机制[^1]。
```javascript
// store/index.js
export const actions = {
async nuxtServerInit({ commit }, { app }) {
let cachedData;
try {
// 尝试从本地文件系统或其他形式的外部缓存获取已有的响应副本
cachedData = await app.$axios.get('/api/cache');
if (!cachedData || !Object.keys(cachedData).length) throw new Error('No cache found');
console.log('Using server-side cache...');
commit('SET_GLOBAL_STATE', cachedData);
} catch (_) {
// 如果不存在有效缓存则发起实际请求并将结果保存下来供下次调用时作为缓存源
const freshData = await app.$axios.$get(process.env.API_URL);
// 更新 Vuex Store 并创建新的缓存条目
commit('SET_GLOBAL_STATE', freshData);
await app.$axios.post('/api/setCache', freshData);
}
},
};
```
#### 利用 HTTP 响应头控制浏览器级别的资源缓存行为
除了上述基于 Vuex 的解决方案外,还可以借助于标准 Web 技术如 ETag、Last-Modified 等头部字段告知客户端哪些静态资产应该长期驻留内存之中而不必每次都重新下载;同时也可针对动态生成的内容指定较短的有效期以确保及时更新显示给用户的最新版本信息[^2]。
```nginx
location /static/ {
expires max; # 设置最长过期时间
}
location ~* \.(css|js)$ {
add_header Cache-Control "public, no-transform";
}
```
阅读全文
相关推荐

















