React 数据缓存协议：利用服务器端 cache 函数实现单次请求生命周期内的请求去重 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位好，欢迎来到“React 高级架构研讨会”。

今天我们不聊那些花里胡哨的 Hooks，也不聊怎么用 useMemo 优化那一点点微不足道的计算。今天我们要聊的是“懒汉与勤劳工人的故事”，以及如何用一种名为 cache 的魔法，让你的服务器从“勤劳的搬砖工”变成“精明的调度员”。

主题是：React 数据缓存协议：利用服务器端 cache 函数实现单次请求生命周期内的请求去重。

准备好了吗？让我们开始这场关于“少干活、多吃饭”的技术探索。

第一章：痛苦的真相——当你的服务器在“内卷”

想象一下，你正在开发一个电商大促的仪表盘。

这个仪表盘非常豪华，它由三个组件组成：

左侧边栏：显示当前登录用户的头像和昵称。
顶部导航栏：同样显示当前登录用户的昵称。
核心数据卡片：显示订单统计、库存预警、以及……当前用户的VIP等级。

这三个组件都运行在 React Server Components (RSC) 的世界里。它们在同一个 HTML 生成周期内被渲染。

场景还原：

用户刷新了页面，浏览器向你的服务器发送了一个请求。服务器开始工作，它就像一个不知疲倦的工头，同时接到了三个任务：

工头 A：“嘿，给我查一下 ID 为 1001 的用户！”
工头 B：“嘿，给我查一下 ID 为 1001 的用户！”
工头 C：“嘿，给我查一下 ID 为 1001 的用户！”

于是，服务器内部的数据库引擎响了三声：

“收到，正在查询……”
“收到，正在查询……”
“收到，正在查询……”

数据库老爷爷叹了口气，吐出了三份数据。工头们把这三份数据打包，塞进了同一个 HTML 包里，发回了浏览器。

问题出在哪？

这就好比你点了一份宫保鸡丁，你还没坐下，你的三个朋友也点了一份宫保鸡丁。结果厨师为了你们五个人的饭，不得不杀了一只鸡，切了三次肉，炒了三盘菜。虽然最后菜都端上桌了，但这中间浪费了多少油、火、以及厨师那宝贵的脑细胞？

在网络层面，这就是重复请求。你的服务器在同一个请求周期内，发出了 3 次完全相同的数据库查询。这不仅浪费了带宽，更浪费了宝贵的计算资源。

如果这是一个高并发的场景，服务器可能瞬间就被这毫无意义的重复劳动给压垮了。

第二章：救星登场——cache() 函数

React（具体来说，是 Next.js App Router）早就看穿了这种“内卷”行为。它给了我们一个秘密武器：cache()。

这个函数是什么？它是一个高阶函数。

它的核心逻辑非常简单粗暴：把一个函数变成一个“懒加载的、有记忆的”函数。

当你用 cache() 包裹一个函数后，这个函数就变成了一个“记忆宫殿”。如果你在同一个请求周期内，用相同的参数调用它两次，它绝不会再次执行函数体，而是直接把第一次执行的结果（或者 Promise）拿给你。

这就是我们今天要讲的“单次请求生命周期内的请求去重”。

第三章：Hello World——最简单的例子

让我们先看一段代码，感受一下什么叫“从地狱到天堂”的跨越。

假设我们有一个模拟的数据库查询函数：

// db.ts
let callCount = 0;

// 普通函数：每次调用都会执行
export async function getUserNormal(id: string) {
  callCount++;
  console.log(`[普通模式] 第 ${callCount} 次调用 getUserNormal(${id})`);

  // 模拟网络延迟和数据库查询
  await new Promise(resolve => setTimeout(resolve, 100));

  return {
    id,
    name: `User ${id}`,
    role: 'Normal User'
  };
}

现在，我们在一个 Server Component 里，疯狂地调用它：

// Page.tsx
import { getUserNormal } from './db';

export default async function Dashboard() {
  // 假设这是两个组件渲染时触发的调用
  const userA = await getUserNormal('123');
  const userB = await getUserNormal('123');

  return (
    <div>
      <h1>Dashboard</h1>
      <p>First call result: {userA.name}</p>
      <p>Second call result: {userB.name}</p>
    </div>
  );
}

当你刷新页面时，你会看到控制台输出：
[普通模式] 第 1 次调用 getUserNormal(123)
[普通模式] 第 2 次调用 getUserNormal(123)

看到了吗？两次调用，两次查询。 浪费！

现在，让我们使用 cache() 来拯救世界。

