Next.js Discord

Discord Forum

How to conditionally render on server side?

Answered
Rex posted this in #help-forum
Open in Discord
RexOP
For the following code how do I conditionally render the header component based on whether the session present or not?

import Footer from "./components/footer/footer";
import Header from "./components/header/header";
import HomeHeader from "./components/header/homeHeader";
import { AuthProvider } from "../context/AuthProvider";
import { getCurrentUser } from "@/lib/services/getCurrentUser";
import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]/route";

export default async function RootLayout({ children }) {
  let user = "";
  const session = await getServerSession(authOptions);

  if (session || session?.user) {
    user = session.user;
  }
  return (
    <html lang="en" className="overflow-x-hidden">
      <body>
        <AuthProvider session={session}>
          {user ? <Header /> : <HomeHeader />}
          {children}
          <Footer />
        </AuthProvider>
      </body>
    </html>
  );
}
Answered by Ray
ok how about this
const session = await getServerSession(authOptions);
const user = session?.user
View full answer

7 Replies

RexOP
this is the root layout
Ray
...
  const session = await getServerSession(authOptions);

...
 {session?.user ? <Header /> : <HomeHeader />}
...
RexOP
I think this will work
but looks ugly with chaining
Ray
ok how about this
const session = await getServerSession(authOptions);
const user = session?.user
Answer
Ray
{user ? <Header /> : <HomeHeader />}
RexOP
This