在 Nuxt 3 中实现缓存

在 Nuxt 3 中实现缓存，可以通过多种方式进行，包括 HTTP 缓存、数据缓存以及组件缓存等。以下是一些在 Nuxt 3 中实现缓存的具体方法。

1. HTTP 缓存

配置 HTTP 缓存头

可以在 nuxt.config.ts 中设置静态文件的缓存策略：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/'] // 设置要预渲染的路由
    },
    routeRules: {
      '/_nuxt/**': { headers: { 'cache-control': 'public, max-age=31536000, immutable' } }, // 缓存一年
      '/**': { headers: { 'cache-control': 'public, max-age=86400' } } // 缓存一天
    }
  }
})

2. 使用 Node.js 缓存中间件

在 Nuxt 3 中使用缓存中间件，可以显著提升 API 的响应速度和应用的整体性能。以下是两种常用的缓存中间件库：apicache 和 node-cache 的详细介绍及使用示例。

1. 使用 apicache

apicache 是一个简单的 HTTP 缓存中间件，适用于快速缓存 API 响应。

安装 apicache

npm install apicache

配置 apicache

创建一个缓存中间件并在 Nuxt 3 中使用：

// server/middleware/cache.ts
import apicache from 'apicache';
import { defineEventHandler } from 'h3';

const cache = apicache.middleware;

export default defineEventHandler((event) => {
  cache('5 minutes')(event.req, event.res, () => {
    // 如果你有其他处理逻辑可以放在这里
  });
});

在 Nuxt 3 中应用这个中间件：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    middleware: {
      // 应用自定义的中间件
      '/api/**': '~/server/middleware/cache.ts'
    }
  }
});

示例：缓存 API 路由

// server/api/data.ts
import { defineEventHandler } from 'h3';

export default defineEventHandler(async () => {
  // 模拟一个耗时的操作，比如从数据库获取数据
  await new Promise(resolve => setTimeout(resolve, 2000));
  return { data: 'Your data' };
});

这样，当请求 /api/data 路由时，第一次请求会有2秒的延迟，之后的请求在5分钟内都会被缓存，不再有延迟。

2. 使用 node-cache

node-cache 是一个内存中的缓存库，适用于缓存计算结果和其他临时数据。

安装 node-cache

npm install node-cache

配置 node-cache

在 Nuxt 3 中创建一个缓存实例：

// server/cache.ts
import NodeCache from 'node-cache';

const cache = new NodeCache({ stdTTL: 300 }); // 300秒缓存时间

export default cache;

示例：缓存 API 路由

// server/api/data.ts
import { defineEventHandler } from 'h3';
import cache from '~/server/cache';

export default defineEventHandler(async (event) => {
  const cacheKey = 'myData';
  const cachedData = cache.get(cacheKey);

  if (cachedData) {
    return cachedData;
  }

  // 模拟一个耗时的操作，比如从数据库获取数据
  const data = await new Promise(resolve => setTimeout(() => resolve({ data: 'Your data' }), 2000));

  // 存储缓存数据
  cache.set(cacheKey, data);

  return data;
});

在这个示例中，node-cache 会缓存 /api/data 路由的响应数据。第一次请求会有2秒的延迟，之后的请求在5分钟内都会返回缓存数据，不再有延迟。

3. 使用 useAsyncData 缓存 API 数据

在 Nuxt 3 中，可以使用 useAsyncData 并配置缓存选项来缓存 API 数据：

// pages/index.vue
<script setup lang="ts">
const { data } = await useAsyncData('myData', () => $fetch('/api/my-endpoint'), {
  initialCache: true,
  cacheKey: 'myDataCacheKey',
  cacheTime: 300000 // 缓存5分钟
});
</script>

<template>
  <div>
    <h1>My Data</h1>
    <pre>{{ data }}</pre>
  </div>
</template>

4. 使用 @vueuse/core 缓存

可以结合 @vueuse/core 的 useStorage 钩子进行本地存储缓存：

// Install @vueuse/core
npm install @vueuse/core

// pages/index.vue
<script setup lang="ts">
import { useStorage } from '@vueuse/core';

const cachedData = useStorage('cachedData', null);
if (!cachedData.value) {
  const { data } = await useFetch('/api/my-endpoint');
  cachedData.value = data.value;
}
</script>

<template>
  <div>
    <h1>My Cached Data</h1>
    <pre>{{ cachedData }}</pre>
  </div>
</template>

5. 缓存策略示例

假设你有一个需要缓存的 API 路由 /api/data，你可以在 server/api/data.ts 中实现：

// server/api/data.ts
import { defineEventHandler } from 'h3';
import apicache from 'apicache';

const cache = apicache.middleware;

export default defineEventHandler(async (event) => {
  cache('5 minutes')(event.req, event.res, async () => {
    // Your data fetching logic here
    return { data: 'Your data' };
  });
});

通过上述方式，你可以在 Nuxt 3 中实现多种缓存策略，从而提高应用的性能和响应速度。