聊聊http缓存中的Stale-While-Revalidate

// shell 示例
# curl -I -X GET https://www.eavan.dev/
HTTP/2 200 
accept-ch: Sec-CH-Prefers-Color-Scheme
cache-control: s-maxage=21600, stale-while-revalidate=31514400
content-type: text/html; charset=utf-8
critical-ch: Sec-CH-Prefers-Color-Scheme
date: Tue, 25 Mar 2025 09:22:13 GMT
etag: "108p1n79obtz16"
vary: Sec-CH-Prefers-Color-Scheme, RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch, Accept-Encoding
x-nextjs-cache: HIT
x-nextjs-prerender: 1
x-nextjs-stale-time: 4294967294
x-powered-by: Next.js, Payload

import { unstable_cache } from 'next/cache';

const cachedFn = unstable_cache(
  async (arg1, arg2) => {
    // ... 昂贵的数据获取操作 ...
    return data;
  },
  ['my-unique-key-part'], // keyParts: 用于生成缓存键
  {
    revalidate: 60,         // 缓存有效期（秒）或 false
    tags: ['tag1', 'tag2'], // 缓存标签，用于按需重新验证
  }
);

// reactQuery 示例伪代码

// --- API 模拟 ---
// 假设这是一个获取用户数据的 API
let serverData = { id: 1, name: "初始用户", timestamp: Date.now() };
let requestCounter = 0;

