如何检测渲染是否处于水合阶段？解决useQuery的NextJS水合冲突

上下文 #

我正在编写一个暴露useQuery钩子的库：

function MyComponent() { 
  const [isLoading, data] = useQuery("query1");
}

useQuery会在本地缓存数据，因此我写了如下实现：

function useQuery(q) { 
  const [isLoading, data] = useState(() => {
     if (IndexedDBCache.has(q)) {
       return [false, IndexedDBCache.get(q)]
     }
     return [true];
  });
  useEffect(() => {
    // 订阅查询...
  })
}

问题：破坏水合过程 #

如果用户在NextJS中使用这个useQuery，会破坏水合流程。服务器端始终返回isLoading: true，但客户端可能因为命中缓存直接返回isLoading: false，导致服务端渲染内容和客户端不匹配。

需求 #

我不想要求用户只能在客户端使用useQuery，希望API更友好。想问有没有办法实现以下行为：

• 服务器端调用useQuery时，始终返回isLoading: true
• 初始水合循环中调用useQuery时，始终返回isLoading: true
• 水合循环结束后挂载useQuery时，才查询缓存并返回对应结果

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