将React.Context与Nextjs13服务器端组件一起使用
Next13 一周前发布，我正在尝试将 next12 应用程序迁移到 next13。 想尽量使用服务端组件，但是好像用不了
import { createContext } from 'react';
在任何服务器组件中都有。
我得到了这个错误：
Server Error
Error:
You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,----
1 | import { createContext } from 'react';
: ^^^^^^^^^^^^^
`----
Maybe one of these should be marked as a client entry with "use client":
这里有替代方案还是我必须钻研 props才能获得服务器端渲染？
似乎我可以用createServerContext
import { createServerContext } from 'react';
如果你使用Typescript和React 18，你还需要在你的tsconfig.json编译器选项中添加"types": ["react/next"]，因为这是一个尚未稳定的函数。
'"react"' has no exported member named 'createServerContext'. Did you mean 'createContext'?。
- Rijk 2022-11-22
@types/react把这个函数归类为"next"函数，所以要在Typescript中访问它，你需要在tsconfig.json中的compilerOptions中加入"types": ["react/next"]。
- Zack 2023-01-03
这是React的SSR的一个新功能，用来识别一个组件是客户端还是服务器端的。在你的例子中，createContext只在客户端可用。
如果你只在客户端使用这个组件，你可以在组件的顶部定义'use client';。
'use client';
import { createContext } from 'react';
你可以查看这个Next.js文档和这个React RFC，以了解详情
use client。
- Tomer Almog 2022-11-05
根据Next.js 13 测试版文档，您不能在服务器组件中使用上下文。
In Next.js 13, context is fully supported within Client Components, but it cannot be created or consumed directly within Server Components. This is because Server Components have no React state (since they're not interactive), and context is primarily used for rerendering interactive components deep in the tree after some React state has been updated
然而，根据你的情况，在新方法中还有其他处理数据的方法。例如，如果你在一个父组件中从服务器获取数据，然后通过Context向下传递，你现在可以在所有依赖这些数据的组件中直接获取数据。React 18会对获取的数据进行删减（de-duplicate），所以不会有不必要的请求。
在文档中，有更多的替代方案。