发布于 由admin

阐述 Vue SSR 或 Nuxt.js 应用的缓存策略，例如页面缓存、数据缓存和服务端渲染缓存。

各位朋友，晚上好！我是老码，今天咱们来聊聊Vue SSR和Nuxt.js应用中的缓存策略，保证让你的服务器不再瑟瑟发抖，响应速度嗖嗖起飞！

首先，咱们得明白一个道理：缓存这玩意儿，说白了就是用空间换时间。把一些计算结果或者数据存起来，下次再用的时候直接取，省得再算一遍，就像咱们小时候背课文，背熟了就不用每次都从头开始念了。

在Vue SSR和Nuxt.js的世界里，缓存种类可不少，咱们一一细说。

一、页面缓存：让用户感觉嗖的一下就加载完了

页面缓存，顾名思义，就是把整个页面的HTML内容缓存起来。当用户再次访问同一个页面时，服务器直接返回缓存的HTML，不用再经过服务端渲染，速度那叫一个快！

  1. HTTP缓存（浏览器缓存）

    这个是老生常谈了，但也是最基础的。咱们可以通过设置HTTP响应头来告诉浏览器缓存页面。

    • Cache-Control: 这个头是缓存界的扛把子，可以控制缓存的行为。
      • public: 允许浏览器和中间缓存服务器（如CDN）缓存。
      • private: 只允许浏览器缓存。
      • max-age=seconds: 缓存的有效期，单位是秒。
      • no-cache: 每次使用缓存前都必须向服务器验证。
      • no-store: 彻底禁止缓存。
    • Expires: 指定缓存过期的时间，是HTTP/1.0时代的产物，已经被Cache-Control取代，但为了兼容老版本，可以一起设置。
    • ETag: 页面的唯一标识，服务器根据页面内容生成。
    • Last-Modified: 页面最后修改的时间。

    示例（Node.js）：

    const express = require('express');
const app = express();

app.get('/', (req, res) => {
 // 设置缓存头
 res.set({
   'Cache-Control': 'public, max-age=3600', // 缓存1小时
   'Expires': new Date(Date.now() + 3600000).toUTCString()
 });
 res.send('<h1>Hello, SSR!</h1>'); // 假设这是服务端渲染的HTML
});

app.listen(3000, () => {
 console.log('Server listening on port 3000');
});

    工作原理：

    • 当浏览器第一次访问/时，服务器返回HTML，并设置了Cache-Control和Expires。
    • 浏览器会将HTML缓存起来。
    • 在1小时内，如果用户再次访问/，浏览器会直接从缓存中读取HTML，而不会向服务器发送请求。
    • 超过1小时后，浏览器会向服务器发送请求，验证缓存是否过期。如果未过期，服务器返回304 Not Modified，浏览器继续使用缓存。

  2. CDN缓存

    CDN（内容分发网络）是一种分布式缓存系统，可以将你的页面缓存到全球各地的服务器上，用户访问时会从离他最近的服务器获取内容，大大提高了访问速度。

    使用方法：

    • 将你的网站接入CDN服务。
    • 配置CDN缓存规则，例如哪些文件需要缓存，缓存时间等等。

  3. Nuxt.js的nuxt.config.js配置

    Nuxt.js提供了一些配置选项，可以方便地设置HTTP缓存。

    • render.static: 将动态路由预渲染成静态HTML文件，非常适合内容不经常变化的页面。

    示例：

    // nuxt.config.js
export default {
 router: {
   extendRoutes(routes, resolve) {
     routes.push({
       path: '/about',
       component: resolve(__dirname, 'pages/about.vue'),
       static: true // 预渲染/about页面
     })
   }
 },
 generate: {
   dir: 'dist', // 生成的静态文件目录
   static: true
 }
}

    这个例子中，/about页面会被预渲染成静态HTML文件，并保存在dist目录下。

二、数据缓存：减轻数据库压力，提升API响应速度

数据缓存，就是把从数据库或者API获取的数据缓存起来，避免重复请求，减轻服务器压力。

  1. 服务端缓存（内存缓存、Redis等）

    服务端缓存是指在服务器端存储数据的缓存。

    • 内存缓存： 速度最快，但容量有限，适合缓存访问频率高、数据量小的内容。可以使用Node.js的Map对象或者lru-cache等库。
    • Redis： 高性能的键值对数据库，可以持久化存储，适合缓存各种类型的数据。

    示例（使用Redis）：

    const redis = require('redis');
