Cookies and headers no longer opt-in the entire route for dynamic rendering

[StampixSMO]

According to the docs, using cookies() or headers() opts in the entire route for dynamic rendering: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#using-dynamic-functions

However, the docs for cookies() itself mention that this only happens if you use it on the page or layout level: https://nextjs.org/docs/app/api-reference/functions/cookies

This functionality was recently updated and the first link is no longer correct, if you use cookies() in a nested server component, your route stays static.

[volpster2100]

My experience is that this is actually true regardless of whether or not the server component is nested. No matter what I do, if I use cookies(), then route back to that page, a cached version is served to me for a seemingly arbitrary amount of time until the actual route is refetched by next again.

My build output does show all of my routes as being dynamic.

I spent all day trying to figure out what I was doing wrong, but I am now suspicious as to whether it’s me or the library…

I will try to upload a video with details soon

[StampixSMO]

Well, the docs say that using it on page or layout components should opt it into dynamic rendering. I like the fact that it does not do that for nested server components and the root page/layout is statically rendered instead. Using a Suspense you can then easily build out a smooth UI.

However, I do notice that my routes stay dynamic, which I don't complete understand yet as to why.

Edit: I was wrong, my routes are static now!

[rvanlaarhoven]

Are you sure your routes are static? When I do a simple test like the following, it still results in a dynamic route because the CookieComponent is using cookies():

import { Suspense } from 'react'

import CookieComponent from './CookieComponent'

export default async function Page() {
  return (
    <div>
      Some static page data
      <Suspense>
        <CookieComponent />
      </Suspense>
    </div>
  )
}

[niklasp]

I have a similar use case. Help appreciated

[dinhngocduy2000]

Are you sure your routes are static? When I do a simple test like the following, it still results in a dynamic route because the CookieComponent is using cookies():

import { Suspense } from 'react'

import CookieComponent from './CookieComponent'

export default async function Page() {
  return (
    <div>
      Some static page data
      <Suspense>
        <CookieComponent />
      </Suspense>
    </div>
  )
}

is it still dynamic right? Because it's dynamic when i tried it

[volpster2100]

related to this issue:
#42991

But I think the way you said it is clearer.

[kimhwanhoon]

So if I understood right, if I'm gonna use cookies, it's better I use it from the server components but not from page or layout?
I am also curious, if I did that, and if I use cookies from server components, the data is still cached? because I think I read something like if I use cookies its always dynamic.

because I need to fetch other data with the auth token from the cookies then every time I use cookies It's just always dynamic and results in super slow loading on my website.

[tarunkumargit]

Hi , @kimhwanhoon , its been long time since this issue is posted, but as I'm new to next.js. The scenario i have is i have store id cookie stored in user browser, for all the Api calls to give user result based on his location, but now my routes are dynamic due to this. i want to enable caching. so, what is work around for this ? its same kind of situation like yours of auth token.