nextjs 应用程序路由器中的 trpc .fetch，fetch() 是否会进行重复数据删除？

Question

服务端 initTRPC.context 上的 .fetch() 调用是否会被 nextjs 应用路由器进行重复数据删除？

来自 nextjs 文档： “在父布局与其子布局之间传递数据是不可能的。但是，您可以多次在路由中获取相同的数据，React 会自动删除重复请求，而不会影响性能。”

来自 tan-stack 文档： “Next.js 已经对使用 fetch() 的请求进行了重复数据删除，但如果您在 queryFn 中使用其他内容，或者您使用的框架不会自动对这些请求进行重复数据删除，则如上所述使用单个 queryClient 可能是有意义的，尽管重复的序列化。”

Answer 1

根据我的经验，如果您在 next.js 项目中设置 trpc，至少使用应用程序路由器，服务器端请求将不会被重复数据删除。

可以通过

npm create t3-app@latest

实现用于测试的最小工作示例应用程序。

但是，我确实找到了解决这个问题的简单方法。我们可以使用react

cache()

手动进行重复数据删除。

我通常在一个单独的文件中执行此操作，然后将缓存的数据导入我需要的所有反应服务器组件中，包括布局。

这对于在布局和页面之间共享数据特别有帮助，因为 Next.js 无法在布局中仅获取一次数据并将其作为 props 传递给子页面。

示例：

import { api } from '~/trpc/server'
import { cache } from 'react'

// example assumes this exists in your trpc router
export const userProfile = cache(api.user.profile.query)

然后在我的 RSC 文件中：

import {userProfile} from '...'

export const MyReactServerComponent: React.FC = async () => {
  const user = await userProfile
  return <div>{user.name}</div>
}