Next.js Discord

Discord Forum

Adding "force-dynamic" to RootLayout

Answered
Pavement ant posted this in #help-forum
Open in Discord
Pavement antOP
Is it ok for my RootLayout to have force-dynamic set? Will this negatively affect all child pages and layouts (aka my entire app)?

I'm using Supabase's new server-side auth in a Next.js 13 App Router project:
https://supabase.com/docs/guides/auth/auth-helpers/nextjs#server-side

Creating the server-side Supabase client relies on cookies from next/headers. And the only way to get server-side cookies is on a dynamic route.

Here's my code:

export const dynamic = "force-dynamic"

export default async function RootLayout() {
  const supabase = createServerComponentClient<Database>({ cookies })
  const userResponse = await supabase.auth.getUser()
Answered by fuma
By doing this, all the sub-routes will be dynamically rendered. It means you will lose the ability to statically render the page (but caching still works), and may affect the performance.

You can refer to [Static and Dynamic Rendering](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering) to learn more.
View full answer

12 Replies

fuma
By doing this, all the sub-routes will be dynamically rendered. It means you will lose the ability to statically render the page (but caching still works), and may affect the performance.

You can refer to [Static and Dynamic Rendering](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering) to learn more.
Answer
Pavement antOP
Ah... that's what I figured would probably happen.

Seems like client-side auth is the way to go with App Router then?

Now I'm curious what the Next.js team's intention behind cookies was. Did they anticipate it would be used for auth? Seems like it's mostly there for simpler use cases.
fuma
No, for auth logic, we recommend doing it in middleware.
Pavement antOP
That makes sense. I already have this middleware:

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from '@/lib/database.types'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient<Database>({ req, res })
  await supabase.auth.getSession()
  return res
}


So does that mean createServerComponentClient can happen without opting the route into dynamic rendering?
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import LoginForm from './login-form'

import type { Database } from '@/lib/database.types'

export default async function Login() {
  const supabase = createServerComponentClient<Database>({ cookies })

  const {
    data: { session },
  } = await supabase.auth.getSession()

  return <LoginForm session={session} />
}


I guess I'm just trying to wrap my head around how the middleware relates to everything and how I can access it in pages.
fuma
No, generally we will only use middleware to protect the pages. For stuff like getting the user, you must opt the route into dynamic rendering.
And createServerComponentClient can't happen without opting the route into dynamic rendering, because it needs cookies
For instance, if you statically render the page, how can you display user-specific content like user name? It makes sense to be dynamic renderng
Pavement antOP
I see. That means my app will be 100% dynamically rendered. And that's normal / ok? I feel like I'll be missing out on the major benefits of Next.js caching if I go that route. But server-side auth is definitely preferable to client-side.
fuma
Don't worry, the results of fetch are still cached if you have revalidate or force-cache
Pavement antOP
Ok. And just so I understand the effect of accessing cookies in RootLayout...

The initial request of any page in the app will be dynamic because of cookies in the layout, but subsequent requests could still be be static when the client-side router takes over (as long as those subpaths don't access cookies in page.tsx).
fuma
Correct.
Pavement antOP
Ok that's good news. I can likely optimize some stuff then.
Thanks so much for the help!