NextJS服务器组件也在客户端运行

Question

我正试图使用材料UIv5.11.16与nextjsv13.3.0和设置我的nextjs项目作为官方文档建议在这里，我能够使用材料UI组件，而不写"use client"在我的文件的顶部。

问题是，我试图检查组件是否为服务器组件。我放了一个console.log("type of window: ", typeof window)，看看typeof window是undefined，它是服务器组件，或者如果那是一个对象，它是一个客户端组件。

import * as React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { Button } from "@mui/material";
export default function Home() {
console.log("this typeof window: ", typeof window)

return (
<Container maxWidth="lg">
<Typography>
</Typography>
<Box
sx={{
my: 4,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Typography variant="h4" component="h1" gutterBottom>
Material UI - Next.js example in TypeScript
</Typography>
<Button
variant="outlined"
onClick={() => {
console.log("clicked!");
}}
>
TESTing Button
</Button>
</Box>
</Container>
);
}

我意识到console.log在服务器端和客户端都在执行，它在服务器日志中记录the typeof window: undefined并在浏览器控制台中打印the typeof window: object。为什么它在两边运行?

我试着把use client放在文件的顶部，再次登录到服务器上。这里到底发生了什么?在这些组件中放置令牌或者我的意思是做服务器的事情安全吗?

Answer 1

重要的是要理解，当使用Next.js时，默认情况下使用SSR。这意味着组件最初在服务器上呈现，然后发送到客户端。在客户端，React组件将"水合"起来。或者用任何额外的更改或交互性重新渲染。这就是为什么在服务器端和客户端都可以看到相同组件的日志的原因。

执行的' typeof window'检查是确定代码是在服务器端还是在客户端运行的常用方法。但是，它不会阻止您的代码在服务器端执行。它只提供当前环境的信息。

我希望这对你有帮助