// db.ts
import { cache } from 'react';

// 记忆宫殿模式
export const getUserCached = cache(async (id: string) => {
  console.log(`[缓存模式] 第 1 次调用 getUserCached(${id})`);

  // 模拟网络延迟
  await new Promise(resolve => setTimeout(resolve, 100));

  return {
    id,
    name: `User ${id}`,
    role: 'Cached User'
  };
});

在组件中调用：

// Page.tsx
import { getUserCached } from './db';

export default async function Dashboard() {
  const userA = await getUserCached('123');
  const userB = await getUserCached('123');

  return (
    <div>
      <h1>Dashboard</h1>
      <p>First call result: {userA.name}</p>
      <p>Second call result: {userB.name}</p>
    </div>
  );
}

现在，当你刷新页面时，控制台只会输出一次：
[缓存模式] 第 1 次调用 getUserCached(123)

奇迹发生了！ 第二次调用时，cache 函数内部发现：“哦，参数是 123，之前存过，直接把那个 Promise 返回给你就行，别再执行函数体了。”

这就是去重。这就是性能优化。

第四章：深入原理——cache 函数的内部世界

很多同学可能会问：“这玩意儿到底是怎么做到的？它是怎么知道我用了相同的参数？”

让我们稍微揭开一点黑盒。cache() 函数返回的其实是一个包装函数。

当你写 const cachedFn = cache(fn) 时，Next.js 做了以下几件事（伪代码）：

创建一个 Map（哈希表）：这个 Map 存储在内存中，专门用于这个请求周期。

包装函数：

function cachedFn(...args) {
  // 1. 生成参数的哈希值（把对象序列化成字符串，把基本类型直接拼接）
  const key = generateHash(args);

  // 2. 检查 Map 里有没有这个 key
  if (this.cacheMap.has(key)) {
    console.log('命中缓存！');
    // 3. 如果有，直接返回之前存的 Promise
    return this.cacheMap.get(key);
  }

  // 4. 如果没有，执行原始函数
  const promise = fn.apply(this, args);

  // 5. 把这个 Promise 存入 Map
  this.cacheMap.set(key, promise);

  // 6. 返回 Promise
  return promise;
}

关键点来了：

生命周期：这个 Map 是在服务器进程的一个请求周期内存在的。当用户请求结束，服务器进程可能重启，或者这个 Map 被清空。所以，它不是持久化的 HTTP 缓存（比如 Redis），而是内存级缓存。
Promise 复用：注意第 5 步，存入 Map 的是 promise。这意味着，如果函数正在执行中（还没返回结果），第二个调用者会拿到同一个 Promise。这保证了数据的一致性。

第五章：依赖地狱与 Promise.all 的终结

在 cache() 出现之前，如果你有两个函数互相依赖，你不得不手动处理 Promise 的等待，或者使用 Promise.all。

例如：

getUser(id) 返回用户信息。
getUserOrders(userId) 需要用户 ID 来查订单。

在普通的 async/await 中，这很容易写错：

// 危险的写法
async function getUserOrders(userId) {
  const user = await getUser(userId); // 等待
  const orders = await getOrders(user.id); // 等待
  return orders;
}

// 如果 getUser 被调用了两次，getOrders 也会被调用两次！

但有了 cache()，Next.js 会帮你自动搞定这些复杂的依赖关系。

场景：

const getUser = cache(async (id: string) => {
  console.log('Fetching user...');
  await new Promise(r => setTimeout(r, 500));
  return { id, name: 'Alice' };
});

const getUserOrders = cache(async (userId: string) => {
  console.log('Fetching orders...');
  await new Promise(r => setTimeout(r, 500));
  return [1, 2, 3];
});

async function ComplexComponent() {
  const user = await getUser('123');
  const orders = await getUserOrders(user.id); // 注意：这里 user.id 是 '123'

  return <div>{user.name} has {orders.length} orders</div>;
}

当你调用 getUserOrders('123') 时：

Next.js 识别出 getUserOrders 内部调用了 getUser。
Next.js 检查 cache 的内部逻辑。
它会自动确保 getUser('123') 只执行一次，即使它被调用了两次。
getUserOrders 会等待 getUser 的结果出来后，再执行自己的逻辑。

这就是“请求去重”的高级形态：依赖去重。

你不需要手动写 Promise.all，也不需要担心死锁或重复请求。cache 函数就像一个智能交通指挥官，它自动规划了数据流，确保每条路只被走一次。

第六章：实战演练——构建一个复杂的仪表盘

