Next.js Discord

Discord Forum

All pages are dynamically rendered even when they don't have anything dynamic on the page itself

Answered
Riday πŸ’™ posted this in #help-forum
Open in Discord
Riday πŸ’™OP
Every single page in my app is dynamic even though I am not using any dynamic function. Pages like about, terms, privacy, etc just have pure text content.

The only issue I could think of is that my header needs session to render the login/user button
// src/app/layout.tsx
async function RootLayout() {
  const session = await getSession();
  return (
    <Header isLoggedIn={!!session?.user} picture={session?.user?.picture} />
    <main className='...'>{children}</main>
    ...
  )
}
Answered by Ray
most likely, getSession() is using dynamic function
View full answer

40 Replies

Ray
most likely, getSession() is using dynamic function
Answer
@Ray where is `getSession()` from?
Riday πŸ’™OP
export const getSession = cache(async (required = false): Promise<AuthSession> => {
    const sessionId = cookies().get(lucia.sessionCookieName)?.value;
    if (!sessionId && required) redirect('/auth/login');
    if (!sessionId) return null;

    const result = await lucia.validateSession(sessionId);
    // Next.js throws when you attempt to set cookie when rendering page.
    try {
        if (result.session && result.session.fresh) {
            const { name, value, attributes } = lucia.createSessionCookie(result.session.id);
            cookies().set(name, value, attributes);
        }
        if (!result.session) {
            const { name, value, attributes } = lucia.createBlankSessionCookie();
            cookies().set(name, value, attributes);
        }
    } catch {}

    if (!result.session && required) redirect('/auth/login');
    return { user: result.user, ...result.session };
});
cookies() is dynamic function
Riday πŸ’™OP
Uh
So, how do I make the pages static, but have the header dynamic?
Ray
you should create a route-group
(authenticated)/layout.tsx <-- use getSession() here
Riday πŸ’™OP
Oh
or client side rendering the header if you don't want to use experimental stuff
@Ray partial prerendering
Riday πŸ’™OP
Something like this?
<Suspense ... >
    <GetSessionAndRenderHeader />
</Suspense>
Riday πŸ’™OP
AHHH
I guess CSR it is
Does revalidatePath() re-render the csr part too?
Or, do I need to add another revalidateTag()? (to revalidate the session fetched in header)
Ray
how are you gonna do the csr part?
Riday πŸ’™OP
fetch the session from a route - the fetch will have a tag
Ray
it shouldn't be related to revalidatePath or revalidateTag
the tag nor the revalidate does nothing when fetching on client
Riday πŸ’™OP
Oh
If I do revalidatePath('/page'), will it re-render the client component and fetch again?
client side fetching only happen when it mount
you don't have to worry about the caching for the csr part
just make sure the GET endpoint is dynamic which is static by default
Riday πŸ’™OP
Okay
Is next-canary stable enough to use in client projects?
Small startup
@Riday πŸ’™ Is next-canary stable enough to use in client projects?
Ray
I can't answer that because Im not sure how your site build
or are you gonna provide the support if something wrong happen?
btw, even canary could be use but partical preredering is not suitable for production yet
Riday πŸ’™OP
Okay, nevermind then
@Ray `(authenticated)/layout.tsx` <-- use getSession() here
Riday πŸ’™OP
Can you explain more about this? How would I go about placing stuff here? I guess from what I understand, I place all the pages that need auth in that route group and everything else outside. Session will be fetched only in the auth group, but then I won't be able to show the header there?
Ray
create 2 version of header
one with session and one without session
export function Header() {
  // render ui
  return (<header></header>)
}

export async function HeaderWithSession() {
  const session = await getSession()

  return <Header />
}
Riday πŸ’™OP
Oh, right. I forgot about this. I'll try something out