async function fetchUserData(userId) {
  requestCounter++;
  console.log(`[React Query] 发起API请求 #${requestCounter} 获取用户 ${userId}...`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟网络延迟
  serverData.timestamp = Date.now(); // 更新时间戳，表示数据更新了
  return { ...serverData, fetchedBy: `Request ${requestCounter}` };
}

// --- React 组件 ---
import { useQuery, QueryQuery({
    queryKey: ['user', userId], // 查询的唯一键
    queryFn: () => fetchUserData(userId), // 获取数据的函数
    staleTime: staleTimeConfig, // <--- 关键参数：数据被认为是新鲜的时长
    // gcTime: 5 * 60 * 1000, // 缓存数据在非活跃状态下保留的时长 (旧版 cacheTime)
  });

  console.log(`[React Query Component] userId: ${userId}, staleTime: ${staleTimeConfig}ms`);
  console.log(`  isLoading: ${isLoading}, isFetching: ${isFetching}`);
  console.log(`  Data:`, data);

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>错误: {error.message}</p>;

  return (
    <div>
      <h3>用户 ID: {data?.id} (StaleTime: {staleTimeConfig}ms)</h3>
      <p>名称: {data?.name}</p>
      <p>数据获取时间: {new Date(data?.timestamp).toLocaleTimeString()}</p>
      <p>由 {data?.fetchedBy} 获取</p>
      {isFetching && <p><i>后台正在更新数据...</i></p>}
      <button onClick={() => refetch()}>手动刷新</button>
    </div>
  );
}

function AppReactQueryExample() {
  const [showProfile, setShowProfile] = useState(true);
  const [userId, setUserId] = useState(1);

  return (
    <QueryClientProvider client={queryClient}>
      <h2>React Query `staleTime` 示例</h2>
      <button onClick={() => setShowProfile(!showProfile)}>
        {showProfile ? '隐藏' : '显示'} Profile (staleTime: 0)
      </button>
      <button onClick={() => setShowProfile(!showProfile)}>
        {showProfile ? '隐藏' : '显示'} Profile (staleTime: 30000)
      </button>
       <button onClick={() => setUserId(userId + 1)}>切换用户 ID</button>
      <hr />

      {/* 示例1: staleTime: 0 (默认) */}
      {/* 每次组件挂载或窗口聚焦，如果数据已存在，会立即显示缓存数据，并立即在后台发起请求更新。*/}
      {showProfile && <UserProfile userId={userId} staleTimeConfig={0} />}

      <hr style={{margin: '20px 0'}} />

      {/* 示例2: staleTime: 30000 (30秒) */}
      {/* 数据获取后的30秒内，组件挂载或窗口聚焦，会直接使用缓存中的“新鲜”数据，不会发起后台请求。*/}
      {/* 30秒后，数据变为“陈旧”，行为同 staleTime: 0 */}
      {showProfile && <UserProfile userId={userId} staleTimeConfig={30000} />}

      {/* 
        测试步骤：
        1. 初始加载，两个组件都会发起请求。
        2. 点击 "隐藏 Profile"，再点击 "显示 Profile"。
           - staleTime: 0 的组件会显示缓存并立即 isFetching。
           - staleTime: 30000 的组件 (如果在30秒内) 会直接显示缓存，isFetching 为 false。
        3. 等待超过30秒后，再切换显示。
           - staleTime: 30000 的组件现在也会显示缓存并 isFetching。
        4. 切换窗口焦点，观察行为。
        5. 点击 "切换用户 ID"，观察两个组件都重新获取数据。
      */}
    </QueryClientProvider>
  );
}

// export default AppReactQueryExample; // 在实际应用中取消注释

// useSWR 示例伪代码
// --- API 模拟 (可复用上面的 fetchUserData) ---
// async function fetchUserData(userId) { ... }

// --- React 组件 ---
import useSWR, { SWRConfig } from 'swr';
import React, { useState } from 'react';

// fetcher 函数，useSWR 需要一个全局或局部的 fetcher
const globalFetcher = async (url) => {
  const userId = url.split('/').pop(); // 从 URL 中简单提取 userId
  requestCounter++;
  console.log(`[useSWR] 发起API请求 #${requestCounter} 获取用户 ${userId}...`);
  await new Promise(resolve => setTimeout(resolve, 1000));
  serverData.timestamp = Date.now();
  return { ...serverData, id: parseInt(userId), fetchedBy: `Request ${requestCounter}` };
};


function UserProfileSWR({ userId }) {
  const { data, error, isValidating, mutate } = useSWR(
    `/api/user/${userId}`, // key 通常是请求的 URL
    globalFetcher,         // 全局或局部 fetcher
    {
      // useSWR 的选项:
      // revalidateOnFocus: true, (默认) - 窗口聚焦时重新验证
      // revalidateOnReconnect: true, (默认) - 网络重连时重新验证
      // dedupingInterval: 2000, (默认) - 在此时间内对相同 key 的请求只会发起一次
      // refreshInterval: 0, (默认) - 不轮询。如果设为例如 5000，则每5秒重新验证一次
    }
  );

  console.log(`[useSWR Component] userId: ${userId}`);
  console.log(`  isValidating: ${isValidating}`); // 相当于 React Query 的 isFetching
  console.log(`  Data:`, data);

  if (!data && !error && isValidating) return <p>加载中 (SWR)...</p>; // 初始加载
  if (error) return <p>错误 (SWR): {error.message}</p>;
  // 注意：SWR 会在后台更新时，data 仍然是旧数据，直到新数据获取成功
  // 所以我们通常直接显示 data，并通过 isValidating 指示后台活动

  return (
    <div>
      <h3>用户 ID: {data?.id} (useSWR)</h3>
      <p>名称: {data?.name}</p>
      <p>数据获取时间: {data?.timestamp ? new Date(data?.timestamp).toLocaleTimeString() : 'N/A'}</p>
      <p>由 {data?.fetchedBy} 获取</p>
      {isValidating && <p><i>(SWR) 后台正在验证/更新数据...</i></p>}
      <button onClick={() => mutate()}>手动刷新 (mutate)</button>
    </div>
  );
}

function AppSWRExample() {
  const [showProfile, setShowProfile] = useState(true);
  const [userId, setUserId] = useState(1);

  return (
    // SWRConfig 可以提供全局配置
    <SWRConfig value={{ fetcher: globalFetcher }}>
      <h2>Vercel `useSWR` 示例</h2>
      <button onClick={() => setShowProfile(!showProfile)}>
        {showProfile ? '隐藏' : '显示'} Profile (SWR)
      </button>
      <button onClick={() => setUserId(userId + 1)}>切换用户 ID (SWR)</button>
      <hr />

      {/*
        useSWR 默认行为:
        - 组件挂载时，如果缓存中没有数据，则获取数据。
        - 如果缓存中有数据，立即显示缓存数据，并在后台重新验证 (revalidate)。
        - 窗口聚焦、网络重连时也会触发重新验证。
        - `dedupingInterval` (默认2秒) 会阻止在2秒内对同一个key的重复请求。
          这意味着如果快速连续挂载多个使用相同key的组件，只有第一个会真正发起请求。
      */}
      {showProfile && <UserProfileSWR userId={userId} />}
       <hr style={{margin: '20px 0'}} />
      {showProfile && <UserProfileSWR userId={userId + 100} />} {/* 不同 key 会触发不同请求 */}


      {/*
        测试步骤：
        1. 初始加载，组件会发起请求。
        2. 点击 "隐藏 Profile"，再点击 "显示 Profile"。
           - 组件会立即显示缓存数据，并且 `isValidating` 通常会是 true (除非被 dedupingInterval 阻止)。
        3. 切换窗口焦点，观察 `isValidating` 变化。
        4. 点击 "切换用户 ID"，观察组件获取新用户的数据。
      */}
    </SWRConfig>
  );
}