Next.js 13 中的 Context 是否会让整个应用程序在客户端渲染？
React 上下文对于 React 开发至关重要。大多数项目都依赖于它，无论是直接使用还是通过库来实现。问题是，它们能否与 Next.js 13 的 App Router 一起使用？使用上下文时，应用程序是否还能受益于服务器组件的强大功能？让我们来解答这些问题！
在本文中
客户端和服务器组件的区别
要理解本文，您应该先了解客户端组件和服务端组件之间的区别。简而言之，客户端组件是使用 JavaScript 在客户端渲染的普通 React 组件，而服务端组件是在服务器端渲染成 HTML 的 React 组件。渲染后的服务端组件可以作为非交互式组件在应用程序的 React 组件树中的任何位置使用。
这样说得通吗？如果还不明白，您可以了解更多关于服务器组件的信息，阅读Next.js 的官方文档或我撰写的关于“为什么服务器组件很重要”的文章。
我可以在服务器组件中使用 React Context 吗？
React 上下文在 React 应用中被广泛用于组件间共享状态。由于客户端组件和服务端组件分别渲染在不同的机器上（客户端和服务端），你可能会认为 React 上下文无法使用。
服务器组件仅仅是 HTML 标记，当然不包含 React 状态。如果在服务器组件中使用上下文，将会抛出错误。
ReactServerComponentsError:
You're importing a component that needs useContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
-[/path/to/file/MyComponent.ts:1:1]
1 | import { useContext } from 'react'
虽然服务器组件与 React 上下文不兼容，但客户端组件可以完美地处理它们。只要在客户端组件中提供上下文提供程序，该组件子树中的所有客户端组件都可以读取和使用该上下文。子树中是否存在服务器组件并不重要，因为服务器组件是 HTML 标记，它并不关心上下文。
不是你的错，他一直都是这样……
如果我使用 React Contexts，我的完整 Next.js 应用程序会在客户端渲染吗？
答案是否定的。即使使用 React 上下文，你的整个网站也不会被迫在客户端渲染。正如前面提到的，服务器组件并不关心上下文，这也意味着它不会干扰上下文的运行。
让我们列举一些关于 Next.js 应用路由的说明。
- Next.js 中的RootLayout始终是一个服务器组件。
- 传递给 RootLayout 的 children 属性也是一个服务器组件。
- 服务器组件可以包含客户端组件（当服务器渲染服务器组件时，客户端组件将被忽略）。
- 如果将服务器组件作为子组件传递给客户端组件，则可以将服务器组件包含在客户端组件中。
现在来看这段代码示例，它取自Next.js 指南，用于设置上下文。
import { ContextProviders } from './providers';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ContextProviders>{children}</ContextProviders>
</body>
</html>
);
}
我们从这段代码中可以看到：
- 根据语句 #1，根布局是一个服务器组件。
- 包含上下文的 ContextProviders 组件是一个客户端组件（语句 #3 允许这一点）。
- RootLayout 的 children 属性是一个服务器组件（语句 #2）。
- 子对象被传递给 ContextProviders 客户端组件（由语句 #4 接受）。
默认情况下，Next.js 可以处理客户端和服务端组件之间的交互，并且通过这种设置，我们遵循了组件使用的所有规则。上面的代码将生成如下所示的 React 树。
<RootLayout (Server Component)>
<ContextProviders (Client Component)>
<Page (Server Component)>
<Potential other Client Components using the context />
<Potential other Server Components ignoring the context />
</Page>
</ContextProviders>
</RootLayout>
虽然使用上下文功能正常，但确实会造成一些混淆。您必须记住，上下文只能在客户端组件中使用，服务器端无法使用上下文。
文章来源：https://dev.to/perssondennis/do-contexts-in-nextjs-13-make-the-whole-app-render-on-the-client-55bb