Does the useEffect in a nested component cause the page to be rendered on the server side or the client side?

I am working on a nextjs app and I have a question about render a page that this page has a nested component that I used useEffect in this component and my page doesn't recive any data from server it's landing page, I want to know that useEffect will render page on the server side

import { useTheme } from "@emotion/react";
import { Box, Button, Grid, Typography } from "@mui/material";
import Iphone from "../components/Iphone";
import Navbar from "../components/Navbar";
import Tutorial from "../components/Tutorial";
import styles from "../styles/index.module.css";

export default function Home() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "100vh",
      }}
    >
      <Box
        sx={{
          minHeight: "100vh",
          width: "100%",
          display: "flex",
          flexDirection: "column",
        }}
        className={styles.container}
      >
        <Navbar elevation={0} />
        <Grid
          sx={{
            marginTop: theme.spacing(15),
            padding: "0 10px",
            [theme.breakpoints.up("md")]: {
              marginTop: theme.spacing(20),
            },
          }}
          container
        >
          <Grid
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              width: "100%",
            }}
            item
            sm={12}
            lg={7}
          >
            <Typography
              align="right"
              sx={{
                fontSize: "2.2rem",
                [theme.breakpoints.up("md")]: {
                  fontSize: "3rem",
                },
              }}
              color={theme.palette.custom.light}
              // variant="h4"
            >
              دفتر ثبت عملکرد برای کنکوری‌ها!
            </Typography>
            <Typography
              sx={{
                width: "50%",
                mt: theme.spacing(5),
                fontSize: "1.2rem",
                [theme.breakpoints.down("sm")]: {
                  width: "100%",
                },
              }}
              align="justify"
              color={theme.palette.custom.light}
              variant="body1"
            >
              با اپلیکیشن تراز میتونید برای خودتون به تفکیک روزهای هفته هدفگذاری
              کنید. بعدش ببینید چقدر از این هدف ها محقق شده و با توجه به این
              برنامه خودتون رو بهتر کنید. همچنین امکان مشاهده گزارش هفتگی،
              ماهانه و جامع (کل مطالعاتی که داشتید) هم وجود داره!
            </Typography>
            <Box sx={{ display: "flex", mt: theme.spacing(2) }}>
              <Button
                color={"light"}
                size="large"
                sx={{ fontSize: "18px", width: "200px" }}
                variant="outlined"
                onClick={() => {
                  document
                    .getElementById("download")
                    .scrollIntoView({ behavior: "smooth" });
                }}
              >
                دانلود!
              </Button>
            </Box>
          </Grid>
          <Grid
            sx={{
              [theme.breakpoints.down("lg")]: {
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                mt: theme.spacing(10),
                mb: theme.spacing(10),
              },
            }}
            item
            sm={12}
            lg={5}
          >
            <Iphone />
          </Grid>
        </Grid>
      </Box>
      <Tutorial />
    </Box>
  );
}

and I used useEffect in Navbar component now this will render the Home page on the server side? thanks for help

import { useTheme } from "@emotion/react";
import {
  AppBar,
  Box,
  Container,
  Fade,
  IconButton,
  Toolbar,
} from "@mui/material";
import { Menu as MenuIcon } from "@mui/icons-material";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { StyledTypography } from "../CustomTheme/Theme";
import { useRouter } from "next/router";

export default function Navbar(props) {
  const { custom } = props;
  const theme = useTheme();

  const router = useRouter();
  const [showChild, setShowChild] = useState(false);
  const [scroll, setScroll] = useState(0);
  const [width, setWidth] = useState(
    typeof window === "undefined" ? 0 : window.innerWidth
  );

  useEffect(() => {
    setShowChild(true);
    window.addEventListener("resize", () => {
      setWidth(window.innerWidth);
    });
    window.addEventListener("scroll", (e) => {
      setScroll(window.scrollY);
    });
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === "undefined") {
    return <></>;
  }

  return (
    <AppBar
      position="fixed"
      sx={{
        backgroundColor: "transparent",
        backgroundColor:
          scroll > 10 ? theme.palette.custom.light : "transparent",

        color: custom
          ? theme.palette.custom.dark
          : scroll > 10
          ? theme.palette.custom.dark
          : theme.palette.custom.light,
      }}
      {...props}
    >
      <Container>
        <Toolbar>
          <Image
            width={150}
            height={30}
            src={
              custom
                ? require("../images/logo-type-dark.png")
                : scroll > 10
                ? require("../images/logo-type-dark.png")
                : require("../images/logo-type-light.png")
            }
          />

          <StyledTypography
            component={"div"}
            onClick={() => {
              document
                .getElementById("download")
                .scrollIntoView({ behavior: "smooth" });
            }}
            sx={{
              mr: 10,
              fontSize: "16px",
              cursor: "pointer",
              display: custom ? "none" : { xs: "none", md: "flex" },
              color:
                document.getElementById("download") &&
                document.getElementById("feature")
                  ? scroll >= document.getElementById("download").offsetTop &&
                    scroll < document.getElementById("feature").offsetTop
                    ? theme.palette.secondary.main
                    : ""
                  : "",
            }}
          >
            دانلود
          </StyledTypography>

          <StyledTypography
            component={"div"}
            onClick={() => {
              document
                .getElementById("feature")
                .scrollIntoView({ behavior: "smooth" });
            }}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: custom ? "none" : { xs: "none", md: "flex" },
              color:
                document.getElementById("download") &&
                document.getElementById("feature")
                  ? scroll >= document.getElementById("feature").offsetTop &&
                    scroll < document.getElementById("detail").offsetTop
                    ? theme.palette.secondary.main
                    : ""
                  : "",
            }}
          >
            ویژگی ها
          </StyledTypography>

          <StyledTypography
            component={"div"}
            onClick={() => {
              document
                .getElementById("about")
                .scrollIntoView({ behavior: "smooth" });
            }}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: custom ? "none" : { xs: "none", md: "flex" },
              color: document.getElementById("about")
                ? scroll >= document.getElementById("about").offsetTop
                  ? theme.palette.secondary.main
                  : ""
                : "",
            }}
          >
            درباره ما
          </StyledTypography>

          <StyledTypography
            component={"a"}
            href={"#"}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: { xs: "none", md: "flex" },
            }}
            onClick={() => router.push("/blog")}
          >
            وبلاگ
          </StyledTypography>

          <StyledTypography
            component={"a"}
            href={"#"}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: { xs: "none", md: "flex" },
            }}
            onClick={() => router.push("/school")}
          >
            پنل آموزشگاه
          </StyledTypography>

          <StyledTypography
            component={"a"}
            href={"#"}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: { xs: "none", md: "flex" },
            }}
            onClick={() => router.push("/app")}
          >
            وب اپلیکیشن
          </StyledTypography>

          <StyledTypography
            component={"a"}
            href={"#"}
            sx={{
              mr: 3,
              fontSize: "16px",
              cursor: "pointer",
              display: { xs: "none", md: "flex" },
            }}
            onClick={() => router.push("/advisor")}
          >
            مشاور
          </StyledTypography>
          <Box
            sx={{
              display: "none",
              [theme.breakpoints.down("md")]: {
                display: "flex",
                flexGrow: 1,
              },
            }}
          ></Box>
          <Fade in={width < 900} {...(width < 900 ? { timeout: 1000 } : {})}>
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="open drawer"
              sx={{
                mr: 2,
                display: width < 900 ? "flex" : "none",
                alignSelf: "flex-end",
              }}
            >
              <MenuIcon />
            </IconButton>
          </Fade>
        </Toolbar>
      </Container>
    </AppBar>
  );
}