Next.js Unstable Cache：为动态应用提供精细的缓存控制

Next.js 彻底改变了 Web 开发，为构建高性能和可扩展的应用程序提供了强大的功能。其核心优势之一是其强大的缓存机制，允许开发人员优化数据获取和渲染，以获得更流畅的用户体验。虽然 Next.js 提供了多种缓存策略，但 unstable_cache API 提供了一种全新级别的精细化控制，使开发人员能够根据其动态应用程序的特定需求定制缓存行为。本文将深入探讨 unstable_cache API，探索其功能、优势和实际应用。

理解 Next.js 中的缓存

在深入研究 unstable_cache 之前，有必要了解 Next.js 中的不同缓存层。Next.js 利用多种缓存机制来提高性能：

全路由缓存： Next.js 可以在边缘或 CDN 中缓存整个路由，包括 HTML 和 JSON 数据。这确保了对同一路由的后续请求能够从缓存中快速响应。
数据缓存： Next.js 会自动缓存数据获取操作的结果。这可以防止冗余的数据获取，从而显著提高性能。
React 缓存 (useMemo, useCallback): React 的内置缓存机制，如 useMemo 和 useCallback，可用于记忆化昂贵的计算和组件渲染。

虽然这些缓存机制功能强大，但它们可能并不总是能为复杂的动态应用程序提供所需的控制级别。这就是 unstable_cache 发挥作用的地方。

介绍 `unstable_cache` API

Next.js 中的 unstable_cache API 允许开发人员为单个数据获取操作定义自定义缓存策略。它提供了对以下方面的精细控制：

缓存持续时间 (TTL)： 指定数据在失效前应缓存多长时间。
缓存标签： 为缓存数据分配标签，以便您可以使特定的数据集失效。
缓存键生成： 自定义用于识别缓存数据的键。
缓存重新验证： 控制缓存应何时重新验证。

该 API 被认为是“不稳定的”，因为它仍在开发中，并可能在未来的 Next.js 版本中发生变化。然而，它为高级缓存场景提供了宝贵的功能。

`unstable_cache` 的工作原理

unstable_cache 函数接受两个主要参数：

一个获取或计算数据的函数： 该函数执行实际的数据检索或计算。
一个选项对象： 该对象指定缓存选项，如 TTL、标签和键。

这是一个如何使用 unstable_cache 的基本示例：

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // 模拟从 API 获取数据
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`] }
  )();
}

export default async function Page({ params }: { params: { id: string } }) {
  const data = await getData(params.id);
  return {data.value};
}

在这个例子中：

getData 函数使用 unstable_cache 来缓存数据获取操作。
unstable_cache 的第一个参数是一个异步函数，模拟从 API 获取数据。我们增加了一个 1 秒的延迟来演示缓存的好处。
第二个参数是一个用作键的数组。该数组中任何项的更改都将使缓存失效。
第三个参数是一个对象，它将 tags 选项设置为 ["data", `item:${id}`]。

`unstable_cache` 的主要功能和选项

1. 生存时间 (TTL)

revalidate 选项（在早期的实验版本中称为 `ttl`）指定缓存数据被视为有效的最长时间（以秒为单位）。超过此时间后，缓存将在下一次请求时重新验证。

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // 模拟从 API 获取数据
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`], revalidate: 60 } // 缓存 60 秒
  )();
}

在这个例子中，数据将被缓存 60 秒。 60 秒后，下一个请求将触发重新验证，从 API 获取新数据并更新缓存。

全局考量： 在设置 TTL 值时，请考虑数据更新的频率。对于频繁更改的数据，较短的 TTL 是合适的。对于相对静态的数据，较长的 TTL 可以显著提高性能。

2. 缓存标签

缓存标签允许您对相关的缓存数据进行分组并集体使它们失效。当某条数据的更新影响到其他相关数据时，这非常有用。

import { unstable_cache, revalidateTag } from 'next/cache';

