服务器端组件如何清除React Cache？相关实现与原理疑问

一、React Cache 核心工作原理 #

React 的 cache 函数是专为**服务器组件（RSC）**设计的请求级缓存机制，核心特点如下：

• 缓存生命周期与单个用户请求绑定：每个请求会创建独立的缓存上下文，请求结束后缓存自动销毁，不会跨请求共享。
• 基于参数生成缓存键：比如你实现的 getSession(token)，不同的 token 值对应不同的缓存条目，相同参数的重复调用会直接返回缓存结果，避免重复查询数据库。
• 完全由 React 内部管理：和浏览器的 caches API（Service Worker 缓存）无关联，所以你之前尝试的 caches.delete(token) 必然会报错。

二、服务器端组件中缓存清除的可行方案 #

React cache 本身未提供手动清除缓存的 API，但可根据不同业务场景采用以下方案：

1. 登出场景 #

登出后用户的 token 会失效（前端清除 token 或后端标记 token 作废），下一次请求时要么无 token，要么使用新的有效 token，此时 getSession 会因参数变化触发全新的数据库查询，不会复用之前的缓存，无需额外处理。

2. 用户数据更新场景 #

• 同一个请求内需要获取最新数据：
  由于 cache 会复用同参数的调用结果，若在同一个请求流程中先调用了 getSession，更新用户数据后想获取最新信息，可编写一个不带缓存的查询函数：

  // 不带缓存的新鲜查询函数
  const getFreshSession = async (token: string) => {
    const decoded = jwt.verify(token, process.env.SECRET);
    const user_id: string = decoded.id;
    const client = await connectToDatabase();
    const user = await client.db("users").collection("users").findOne({ _id: new ObjectId(user_id), is_active: true });
    if (!user) {
      return null;
    }   
    return {
      user: {
        id: user._id.toString(),
        username: user.username,
        email: user.email,
      },
      token: token,
    };
  };
  

  更新数据后调用该函数即可拿到最新的用户信息。

• 跨请求需要获取最新数据：
  由于 React Cache 是请求级的，上一个请求的缓存会在请求结束后销毁，用户更新数据后的下一次请求，getSession 会重新查询数据库，自动获取最新数据，无需手动清除缓存。

3. 跨请求缓存需求（可选） #

如果业务需要跨多个请求共享缓存（比如减少高频数据库查询），React Cache 就不再适用，此时可改用第三方缓存工具（如 Redis），自行管理缓存的键值对，更新数据时直接删除对应缓存键即可：

// 示例：用Redis替代React Cache
import redis from './redis-client';

const getSession = async (token: string) => {
  // 先查Redis缓存
  const cachedSession = await redis.get(`session:${token}`);
  if (cachedSession) {
    return JSON.parse(cachedSession);
  }

  // 缓存不存在则查数据库
  const decoded = jwt.verify(token, process.env.SECRET);
  const user_id: string = decoded.id;
  const client = await connectToDatabase();
  const user = await client.db("users").collection("users").findOne({ _id: new ObjectId(user_id), is_active: true });
  if (!user) {
    return null;
  }   
  const sessionData = {
    user: {
      id: user._id.toString(),
      username: user.username,
      email: user.email,
    },
    token: token,
  };
  // 写入Redis缓存，设置过期时间
  await redis.setEx(`session:${token}`, 3600, JSON.stringify(sessionData));
  return sessionData;
};

// 更新用户数据时清除对应缓存
const updateUser = async (token: string, updateData: any) => {
  const decoded = jwt.verify(token, process.env.SECRET);
  const user_id: string = decoded.id;
  const client = await connectToDatabase();
  await client.db("users").collection("users").updateOne({ _id: new ObjectId(user_id) }, { $set: updateData });
  // 清除Redis中的对应缓存
  await redis.del(`session:${token}`);
};

内容的提问来源于stack exchange，提问作者AlASAD WAIL