How to change TTL when using swr in Nuxt3?

在使用 Nuxt 3 和 SWR (Stale While Revalidate) 方法时，更改数据的 TTL（Time To Live）是一个关键的考虑，以确保数据的及时更新和高效缓存。在 Nuxt 3 中，我们通常可以通过配置 SWR 钩子来实现对 TTL 的控制。

首先，确保你已经在你的 Nuxt 3 项目中正确地安装并引入了 SWR。SWR 并不是 Nuxt 3 的一部分，因此你需要单独安装它。安装 SWR 的命令通常是：

bash
npm install swr

或者：

bash
yarn add swr

如何设置和更改 TTL

SWR 的 useSWR 钩子允许你传递配置选项，包括控制数据缓存时间的参数。在 SWR 中，我们通常使用 dedupingInterval 来定义在这段时间内，如果有相同的请求被触发，则直接从缓存中返回数据，而不会再次去服务器端获取。而 revalidateOnFocus 等配置可以控制在特定情况下数据的重新校验。

下面是一个基本的例子，展示了如何在 Nuxt 3 中使用 SWR 并设置 TTL：

javascript
<template>
  <div>
    <div v-if="error">Failed to load</div>
    <div v-else-if="!data">Loading...</div>
    <div v-else>{{ data.message }}</div>
  </div>
</template>

<script setup>
import useSWR from 'swr'

const fetcher = url => fetch(url).then(res => res.json())

const { data, error } = useSWR('/api/data', fetcher, {
  dedupingInterval: 15000, // 15 秒的缓存时间
  revalidateOnFocus: false // 当窗口重新聚焦时不重新验证数据
})
</script>

在这个例子中，我们设置 dedupingInterval 为 15000 毫秒（即 15 秒）。这意味着如果两个相同的请求在 15 秒内连续发生，第二个请求将直接使用第一个请求的缓存结果，而不会去服务器重新获取数据。

综合应用

在实际应用中，你可能需要根据不同的业务需求调整这个 TTL。例如，如果你的数据是高度动态的（比如股市信息），你可能需要设置一个更短的 TTL 或者关闭缓存；而对于一些很少更新的数据（例如用户的基本信息），可以设定一个较长的 TTL。

总之，通过合理配置 SWR 的缓存策略，可以在保证数据实时性和减少服务器压力之间找到一个平衡点。这对于提升用户体验和减轻后端服务的负载都是非常有益的。