React.js中缓存数据的最优方案是什么？如何仅在数据库变更时更新缓存？

优先选择成熟请求状态管理库（开箱即用支持缓存失效） #

React 生态内的 TanStack Query（原 React Query）和 SWR 已经原生封装了完整的缓存、去重、失效逻辑，是目前的最优选择，不用手动处理大量边缘场景：

• 基础缓存配置：将缓存新鲜时间 staleTime 设置为 Infinity，即可实现缓存永久不过期，不会主动重新发起拉取请求，仅在你手动触发时才会更新缓存。
  代码示例（TanStack Query）：

import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 全局配置缓存规则
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity, // 缓存永久有效，不主动重发请求
      cacheTime: 1000 * 60 * 60 * 24, // 缓存保留24小时，可自定义
      retry: 2, // 失败自动重试次数
    },
  },
});

// 拉取数据的自定义钩子，相同queryKey会自动复用缓存
const useLargeDataset = () => {
  return useQuery({
    queryKey: ['largeDataset'], // 缓存的唯一标识
    queryFn: () => fetch('/api/large-data').then(res => res.json()),
  });
};

// 根组件注入配置
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourPageComponent />
    </QueryClientProvider>
  )
}

• 仅数据库变更时更新缓存的两种实现方式：
  1. 实时推送方案（实时性最高）：后端配合用 WebSocket 或者 Server Sent Events (SSE) 推送数据变更事件，前端收到事件后手动触发对应缓存失效重拉。
     代码示例：

  useEffect(() => {
    // 监听服务端数据变更推送
    const eventSource = new EventSource('/api/data-change-notify');
    eventSource.onmessage = (event) => {
      if (event.data === 'largeDataset_updated') {
        // 失效对应缓存，自动拉取最新数据更新缓存
        queryClient.invalidateQueries({ queryKey: ['largeDataset'] });
      }
    };
    return () => eventSource.close();
  }, [queryClient]);
  

  2. 版本校验方案（改造成本最低）：后端给数据集额外提供一个轻量的版本/哈希查询接口，前端定时/按需拉取版本号和本地缓存版本对比，不一致时再更新全量缓存，接口开销几乎可以忽略。
     代码示例：

  // 校验数据版本的轻量接口，仅返回版本号，响应体<1KB
  const fetchDataVersion = async () => {
    const res = await fetch('/api/large-data/version');
    return res.text();
  };
  
  useEffect(() => {
    // 每5分钟校验一次版本，可根据业务需求调整间隔
    const checkTimer = setInterval(async () => {
      const latestVer = await fetchDataVersion();
      const cachedVer = localStorage.getItem('largeDataset_version');
      if (latestVer !== cachedVer) {
        queryClient.invalidateQueries({ queryKey: ['largeDataset'] });
        localStorage.setItem('largeDataset_version', latestVer);
      }
    }, 1000 * 60 * 5);
    return () => clearInterval(checkTimer);
  }, [queryClient]);
  

无第三方依赖的原生实现方案 #

如果项目体积敏感不想引入额外依赖，可以用 React Context + IndexedDB 手动实现：

• 用 Context 统一存储缓存数据，全局共享避免多组件重复请求
• 大数据量不要存在 localStorage（仅5M存储上限），用 IndexedDB 做持久化缓存，支持GB级存储
• 同样配合版本校验或者服务端推送逻辑，仅数据变更时更新 IndexedDB 存储，再同步到 Context 供组件消费
  注意手动实现需要额外处理并发请求去重、缓存过期清理、请求异常回退等边缘场景，开发成本更高

额外优化建议 #

• 首次加载可以配合分页、分片、虚拟滚动等逻辑，不要一次性拉取全量数据，降低首次加载耗时
• 服务端开启 ETag 缓存，前端请求自动带 If-None-Match 头，数据未变更时服务端直接返回304状态，无需返回全量响应体
• 半静态数据可以额外加一层 Service Worker 缓存，支持离线访问旧数据

内容的提问来源于stack exchange，提问作者Ilyes Elayeb