useQueries 失去了并行查询数据的能力，因为 Next.js 要求服务器组件是异步的

Question

该应用程序由 Next.js 运行。

我有一个 useQueries 钩子：

    const userQueries = useQueries({
        queries: user.contacts.map((contactId: string) => ({
            queryKey: ['contact', contactId],
            queryFn: () => getUserById(contactId),
        }))
    });

以及 api.ts 文件中的函数“getUserById”：

export async function getUserById(userId: string) {
    const supabase = createClient();
    let {data} = await supabase
        .from('users')
        .select()
        .eq('id', userId);

    return data && data[0]

}

我发现当我以这种方式加载数据时，它会顺序加载而不是并行加载。

我尝试将 api 函数设置为非异步，以便每个请求都不会等待前一个请求，但 Next.js 禁止执行没有“async”前缀的服务器操作。有办法解决这个问题吗？

Answer 1

在 Reddit 上得到了该问题的答案。显然，next.js 服务器操作是串行执行的，而不是并行执行的。因此，可以通过使用 next.js 的 fetch 客户端从 API 路由获取数据来解决问题。