为了真正理解这个协议的威力，我们来构建一个稍微复杂一点的系统。假设我们正在开发一个“SaaS 企业的控制台”。

这个控制台包含以下模块：

全局状态模块：返回当前租户的全局配置（如品牌色、时区）。
用户信息模块：返回当前登录用户的基本信息。
财务报表模块：需要租户 ID 和用户 ID 来计算报表。
最近活动模块：只需要用户 ID。

代码实现：

// services/dashboard.ts
import { cache } from 'react';

// 1. 数据库模拟层
const mockDB = {
  getTenant: async (id: string) => {
    console.log(`[DB] Querying Tenant ${id}`);
    await new Promise(r => setTimeout(r, 100));
    return { id, name: 'Acme Corp', currency: 'USD' };
  },
  getUser: async (id: string) => {
    console.log(`[DB] Querying User ${id}`);
    await new Promise(r => setTimeout(r, 100));
    return { id, email: '[email protected]', role: 'admin' };
  },
  getReports: async (tenantId: string, userId: string) => {
    console.log(`[DB] Querying Reports for Tenant ${tenantId}, User ${userId}`);
    await new Promise(r => setTimeout(r, 200));
    return { total: 12000, growth: 5.2 };
  },
  getActivities: async (userId: string) => {
    console.log(`[DB] Querying Activities for User ${userId}`);
    await new Promise(r => setTimeout(r, 50));
    return [{ action: 'Login', time: '10:00' }];
  }
};

// 2. 缓存层封装
export const getTenant = cache(mockDB.getTenant);
export const getUser = cache(mockDB.getUser);
export const getReports = cache(mockDB.getReports);
export const getActivities = cache(mockDB.getActivities);

// 3. 业务逻辑层（使用缓存函数）
export async function getDashboardData(tenantId: string, userId: string) {
  // 这里没有 await，因为 cache 函数会自动处理依赖
  const tenant = getTenant(tenantId);
  const user = getUser(userId);
  const reports = getReports(tenantId, userId);
  const activities = getActivities(userId);

  // 等待所有缓存函数完成
  const [tenantData, userData, reportsData, activitiesData] = await Promise.allSettled([
    tenant,
    user,
    reports,
    activities
  ]);

  return {
    tenant: tenantData.status === 'fulfilled' ? tenantData.value : null,
    user: userData.status === 'fulfilled' ? userData.value : null,
    reports: reportsData.status === 'fulfilled' ? reportsData.value : null,
    activities: activitiesData.status === 'fulfilled' ? activitiesData.value : null,
  };
}

组件调用：

// app/dashboard/page.tsx
import { getDashboardData } from '@/services/dashboard';

