在next.js中确定客户端/服务器组件

首先,

为什么有些组件在客户端呈现,即使您没有 "use client" 在文件中。

当您的组件 (A.jsx) 是a的后裔 客户端 组件,it (A.jsx) 自动成为客户端组件。即使你不把 “使用客户端” 在顶部 (A.jsx) .

现在,回到你的主要问题。

如何检查我的组件是否是客户端/服务器端组件?

1.做到 async

只需添加 async 在你的功能之前。如果next.js是客户端组件,它将抛出错误。 若你们并没有得到错误,那个么你们的组件就是服务器端。

假设你的组件是这样的:

const Unknown = () =>{
    return <div>Idk if it's client side or not</div>
}

使其异步:

const Unknown = async () =>{
    return <div>Idk if it's client side or not</div>
}

如果它是客户端组件,您将看到以下错误:

2.console.log window

如果你不想用第一种方法检查它,你也可以这样做。

添加a console.log 组件中的语句。

console.log(window)

如果它是服务器端组件,您将收到以下错误: