我怎么知道我在代码中是在客户端还是服务器组件上。 Nextjs 13 Beta 应用目录

Question

比如我有一段代码检查我是client还是server有合适的逻辑

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

Answer 1

可能有更好的解决方案。假设您只需要在开发时执行此操作，一种检查方法是查看控制台日志的最终位置。从服务器组件运行

console.log()

只会在终端/CLI 中记录输出。如果您在终端中看不到任何东西，而只在浏览器的控制台中看到，这意味着您处于客户端组件的上下文中。

例如，从

console.log('Server only');

目录中的根组件运行

app

应该只显示在终端中。

Answer 2

Server components : app目录下的所有组件默认都是React Server Components，包括特殊文件和colocated组件。

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

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

如果你想在运行时知道组件是在服务端还是在客户端渲染。您可以检查是否定义了

window

：

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

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