async function getProduct(id: string) {
  return unstable_cache(
    async () => {
      // 模拟从 API 获取产品数据
      await new Promise((resolve) => setTimeout(resolve, 500));
      const product = { id: id, name: `Product ${id}`, price: Math.random() * 100 };
      return product;
    },
    ["product", id],
    { tags: ["products", `product:${id}`] }
  )();
}

async function getCategoryProducts(category: string) {
  return unstable_cache(
    async () => {
      // 模拟按类别从 API 获取产品
      await new Promise((resolve) => setTimeout(resolve, 500));
      const products = Array.from({ length: 3 }, (_, i) => ({ id: `${category}-${i}`, name: `Product ${category}-${i}`, price: Math.random() * 100 }));
      return products;
    },
    ["categoryProducts", category],
    { tags: ["products", `category:${category}`] }
  )();
}

// 使所有产品和特定产品的缓存失效
async function updateProduct(id: string, newPrice: number) {
  // 模拟更新数据库中的产品
  await new Promise((resolve) => setTimeout(resolve, 500));

  // 使该产品和产品类别的缓存失效
  revalidateTag("products");
  revalidateTag(`product:${id}`);

  return { success: true };
}

在这个例子中：

getProduct 和 getCategoryProducts 都使用了 "products" 标签。
getProduct 还使用了一个特定的标签 `product:${id}`。
当调用 updateProduct 时，它会使用 revalidateTag 使所有带有 "products" 标签的数据以及特定产品的缓存失效。

全局考量： 使用有意义且一致的标签名称。考虑创建一个与您的数据模型相符的标签策略。

3. 缓存键生成

缓存键用于识别缓存数据。默认情况下，unstable_cache 会根据传递给函数的参数生成一个键。但是，您可以使用 unstable_cache 的第二个参数（一个用作键的数组）来自定义键的生成过程。当数组中的任何项发生变化时，缓存就会失效。

import { unstable_cache } from 'next/cache';

async function getData(userId: string, sortBy: string) {
  return unstable_cache(
    async () => {
      // 模拟从 API 获取数据
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { userId: userId, sortBy: sortBy, value: `Data for user ${userId}, sorted by ${sortBy}` };
      return data;
    },
    [userId, sortBy],
    { tags: ["user-data", `user:${userId}`] }
  )();
}

在这个例子中，缓存键基于 userId 和 sortBy 参数。这确保了当这两个参数中的任何一个发生变化时，缓存都会失效。

全局考量： 确保您的缓存键生成策略是一致的，并考虑到所有影响数据的相关因素。考虑使用哈希函数从复杂的数据结构中创建唯一的键。

4. 手动重新验证

revalidateTag 函数允许您手动使与特定标签关联的数据缓存失效。当您需要响应并非由用户请求直接触发的事件（例如后台作业或 webhook）来更新缓存时，这非常有用。

import { revalidateTag } from 'next/cache';

async function handleWebhook(payload: any) {
  // 处理 webhook 负载

  // 使相关数据的缓存失效
  revalidateTag("products");
  revalidateTag(`product:${payload.productId}`);
}

全局考量： 策略性地使用手动重新验证。过度使缓存失效会抵消缓存的好处，而失效不足则可能导致数据陈旧。

`unstable_cache` 的实际用例

1. 更新不频繁的动态内容

对于动态内容不经常变化的网站（例如，博客文章、新闻文章），您可以使用带有较长 TTL 的 unstable_cache 来长时间缓存数据。这可以减少后端的负载并缩短页面加载时间。

2. 用户特定数据

对于用户特定数据（例如，用户个人资料、购物车），您可以使用包含用户 ID 的缓存键来配合 unstable_cache。这确保了每个用户都能看到自己的数据，并且当用户数据发生变化时，缓存会失效。

3. 对陈旧数据有容忍度的实时数据

