如何在Next.js应用路由中用Effect RPC替换tRPC
内容提要
本文介绍了作者在使用Effect和tRPC进行开发项目时遇到的问题。作者发现tRPC与Effect模式转换不兼容，导致输入和输出类型无法正确推断。为了解决这个问题，作者手动进行了数据编码和解码，但这种方法容易出错。文章还介绍了Effect的RPC层和创建RPC路由的步骤，以及在客户端和服务器端处理RPC请求的方法。最后，作者建议在客户端使用自定义的HTTP客户端，并提供了一些代码示例。
延伸解读
tRPC 与 Effect 模式转换的冲突根源
tRPC 的类型推断基于验证函数的返回类型，而 Effect schema 的 decodeUnknownSync 输出可能与输入不同，因为它支持编码和解码到不同类型。这导致客户端类型与服务器端不一致，例如日期字段在客户端被推断为 Date 而非 number。手动编解码虽能解决，但易出错且分散业务逻辑。
Effect RPC 的自动编解码机制
Effect 的 @effect/rpc 层通过定义请求 schema 来发送请求，并在适当阶段自动编码和解码。这消除了手动处理的需要，减少了错误，让开发者专注于业务逻辑。创建 RPC 路由需先定义请求 schema，再实现服务处理逻辑，最后设置路由并导出 POST 函数。
客户端自定义 HTTP 客户端的必要性
在客户端，必须创建自定义 HTTP 客户端以显式传递 cookies，否则 SSR 期间身份验证将失败。通过 Effect 的 HttpClient 和 RpcResolver，可以构建客户端实例，并通过 React Context 提供，方便在组件中调用。建议将查询封装在自定义 hooks 中，以管理多个客户端。
Q&A
tRPC与Effect模式不兼容的原因是什么？
tRPC无法正确推断Effect模式的输入和输出类型，因为Effect模式的解码输出可能与输入不同。
如何创建RPC路由？
创建RPC路由的第一步是定义请求的schema，并将其放在单独的文件中，以便后端和前端都能导入。
在客户端如何处理身份验证？
在客户端需要创建自定义HTTP客户端，并显式传递cookies，以确保在SSR期间身份验证正常工作。
手动编码和解码数据的缺点是什么？
手动编码和解码数据容易出错，导致大量代码用于处理这些操作，而不是专注于核心业务逻辑。
Effect的RPC层有什么优势？
Effect的RPC层可以自动编码和解码请求，简化了前端与后端的交互过程。
如何在Next.js中设置RPC请求的处理？
需要在/api/hello/route.ts文件中导出一个POST函数，以处理RPC请求并将HTTP请求路由到RPC路由。
