React-Query中suspense与enabled:false的SSR兼容性问题解析

问题背景

在React-Query(vue-query)的使用过程中，开发者发现当结合SSR(服务器端渲染)时，如果查询配置中设置了enabled: false，调用suspense()方法会导致无限等待的问题。这一现象特别出现在useInfiniteQuery中，而常规的useQuery则不受影响。

问题现象

当开发者尝试以下代码模式时：

const enabled = ref(false);
const { data, suspense } = useInfiniteQuery({ enabled })
await suspense()

在SSR环境下，程序会陷入无限等待状态，无法正常完成渲染。而如果将enabled设为true，则能正常执行。

技术原理

这个问题实际上是有意为之的设计决策。React-Query团队在早期版本中专门针对这种场景进行了处理，目的是满足特定的使用需求。其背后的技术考量包括：

1. SSR渲染的确定性：在服务器端渲染时，React-Query需要确保数据获取的确定性，避免部分渲染或数据不一致的情况。

2. 条件性suspense调用：开发者可以通过简单的条件判断来跳过suspense()的调用，因此当前设计同时支持了两种使用场景。

解决方案

对于需要处理enabled: false场景的开发者，可以采用以下模式：

onServerPrefetch(async () => {
    if (toValue(toValue(options)?.enabled) ?? true) {
        await ret.suspense();
    }
});

这种方案通过显式检查enabled状态来决定是否调用suspense()，从而避免了无限等待的问题。

进阶问题

随着React-Query的发展，引入了更复杂的enabled回调函数形式（接受query参数），这使得条件判断变得更加复杂。开发者需要特别注意：

1. 多层取值：当enabled是回调函数时，需要正确处理其返回值
2. 响应式处理：在Vue环境中，需要妥善处理响应式变量的取值
3. 类型安全：确保类型检查通过，避免运行时错误

最佳实践

针对这类SSR场景，建议开发者：

1. 明确区分客户端和服务器端的查询行为
2. 对于条件性查询，始终添加适当的条件判断
3. 考虑将查询配置封装为可复用的逻辑，减少重复代码
4. 在复杂场景下，编写单元测试验证SSR行为

通过理解React-Query的内部机制和合理应用这些模式，开发者可以构建出既高效又可靠的SSR应用。