在React-Query中，为何选择QueryClient.prefetchQuery而非useQuery实现缓存？

1. 非组件环境的主动预取 #

useQuery 是 React Hook，只能在组件或自定义 Hook 内调用，但 prefetchQuery 是 QueryClient 的实例方法，可以在任何 JavaScript 环境中执行：

• 比如用户hover某个跳转链接时，提前预取目标页面的数据，提升跳转后的加载速度；
• 在路由守卫、工具函数、事件回调里触发预取，无需依赖组件生命周期。

示例：

// 用户hover用户详情链接时预取数据
const handleUserLinkHover = (userId) => {
  queryClient.prefetchQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUserInfo(userId),
    staleTime: 5 * 60 * 1000, // 5分钟内视为新鲜数据
  });
};

2. 避免不必要的组件渲染 #

即使你在组件内调用 useQuery 但不使用返回值，它依然会触发组件的重新渲染（因为 Hook 内部状态更新）。而 prefetchQuery 只是静默填充缓存，不会触发任何组件渲染，性能更优：

• 应用初始化时预取全局公共数据（比如配置、字典表），用 prefetchQuery 不会让无关组件反复渲染。

3. SSR/SSG 场景的核心价值 #

这正是你提到的关键场景：

• 在服务器端渲染（SSR）或静态生成（SSG）时，useQuery 只能在组件树中使用，而 prefetchQuery 可以在页面渲染前批量预取多个组件需要的数据，然后通过 dehydrate 序列化缓存传给客户端，客户端启动后直接复用缓存，完全避免二次请求。
• 比如在 Next.js 的 getServerSideProps 或 getStaticProps 中，直接用 prefetchQuery 预取数据，再把脱水后的缓存作为 props 传给页面，客户端无需额外请求就能渲染。

示例（Next.js SSR）：

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

export async function getServerSideProps() {
  const queryClient = new QueryClient();
  
  // 预取页面所需的文章列表和用户信息
  await Promise.all([
    queryClient.prefetchQuery({
      queryKey: ['posts'],
      queryFn: fetchPostsList,
    }),
    queryClient.prefetchQuery({
      queryKey: ['currentUser'],
      queryFn: fetchCurrentUser,
    }),
  ]);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

4. 精准控制缓存生命周期 #

prefetchQuery 可以单独设置 staleTime、cacheTime 等缓存规则，和组件内的 useQuery 配置解耦：

• 比如预取的某些数据可以设置更长的缓存时间，而组件内使用时的缓存规则可以更严格，互不影响。

总结 #

useQuery 适合组件需要直接用数据渲染的场景，而 prefetchQuery 主打主动、静默、非组件环境的预取，尤其是 SSR/SSG 批量预取、交互触发的提前加载这类场景，是 useQuery 无法替代的。

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