在线商城首页推荐商品列表数据缓存策略：SWR 优化实践

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

const HomeProductList = () => {
  // SWR配置
  const { data: products, error } = useSWR(
    '/api/home/products', // 缓存key
    fetcher,
    {
      revalidateOnMount: false, // 挂载时是否重新验证
      revalidateOnFocus: false, // 页面聚焦时是否重新验证
      revalidateOnReconnect: false, // 网络重连时是否重新验证
      dedupingInterval: 30 * 60 * 1000, // 去重间隔（30分钟）
      ttl: 30 * 60 * 1000, // 缓存过期时间（30分钟）
    }
  );

  if (error) return <div>加载失败</div>;
  if (!products) return <div>加载中...</div>;

  return (
    <div className="product-list">
      {products.map(product => (
        <ProductItem key={product.id} product={product} />
      ))}
    </div>
  );
};

export default HomeProductList;

import useSWR from 'swr';

const fetcher = async (url) => {
  console.log(`[DEBUG] 发起请求: ${url}`);
  const response = await fetch(url);
  const data = await response.json();
  console.log(`[DEBUG] 请求完成: ${url}`, data);
  return data;
};

function RecommendedProducts() {
  const { data, error, isValidating } = useSWR('/api/recommended-products', fetcher, {
    onSuccess: (data, key) => {
      console.log(`[DEBUG] SWR 成功获取数据: ${key}`, data);
    },
    onError: (error, key) => {
      console.log(`[DEBUG] SWR 获取数据失败: ${key}`, error);
    }
  });
  
  console.log(`[DEBUG] 组件渲染 - data:`, data, `isValidating:`, isValidating);
  
  if (error) {
    console.log(`[DEBUG] 渲染错误状态`);
    return <div>加载失败</div>;
  }
  
  if (!data) {
    console.log(`[DEBUG] 渲染加载状态`);
    return <div>加载中...</div>;
  }
  
  console.log(`[DEBUG] 渲染数据`, data);
  
  return (
    <div className="product-list">
      {data.products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// 全局搜索发现，项目中未实现任何调用SWR mutate的代码
// 即：当后端数据更新（如新品上架）时，前端无主动触发缓存更新的逻辑

// ... 原有代码 ...

const HomeProductList = () => {
  // 获取用户信息（从全局状态）
  const { userInfo } = useContext(UserContext);
  // 获取地域信息（从IP定位工具）
  const { regionCode } = useRegion();
  
  // 动态生成缓存key：包含用户ID、地域编码、当前小时（按小时更新推荐策略）
  const cacheKey = `/api/home/products?userId=${userInfo.id}&region=${regionCode}&hour=${new Date().getHours()}`;
  
  // 优化后的SWR配置
  const { data: products, error, mutate } = useSWR(
    cacheKey, // 动态key
    fetcher,
    {
      revalidateOnMount: true, // 组件挂载时强制重新验证（首次加载后，后续挂载仍验证）
      revalidateOnFocus: true, // 页面聚焦时重新验证（如用户切回浏览器标签）
      revalidateOnReconnect: true, // 网络重连时重新验证
      dedupingInterval: 5 * 60 * 1000, // 5分钟内合并重复请求（避免抖动）
      ttl: 5 * 60 * 1000, // 缓存5分钟后标记为"陈旧"，下次访问触发重新验证
      revalidateIfStale: true, // 若缓存陈旧，返回缓存的同时发送验证请求
      errorRetryCount: 3, // 错误重试3次
      errorRetryInterval: 1000, // 重试间隔1秒
    }
  );

  // ... 渲染代码 ...
};

export const createProductWebSocket = (onMessage) => {
  if (typeof window === 'undefined') return null; // 服务端渲染兼容
  
  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
  const ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws/product-updates`);
  
  ws.onopen = () => {
    console.log('商品更新WebSocket连接成功');
    // 连接成功后发送用户信息，便于后端推送个性化更新
    ws.send(JSON.stringify({
      type: 'subscribe',
      userId: userInfo.id,
      region: regionCode
    }));
  };
  
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    onMessage(data); // 外部传入消息处理函数
  };
  
  ws.onerror = (error) => {
    console.error('WebSocket错误:', error);
  };
  
  ws.onclose = () => {
    console.log('WebSocket连接关闭，3秒后重连');
    setTimeout(() => createProductWebSocket(onMessage), 3000); // 断线重连
  };
  
  return ws;
};

const HomeProductList = () => {
  // ... 原有SWR配置代码 ...
  
  // 初始化WebSocket，监听商品更新事件
  useEffect(() => {
    const ws = createProductWebSocket((message) => {
      if (message.type === 'product_update') {
        console.log('收到商品更新通知，触发缓存更新:', message.productId);
        // 调用SWR mutate更新缓存（第二个参数为undefined，会触发重新请求）
        mutate(cacheKey);
      }
    });
    
    return () => {
      ws?.close(); // 组件卸载时关闭连接
    };
  }, [cacheKey, mutate]);
  
  // ... 渲染代码 ...
};

import { useSWRConfig } from 'swr';

const SWRCacheMonitor = () => {
  const { cache } = useSWRConfig();
  const [cacheState, setCacheState] = useState({});
  
  // 每3秒刷新一次缓存状态
  useEffect(() => {
    const interval = setInterval(() => {
      const entries = {};
      cache.forEach((value, key) => {
        entries[key] = {
          isStale: Date.now() - value.data.timestamp > value.config.ttl, // 判断是否过期
          timestamp: new Date(value.data.timestamp).toLocaleString(),
          ttl: value.config.ttl / 1000 + 's'
        };
      });
      setCacheState(entries);
    }, 3000);
    
    return () => clearInterval(interval);
  }, [cache]);
  
  return (
    <div className="cache-monitor">
      <h3>SWR缓存监控</h3>
      <pre>{JSON.stringify(cacheState, null, 2)}</pre>
    </div>
  );
};

// 在开发环境挂载到首页
{process.env.NODE_ENV === 'development' && <SWRCacheMonitor />}

// 封装差异化SWR hooks
export const useProductSWR = (productType) => {
  // 根据商品类型返回不同配置
  const getSWRConfig = () => {
    switch (productType) {
      case 'seckill': // 秒杀商品：实时性优先
        return {
          revalidateOnFocus: true,
          revalidateOnReconnect: true,
          dedupingInterval: 1000, // 1秒去重
          ttl: 1000, // 1秒过期
          revalidateOnMount: true
        };
      case 'recommend': // 推荐商品：平衡性能与实时性
        return {
          revalidateOnFocus: true,
          revalidateOnReconnect: true,
          dedupingInterval: 30000, // 30秒去重
          ttl: 300000, // 5分钟过期
          revalidateOnMount: true
        };
      default: // 默认配置
        return {
          revalidateOnFocus: true,
          revalidateOnReconnect: true,
          dedupingInterval: 60000, // 1分钟去重
          ttl: 600000, // 10分钟过期
        };
    }
  };
  
  // 动态key（包含商品类型）
  const cacheKey = `/api/home/products?type=${productType}&userId=${userInfo.id}&region=${regionCode}&hour=${new Date().getHours()}`;
  
  return useSWR(cacheKey, fetcher, getSWRConfig());
};

// 使用方式
const { data: seckillProducts } = useProductSWR('seckill');
const { data: recommendProducts } = useProductSWR('recommend');

// 优化前：缓存未更新日志
[10:05:23] SWR: cache hit for key "/api/home/products"
[10:05:23] SWR: returning cached data (timestamp: 09:35:10)
[10:05:23] SWR: dedupingInterval not expired, skip request

// 优化后：重新验证成功日志
[14:20:15] SWR: cache hit for key "/api/home/products?type=recommend&userId=123&region=SH&hour=14"
[14:20:15] SWR: returning cached data (timestamp: 14:19:50)
[14:20:15] SWR: revalidateOnMount enabled, send revalidation request
[14:20:16] SWR: request success, update cache (new timestamp: 14:20:16)
[14:20:16] SWR: trigger re-render with new data

// WebSocket主动更新日志
[15:30:00] WebSocket: received product_update event (productId: 10086)
[15:30:00] SWR: mutate key "/api/home/products?type=recommend&userId=123&region=SH&hour=15"
[15:30:01] SWR: revalidation success, cache updated