如何将数据传递到子服务器组件而不需要道具钻探和使用上下文？

Question

React 服务器组件允许我们编写可以在服务器上渲染和选择性缓存的 UI。

这很棒，但事实证明我们不能与它们一起使用上下文。

因此我的问题 - 假设我想从 Next.js 页面级别的 API 获取一些 JSON，然后将数据传播到庞大的子组件层次结构。

怎样才能做到不用支柱钻孔污染它？我无法使用上下文 - 它只是客户端：

您正在导入需要 createContext 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

我也无法使用状态管理库 - 也仅限客户端...

什么是服务器组件的清洁解决方案？

Answer 1

我花了很多时间思考这个问题，最后想出了一个使用新的 React 缓存 API 的解决方案（这意味着数据仅在收到我们服务器的给定请求中缓存/共享，这通常是我们想要的）。

我创建了一个库，rsc-better-cache以使其易于使用。

让我知道你的想法。

使用方法如下：

// mySharedData.ts
import { createCachedPromiseGetter } from 'rsc-better-cache';

interface MyData {
  someProp: string;
}

export const myDataPromiseGetter = createCachedPromiseGetter<MyData>();

// MyReactServerComponent.tsx (React Server Component where the data is obtained)
import { myDataPromiseGetter } from './mySharedData';

const MyReactServerComponent = async (params) => {
  const myData = await fetch(`some-url/${params.id}`);
  myDataPromiseGetter().setPromiseResolution(myData);
}

// MyOtherReactServerComponent.tsx (React Server Component lower (or higher !) in your app tree)
import { myDataPromiseGetter } from './mySharedData';

const MyOtherReactServerComponent = async () => {
  const myData = await myDataPromiseGetter().promise;
}