对于显示实时数据的应用程序（例如，股票价格、社交媒体信息流），您可以使用带有较短 TTL 的 unstable_cache 来提供近乎实时的更新。这在对最新数据的需求与缓存带来的性能优势之间取得了平衡。

4. A/B 测试

在 A/B 测试期间，缓存分配给用户的实验变体以确保一致的体验非常重要。可以使用 unstable_cache 来缓存所选的变体，并将用户 ID 作为缓存键的一部分。

使用 `unstable_cache` 的好处

提高性能： 通过缓存数据，unstable_cache 减少了后端的负载并缩短了页面加载时间。
降低后端成本： 缓存减少了对后端的请求数量，从而可以降低您的基础设施成本。
增强用户体验： 更快的页面加载时间和更流畅的交互带来了更好的用户体验。
精细化控制： unstable_cache 提供了对缓存行为的精细控制，允许您根据应用程序的特定需求进行定制。

注意事项和最佳实践

缓存失效策略： 制定一个明确的缓存失效策略，以确保在数据发生变化时更新缓存。
TTL 选择： 根据数据更新的频率和您的应用程序对陈旧数据的敏感度，选择合适的 TTL 值。
缓存键设计： 仔细设计您的缓存键，以确保它们是唯一且一致的。
监控和日志记录： 监控您的缓存性能，并记录缓存命中和未命中，以识别潜在问题。
边缘缓存 vs. 浏览器缓存： 考虑边缘缓存 (CDN) 和浏览器缓存之间的差异。边缘缓存是所有用户共享的，而浏览器缓存是针对每个用户的。根据数据类型和您的应用程序要求选择合适的缓存策略。
错误处理： 实施强大的错误处理机制，以优雅地处理缓存未命中并防止错误传播给用户。考虑使用备用机制在缓存不可用时从后端检索数据。
测试： 全面测试您的缓存实现，以确保其按预期工作。使用自动化测试来验证缓存失效和重新验证逻辑。

`unstable_cache` vs. `fetch` API 缓存

Next.js 也通过 fetch API 提供了内置的缓存功能。默认情况下，Next.js 会自动缓存 fetch 请求的结果。但是，unstable_cache 提供了比 fetch API 缓存更大的灵活性和控制力。

以下是两种方法的比较：

功能	`unstable_cache`	`fetch` API
对 TTL 的控制	可通过 `revalidate` 选项明确配置。	由 Next.js 隐式管理，但可以通过 `fetch` 选项中的 `revalidate` 选项来影响。
缓存标签	支持缓存标签，用于使相关数据失效。	没有内置的缓存标签支持。
缓存键定制	允许使用一个值数组来自定义缓存键，该数组用于构建键。	定制选项有限。键派生自 fetch URL。
手动重新验证	支持使用 `revalidateTag` 进行手动重新验证。	对手动重新验证的支持有限。
缓存粒度	允许缓存单个数据获取操作。	主要侧重于缓存 HTTP 响应。

总的来说，对于默认缓存行为已足够满足需求的简单数据获取场景，请使用 fetch API 缓存。对于需要对缓存行为进行精细控制的更复杂场景，请使用 unstable_cache。

Next.js 缓存的未来

unstable_cache API 代表了 Next.js 缓存在功能方面向前迈出的重要一步。随着 API 的发展，我们可以期待看到更强大的功能和在管理数据缓存方面更大的灵活性。跟上 Next.js 缓存在最新发展对于构建高性能和可扩展的应用程序至关重要。

结论

Next.js 的 unstable_cache API 为开发人员提供了前所未有的对数据缓存的控制，使他们能够优化动态应用程序的性能和用户体验。通过了解 unstable_cache 的功能和优势，您可以利用其强大功能来构建更快、更具可扩展性和响应更迅速的 Web 应用程序。请记住要仔细考虑您的缓存策略，选择合适的 TTL 值，有效地设计缓存键，并监控您的缓存性能以确保最佳结果。拥抱 Next.js 缓存的未来，释放您 Web 应用程序的全部潜力。