关于 React Server Components 和 Context 的矛盾?

Question

nextjs 提到了 React Server Components 使用的优点,并建议对于静态部分尽量使用 React Server Components。但是 React Server Components 是不支持 Context 的,那么就要求带 Context 的组件使用 "use client",而很多组件库使用了 Context 来提供主题设置,往往这个设置都放置在顶层上,这又导致了 React Server Components 几乎没有了作用。
这种矛盾怎么解决?

Answer 1

首先需要说明一点：并不是所有被使用 "use client" 的 Context.Provider 包裹的子组件都会渲染成 RSC（React Server Components），而是只有消费 Context（使用了 useContext(Context) ）的子组件才会被渲染成为 RSC。如下图所示：

然后我个人认为 nextjs 这种处理方式其实十分合理，因为组件消费 Context 的行为本身就表明这个组件是有状态的，不应该也不能被静态渲染成服务端组件。这种处理方式既保留了 RSC 的静态渲染的优点，同时也提供了客户端组件消费 Context 状态的能力。

希望我的回答对题主有所帮助~