Next.js Discord

Discord Forum

Why the page is dynamic by default

Unanswered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
import { getServerAuthSession } from "@/app/api/auth/[...nextauth]/auth";
import { Card, CardHeader } from "@/components/ui/card";
import { redirect } from "next/navigation";

export default async function Settings() {
  const session = await getServerAuthSession();

  if (!session) {
    redirect("/");
  }

  return (
    <>
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-3xl font-semibold mb-4">Settings</h1>
      </div>
      <Card>
        <CardHeader>
          {session.user.first_name} {session.user.last_name}
        </CardHeader>
      </Card>
    </>
  );
}


Thats the code. Why after build this page is dynamic? Adding export const dynamic = 'force-static' on top makes it static but it should be the default behaviour

38 Replies

Clown
Its probably because getServerSession() uses a dynamic function underneath. I assume its due to the [cookies](https://nextjs.org/docs/app/api-reference/functions/cookies) function.
Siamese CrocodileOP
// import { getServerAuthSession } from "@/app/api/auth/[...nextauth]/auth";
// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
// import {
//   Card,
//   CardDescription,
//   CardHeader,
//   CardTitle,
// } from "@/components/ui/card";
// import { redirect } from "next/navigation";

export default async function Settings() {
  // const session = await getServerAuthSession();

  // if (!session) {
  //   redirect("/");
  // }

  return (
    <>
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-3xl font-semibold mb-4">Settings</h1>
      </div>

      {/* <Card>
        <CardHeader>
          <div className="flex gap-4">
            <div className="space-y-2">
              <CardTitle>
                {session.user.first_name} {session.user.last_name}
              </CardTitle>
              <CardDescription>ID: {session.user.id}</CardDescription>
            </div>
            <Avatar>
              <AvatarFallback>
                {session.user.first_name.charAt(0)}{" "}
                {session?.user.last_name.charAt(0)}
              </AvatarFallback>
              <AvatarImage
                className="object-cover"
                src={"/user-placeholder.jpg"}
              />
            </Avatar>
          </div>
        </CardHeader>
      </Card> */}
    </>
  );
}
commenting the code
and it still builds page as dynamic
even when i remove middleware
eh
Clown
Does your layout or any of those component use a dynamic function?
Siamese CrocodileOP
Yes
layout renders a nav
which uses next auth
session
does it make all segments dynamic?
Clown
Probably that then
Siamese CrocodileOP
And is there another way around it?
Clown
Why are you using authsession in nav? For user profile?
Siamese CrocodileOP
yeah
for user profile pic and name
Clown
Honestly i dont know a better way myself. I don't know if there is a way around that.
Siamese CrocodileOP
I could fetch data on the client
but thats not the way I guess
Clown
One way could be using using server actions to fetch the data for you
I dont know if that will opt the route into dynamic because i havent tried but i doubt it will. So try it
Siamese CrocodileOP
Hmm
I just checked and even if the middleware runs on the page /settings it doesnt make it dynamic
So one way could be to run middleware on every page that needs authorization
Clown
Middleware wont make your page dynamic
Siamese CrocodileOP
and fetch user details using useSession
yh
Idk if its better
@Siamese Crocodile So one way could be to run middleware on every page that needs authorization
Clown
Yeah you should be doing authorization in middleware
Siamese CrocodileOP
I know
I am
but downloading user details
on the client or on the server
thats the question
on the client we can leave pages static
Siamese CrocodileOP
on the server all pages that call getServerAuthSession are dynamic