I am tring to use Material UI v5.11.16 with nextjs v13.3.0 and setup my nextjs project as the official documentation suggests here and I am able to use Material UI ponents without writing "use client" at the top of my files.

The issue is that I tried to check if a ponent is server ponent or not. I put a console.log("type of window: ", typeof window) to see if typeof window is undefined it is server ponent, or if that is an object it is a client ponent.

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" ponent="h1" gutterBottom>
          Material UI - Next.js example in TypeScript
        </Typography>
        <Button
          variant="outlined"
          onClick={() => {
            console.log("clicked!");
          }}
        >
          TESTing Button
        </Button>
      </Box>
    </Container>
  );
}

I realized that the console.log is executing on both server side and client side, it logs the typeof window: undefined in the server log and prints the typeof window: object in browsers console. Why it is running on both sides?

I tried putting use client at the top of the file, again that was logged in the server too. what is really happening here ? Is it safe to put tokens or I mean do server things in these ponents ?

I am tring to use Material UI v5.11.16 with nextjs v13.3.0 and setup my nextjs project as the official documentation suggests here and I am able to use Material UI ponents without writing "use client" at the top of my files.

The issue is that I tried to check if a ponent is server ponent or not. I put a console.log("type of window: ", typeof window) to see if typeof window is undefined it is server ponent, or if that is an object it is a client ponent.

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" ponent="h1" gutterBottom>
          Material UI - Next.js example in TypeScript
        </Typography>
        <Button
          variant="outlined"
          onClick={() => {
            console.log("clicked!");
          }}
        >
          TESTing Button
        </Button>
      </Box>
    </Container>
  );
}

I realized that the console.log is executing on both server side and client side, it logs the typeof window: undefined in the server log and prints the typeof window: object in browsers console. Why it is running on both sides?

I tried putting use client at the top of the file, again that was logged in the server too. what is really happening here ? Is it safe to put tokens or I mean do server things in these ponents ?

• javascript
• next.js
• material-ui

Share Improve this question Follow edited May 22, 2023 at 23:41 Olivier Tassinari 8,69066 gold badges2525 silver badges2828 bronze badges asked Apr 10, 2023 at 3:33 Ali ArefAli Aref 2,44211 gold badge2121 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It's important to understand that when using Next.js, SSR is utilized by default. This means that ponents are initially rendered on the server and then sent to the client. On the client side, React ponents will "hydrate" or re-render with any additional changes or interactivity. This is the reason why you see logs for the same ponent on both the server side and the client side.

The' typeof window' check you performed is a mon method to determine if your code is running on the server or client side. However, it does not prevent your code from being executed on the server-side. It just gives you information about the current environment.

I hope this helps