const client = redis.createClient();

client.on('error', (err) => {
 console.log('Redis Client Error', err);
});

async function getDataFromDB(key) {
 // 模拟从数据库获取数据
 return new Promise((resolve) => {
   setTimeout(() => {
     const data = `Data from DB for key: ${key}`;
     resolve(data);
   }, 500); // 模拟数据库查询延迟
 });
}

async function getDataWithCache(key) {
 return new Promise((resolve, reject) => {
   client.get(key, async (err, cachedData) => {
     if (err) {
       console.error(err);
       reject(err);
       return;
     }

     if (cachedData) {
       console.log(`Data found in cache for key: ${key}`);
       resolve(cachedData);
     } else {
       console.log(`Data not found in cache for key: ${key}, fetching from DB...`);
       const data = await getDataFromDB(key);
       client.set(key, data, 'EX', 60); // 缓存60秒
       resolve(data);
     }
   });
 });
}

// 使用示例
(async () => {
 const data1 = await getDataWithCache('user:123');
 console.log('Data 1:', data1);

 const data2 = await getDataWithCache('user:123'); // 从缓存中获取
 console.log('Data 2:', data2);

 client.quit(); // 关闭 Redis 连接
})();

    代码解释：

    • getDataWithCache函数首先尝试从Redis中获取数据。
    • 如果Redis中存在数据，则直接返回。
    • 如果Redis中不存在数据，则从数据库获取数据，并将数据缓存到Redis中，设置过期时间为60秒。

  2. 客户端缓存（localStorage、sessionStorage、IndexedDB）

    客户端缓存是指在浏览器端存储数据的缓存。

    • localStorage: 永久存储，除非用户手动清除。
    • sessionStorage: 会话存储，当浏览器关闭时数据会被清除。
    • IndexedDB: 浏览器提供的NoSQL数据库，可以存储大量结构化数据。

    示例（使用localStorage）：

    function getDataWithCache(key, fetchData) {
 try {
   const cachedData = localStorage.getItem(key);
   if (cachedData) {
     console.log(`Data found in localStorage for key: ${key}`);
     return Promise.resolve(JSON.parse(cachedData));
   } else {
     console.log(`Data not found in localStorage for key: ${key}, fetching from API...`);
     return fetchData()
       .then(data => {
         localStorage.setItem(key, JSON.stringify(data));
         return data;
       });
   }
 } catch (error) {
   console.error("Error accessing localStorage:", error);
   return fetchData(); // 如果 localStorage 访问出错，直接从 API 获取
 }
}

// 使用示例
async function fetchDataFromAPI() {
 // 模拟从API获取数据
 return new Promise((resolve) => {
   setTimeout(() => {
     const data = { name: 'John Doe', age: 30 };
     resolve(data);
   }, 300); // 模拟API请求延迟
 });
}

(async () => {
 const data1 = await getDataWithCache('user:profile', fetchDataFromAPI);
 console.log('Data 1:', data1);

 const data2 = await getDataWithCache('user:profile', fetchDataFromAPI); // 从 localStorage 中获取
 console.log('Data 2:', data2);
})();

    代码解释：

    • getDataWithCache函数首先尝试从localStorage中获取数据。
    • 如果localStorage中存在数据，则直接返回。
    • 如果localStorage中不存在数据，则调用fetchData函数从API获取数据，并将数据缓存到localStorage中。

  3. Vuex持久化

    如果你的Vuex store中存储了一些需要持久化的数据，可以使用vuex-persistedstate等插件将数据保存到localStorage或者sessionStorage中。

    安装：

    npm install vuex-persistedstate --save

    使用：

    // store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
   count: 0
 },
 mutations: {
   increment (state) {
     state.count++
   }
 },
 plugins: [createPersistedState()]
})

    这个例子中，count状态会被自动保存到localStorage中。

三、服务端渲染缓存：减少服务器压力，提升首屏渲染速度

服务端渲染缓存是指在服务器端缓存服务端渲染的结果，避免重复渲染。

  1. 页面片段缓存

    只缓存页面中的一部分内容，例如组件或者数据。

    示例（使用vue-server-renderer）：

    const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const LRU = require('lru-cache');

const cache = new LRU({
 max: 1000, // 最大缓存数量
 maxAge: 1000 * 60 * 15 // 缓存15分钟
});

