我正在使用Next.js 13与服务器组件和Chakra UI进行样式化的项目。我主要关心的是在使用app/layout特性时保护敏感的服务器端代码逻辑不被暴露给客户端。
Chakra UI组件仅在客户端，我不确定它们如何在代码公开方面与服务器组件交互。具体来说，我想知道在布局文件中使用“use client”指令是否也会暴露来自其他文件的代码逻辑。例如，如果我的索引文件有逻辑（或导入一个带有逻辑的组件），它决定了呈现什么html或什么组件，这个逻辑也会被发送到客户端吗？还是客户端只是接收html？
下面是我的布局文件的一个例子：
"use client";
import { ChakraProvider } from "@chakra-ui/react";
import { CacheProvider } from "@chakra-ui/next-js";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
</body>
</html>
);
}这是我第一次创建一个服务器端和客户端应用程序，所以任何关于这个主题的澄清都将非常感谢。
1条答案
按热度按时间shyt4zoc1#
来一一回答你的问题：
Chakra UI组件仅在客户端，我不确定它们如何在代码公开方面与服务器组件交互。
正如你正确地提到的，Chakra UI组件仅限于客户端。要将Chakra UI与服务器组件一起使用，您需要通过在文件顶部添加“use client”指令将服务器组件转换为客户端组件。转换之后，组件将成为客户端组件，并且只公开客户端逻辑，而不公开服务器端逻辑。
具体来说，我想知道在布局文件中使用“use client”指令是否也会暴露来自其他文件的代码逻辑。
如果您使用的是客户端组件，则只有这些组件才会在客户端呈现。存在于其他文件或组件（例如服务器组件）中的服务器端逻辑不会暴露给客户端，只要它被正确隔离并且不与客户端代码混合。注意，在最新版本的next.js（v13.4）中，app目录下的组件默认为“服务器组件”，因此，只有那些标记为“使用客户端”的组件才被视为客户端组件。
例如，如果我的索引文件有逻辑（或导入一个带有逻辑的组件），它决定了呈现什么html或什么组件，这个逻辑也会被发送到客户端吗？还是客户端只是接收html？
如果索引文件或其他组件中的逻辑是服务器组件的一部分，则不会将其发送到客户端。客户端将只接收生成的HTML内容。
总之，只要您保持服务器端和客户端组件之间的清晰分离，就不必担心将敏感的服务器端代码暴露给客户端。