Next.js Discord

Discord Forum

Omitting "use client" is NOT giving me an error - WHY?

Unanswered
Skipjack tuna posted this in #help-forum
Open in Discord
Skipjack tunaOP
I have this very simple page.tsx file in which I render some components, but also use some useState hooks. I can leave out the "use client" at the top of the file and the app still works just fine - why and how?? Since it is my page.tsx, I do not import it anywhere else.

import { Container, Grid } from "@mui/material";
import Header from "@/components/Header";
import DarlehenForm from "@/components/DarlehenForm";
import ResultCard from "@/components/ResultCard";
import AnnualInstallments from "@/components/AnnualInstallments";
import { useState } from "react";
import { TTilgungsPlan } from "@/lib/types";

export default function Home() {
  const [formData, setFormData] = useState({
    darlehensbetrag: "250000",
    zinssatz: "2",
    tilgungsrate: "2",
  });
  const [resultData, setResultData] = useState({
    einzahlung: "0",
    zinsen: "0",
    tilgung: "0",
    restschuld: "0",
    monatsrate: "0",
  });
  const [tilgungsplan, setTilgungsplan] = useState<TTilgungsPlan[] | null>(
    null
  );
  const [zinsbindungsdauer, setZinsbindungsdauer] = useState(0);

  return (
    <main>
      <Container sx={{ mb: 10 }}>
        {/* Header Component */}
        <Header />
        {/* Darlehen Form Component */}
        <Grid container>
          <DarlehenForm
            formData={formData}
            zinsbindungsdauer={zinsbindungsdauer}
            setFormData={setFormData}
            setResultData={setResultData}
            setTilgungsplan={setTilgungsplan}
            setZinsbindungsdauer={setZinsbindungsdauer}
          />
          {/* Ergebnis Component */}
          <ResultCard resultData={resultData} />
        </Grid>
        {/* Jährliche Raten Component */}
        <AnnualInstallments tilgungsplan={tilgungsplan} />
      </Container>
    </main>
  );
}

13 Replies

Asian paper wasp
Is your layout a client component?
@Asian paper wasp Is your layout a client component?
Skipjack tunaOP
Not that I am aware of, BUT i am using Material UI and inside of the layout.tsx, I need ThemeProvider for MUI. It looks like this:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import theme from "@/themes/theme";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Tilgungsrechner",
  description: "Generated by create next app",
  icons: "./assets/icon.png",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <AppRouterCacheProvider options={{ key: "css" }}>
        <ThemeProvider theme={theme}>
          <body className={inter.className}>{children}</body>
        </ThemeProvider>
      </AppRouterCacheProvider>
    </html>
  );
}
Skipjack tunaOP
bump
Mini Satin
I guess the themeProvider is switching you to CSR ?
@Mini Satin I guess the themeProvider is switching you to CSR ?
Skipjack tunaOP
Is there any documentation regarding that? I was thinking the same thing, but I am not sure. Also, does that mean that EVERYTHING inside of my next app is CSR now?
Barbary Lion
I suppose you could test that theory by removing "use client" from a different client component that's a descendant of <body> and seeing if the complier complains. If it doesn't, remove the theme provider and see if complains then.
anything you import -> client
everything is server (unless you set to client)
children allows for passing server components thru client components
@Skipjack tuna Is there any documentation regarding that? I was thinking the same thing, but I am not sure. Also, does that mean that EVERYTHING inside of my next app is CSR now?
Mini Satin
You can know easily if something is rendered on the server by loggin some message before returning any html from any component.
If you see the log both in your terminal and your browser, then a server render occurs (it can happens on CC too but only in dev mode so you should test it in production mode as static parts of CCs can be rendered at build time), if browser only this is CSR
Mini Satin
You can also use this : https://www.npmjs.com/package/server-only
Import it into a component and if your component is not rendered on the server, your app will crash
you can also try to use "next build" to check if it passes the build stage as the "use client" directive is checked at build time