const app = new Vue({
 template: `<div>
   <h1>{{ message }}</h1>
   <expensive-component></expensive-component>
 </div>`,
 data: {
   message: 'Hello, SSR!'
 },
 components: {
   'expensive-component': {
     template: '<div>This is an expensive component.</div>',
     serverCacheKey: props => {
       return 'expensive-component:' + props.id
     },
     props: ['id']
   }
 }
});

app.$options.components['expensive-component'].props = ['id']

module.exports = function(context) {
 const cacheKey = 'page:' + context.url;

 return new Promise((resolve, reject) => {
   const hit = cache.get(cacheKey);
   if (hit) {
     console.log('Cache hit!');
     resolve(hit);
     return;
   }

   renderer.renderToString(app, context, (err, html) => {
     if (err) {
       console.error(err);
       reject(err);
       return;
     }

     cache.set(cacheKey, html);
     resolve(html);
   });
 });
};

    代码解释：

    • expensive-component组件定义了serverCacheKey函数，用于生成缓存键。
    • vue-server-renderer会自动缓存expensive-component组件的渲染结果。

  2. 整页缓存

    缓存整个页面的渲染结果。

    示例（使用vue-server-renderer）：

    const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const LRU = require('lru-cache');

const cache = new LRU({
 max: 1000, // 最大缓存数量
 maxAge: 1000 * 60 * 15 // 缓存15分钟
});

const app = new Vue({
 template: `<div><h1>{{ message }}</h1></div>`,
 data: {
   message: 'Hello, SSR!'
 }
});

module.exports = function(context) {
 const cacheKey = 'page:' + context.url;

 return new Promise((resolve, reject) => {
   const hit = cache.get(cacheKey);
   if (hit) {
     console.log('Cache hit!');
     resolve(hit);
     return;
   }

   renderer.renderToString(app, context, (err, html) => {
     if (err) {
       console.error(err);
       reject(err);
       return;
     }

     cache.set(cacheKey, html);
     resolve(html);
   });
 });
};

    代码解释：

    • LRU是一个缓存库，用于存储渲染结果。
    • renderToString函数会将Vue实例渲染成HTML字符串。
    • 如果缓存中存在HTML字符串，则直接返回。
    • 如果缓存中不存在HTML字符串，则渲染Vue实例，并将结果缓存起来。

  3. Nuxt.js的cache配置

    Nuxt.js提供了一个cache配置，可以方便地启用服务端渲染缓存。

    // nuxt.config.js
export default {
 cache: {
   max: 1000,
   maxAge: 1000 * 60 * 15
 }
}

    这个配置会启用服务端渲染缓存，最大缓存数量为1000，缓存时间为15分钟。

四、缓存策略选择：根据场景选择合适的策略

选择合适的缓存策略需要根据具体的应用场景来决定。

缓存类型 优点 缺点 适用场景
HTTP缓存 简单易用，浏览器自动处理 缓存控制粒度较粗，无法精确控制 静态资源，不经常变化的页面
CDN缓存 全球加速，减轻服务器压力 需要购买CDN服务，配置较为复杂 静态资源，需要全球加速的网站
服务端缓存 减轻数据库压力，提升API响应速度 需要维护缓存，数据一致性问题 频繁访问的数据，需要快速响应的API
客户端缓存 离线访问，提升用户体验 容量有限，安全性问题 用户信息，不敏感的数据
SSR缓存 提升首屏渲染速度，改善SEO 实现较为复杂，需要考虑缓存失效问题 需要SEO优化，对首屏渲染速度要求高的网站

五、缓存失效：缓存的生命周期管理

缓存失效是指缓存数据过期或者被删除。合理的缓存失效策略可以保证缓存数据的有效性。

  • 过期时间： 设置缓存数据的过期时间，过期后缓存自动失效。
  • 手动失效： 当数据发生变化时，手动删除缓存。
  • LRU（Least Recently Used）： 当缓存达到最大容量时，删除最近最少使用的数据。

六、总结：缓存是优化性能的利器

缓存是优化Vue SSR和Nuxt.js应用性能的利器，但也是一把双刃剑。合理的缓存策略可以显著提升应用性能，但错误的缓存策略可能会导致数据不一致或者缓存污染。

希望今天的分享能帮助大家更好地理解和使用缓存，让你的应用飞起来！ 感谢大家的聆听！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注