我如何知道我是在代码中的客户端组件还是服务器组件上。Nextjs 13 Beta 应用程序目录

Question

例如，我有一段代码来检查我是客户端还是服务器以具有适当的逻辑。

例如。我可以使用 isClient 知道我位于客户端组件中。

Answer 1

服务器组件：app 目录内的所有组件默认都是 React Server 组件，包括特殊文件和共置组件。

客户端组件使您能够向应用程序添加客户端交互性。在 Next.js 中，它们在服务器上预渲染并在客户端上进行水化。您可以将客户端组件视为 Next.js 12 及之前版本的工作方式

在下一个官方文档中了解更多信息

如果您想在运行时知道组件是在服务器还是客户端上呈现。您可以检查是否window已定义：

const componentType = typeof window === 'undefined' ? 'server' : 'client';

window 对象是对浏览器中打开的窗口的引用。因此，window对象仅在客户端可用