在trpc项目中同时使用客户端与服务端查询的最佳实践

在Next.js应用中集成trpc时，开发者经常面临一个常见需求：如何在服务端组件中使用直接查询，同时在客户端组件中利用React Query的强大功能。本文将深入探讨这一问题的解决方案。

核心问题分析

trpc提供了两种主要的查询方式：

1. 直接客户端查询（@trpc/client）：适合服务端渲染场景
2. React Query集成（@trpc/react-query）：提供客户端状态管理能力

在Next.js应用中，理想的情况是：

• 服务端组件使用直接查询获取初始数据
• 客户端组件使用React Query进行复杂的状态管理（如无限加载分页）

解决方案比较

方案一：创建两个独立客户端

这是最直接且推荐的做法。分别创建：

1. 纯客户端实例：用于服务端直接查询
2. React Query集成实例：用于客户端状态管理

// 纯客户端实例
export const trpcClient = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: API_URL })]
});

// React Query集成实例
export const trpcReact = createTRPCReact<AppRouter>();

方案二：使用useUtils方法

trpc/react-query提供了useUtils方法，可以在客户端组件中获取原始客户端：

function ClientComponent() {
  const utils = trpc.useUtils();
  // 服务端式查询
  const directQuery = utils.client.greeting.query({name: '直接查询'});
  // React Query查询
  const reactQuery = trpc.greeting.useQuery({name: 'React Query'});
}

技术选型建议

1. 简单应用：使用useUtils方法即可满足大部分需求
2. 复杂应用：建议采用独立客户端实例的方案，代码结构更清晰
3. TypeScript支持：两种方案都能获得完整的类型提示

实现细节

对于独立客户端方案，需要注意：

1. 链接配置应保持一致
2. 可以考虑抽象创建逻辑到单独文件
3. 错误处理策略需要统一

性能考量

1. 服务端直接查询减少了客户端状态管理的开销
2. React Query提供了缓存、重试等高级功能
3. 根据实际场景选择合适的查询方式可以优化应用性能

总结

trpc的灵活性允许开发者根据具体场景选择最适合的查询方式。理解这两种模式的特点和适用场景，可以帮助开发者构建更高效、更易维护的Next.js应用。在大多数情况下，创建独立的客户端实例是最清晰、最可维护的解决方案。