export default async function DashboardPage() {
  const data = await getDashboardData('t-1', 'u-1');

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Dashboard</h1>

      <div className="grid grid-cols-2 gap-4">
        <div className="border p-4">
          <h2>Tenant</h2>
          <p>{data.tenant?.name}</p>
        </div>

        <div className="border p-4">
          <h2>User</h2>
          <p>{data.user?.email}</p>
        </div>

        <div className="border p-4">
          <h2>Reports</h2>
          <p>Total: ${data.reports?.total}</p>
        </div>

        <div className="border p-4">
          <h2>Recent Activity</h2>
          <ul>
            {data.activities?.map((act, i) => (
              <li key={i}>{act.action}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

执行结果分析：

当你访问这个页面时，控制台会输出：

[DB] Querying Tenant t-1
[DB] Querying User u-1
[DB] Querying Reports for Tenant t-1, User u-1
[DB] Querying Activities for User u-1

只有 4 次数据库查询！

如果不用 cache()，这个组件内部如果有 10 个地方都调用了 getUser，或者 getReports 依赖了 getUser，数据库查询次数可能会变成 10 次甚至更多。现在，通过 cache 函数，我们实现了逻辑上的去重，无论你的代码逻辑多么复杂，只要数据来源相同，服务器就只查一次。

第七章：进阶技巧——如何“欺骗” cache 函数？

有时候，你可能会遇到一种情况：虽然参数看起来一样，但你希望强制重新获取数据。或者，你需要处理复杂的对象作为参数。

1. 参数的序列化

cache 函数使用 JSON.stringify 来生成 key。
这意味着，如果你传入一个对象：

const getUser = cache(async (id: number) => { ... });

// 这两个调用被认为是不同的！
// 因为 "1" != "1.0" (数字和字符串的序列化结果不同)
await getUser(1); 
await getUser("1");

建议：始终传递简单类型（string, number, boolean）。如果你必须传对象，确保它们是简单的数据结构。

2. 强制重新获取

默认情况下，cache 函数在请求周期内是“贪婪”的。如果你在同一个页面里调用它两次，第二次会直接命中缓存。

如果你在同一个组件里，想确保数据是最新的（虽然这违背了 cache 的初衷，但在某些动态场景下可能需要），你需要打破 cache 的链路。

// 这是一个技巧：每次都创建一个新的 cache 函数实例
function makeFreshCache() {
  return cache(async (id: string) => {
    // 模拟数据库查询
    return { id };
  });
}

// 在组件里
export default async function Page() {
  // 这里会再次查询数据库！
  const freshUser = await makeFreshCache()('123');

  return <div>{freshUser.id}</div>;
}

警告：这种做法会消耗大量资源。除非你有充分的理由，否则不要这样做。

3. 并发控制

cache 函数天生支持并发控制。
如果函数正在执行，后续的并发请求会共享同一个 Promise。这意味着，如果数据库查询耗时 1 秒，即使有 100 个组件同时请求这个数据，数据库也只会被查询一次，且只等待 1 秒。

第八章：性能对比——数据不会撒谎

为了让大家更直观地感受，我们来做一个小实验。

实验目标：计算斐波那契数列的第 50 项（这是一个非常消耗 CPU 的操作，模拟数据库查询）。

方案 A：普通函数

async function fib(n: number): Promise<number> {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}

方案 B：cache 函数

const fibCached = cache(fib);

测试代码：

import { fib, fibCached } from './fib';

// 模拟 10 个组件同时请求
const promises = Array(10).fill(null).map((_, i) => fibCached(50));
const results = await Promise.all(promises);

console.log(results); // 所有结果都正确

结果：

普通函数：CPU 暴力计算了 10 次。耗时巨大。这就是“重复劳动”。
cache 函数：CPU 只计算了 1 次。耗时极小。这就是“去重”。

第九章：常见误区与坑点

作为资深专家，我必须提醒大家，cache 函数虽然好用，但也不是万能的神药。

1. 不要缓存副作用函数

cache 函数是为了缓存纯数据获取逻辑。如果你在里面写了写文件、发邮件、或者修改全局状态的代码，那就不对了。

// 错误示范
export const sendWelcomeEmail = cache(async (email: string) => {
  // 坏主意：每次调用都发邮件
  await axios.post('/api/send-email', { email });
});

2. 缓存键的陷阱

如前所述，cache 依赖参数生成 key。
如果你传入了一个包含动态属性的对象：

const getData = cache(async (config: { id: string, timestamp: number }) => { ... });

// 每次调用都会不同，因为 timestamp 变了
await getData({ id: '1', timestamp: Date.now() });

这可能导致缓存失效。如果你的数据确实需要根据时间戳变化，请考虑在参数中显式传递时间戳，或者确保你的对象是稳定的。

3. Next.js 版本问题

cache 函数是 Next.js 15+ (App Router) 引入的。如果你还在用 Next.js 13 或 14 的 Pages Router，这个 API 是不存在的。请务必确认你的环境。

第十章：总结——拥抱“懒”的艺术

好了，今天的讲座接近尾声。让我们回顾一下今天学到的核心内容。

问题：在 React Server Components 中，多个组件同时请求数据会导致服务器端的重复计算和数据库查询，这是巨大的性能浪费。
工具：cache() 函数是 Next.js 提供的内存级缓存协议。
原理：它在请求周期内拦截函数调用，通过参数哈希匹配，复用之前的 Promise 结果。
优势：
- 自动去重：无需手动编写 Promise.all 或去重逻辑。
- 依赖管理：自动处理函数间的依赖关系。
- 并发优化：多个并发请求只执行一次。
用法：简单地将函数包裹在 cache() 中即可。

专家寄语：

写代码的最高境界不是“更努力地工作”，而是“更聪明地工作”。

在 React 的世界里，cache() 函数就是那个让你偷懒的智慧源泉。它教导我们要尊重数据，尊重计算资源。不要让服务器为了同一个数据跑断腿。

当你下次写代码时，如果发现两个函数在请求同一个数据，请毫不犹豫地给他们戴上 cache() 的项圈。让你的代码像一条优雅的游鱼，在数据的海洋里穿梭，而不是像一头笨重的野牛，在泥潭里反复打滚。

现在，去重构你的 Dashboard，去拯救那些被重复查询折磨的数据库吧！

谢谢大家！