[AppDir] Using cookies from next/headers breaks prefetch in RootLayout

[johanbaath]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.5-canary.6
  eslint-config-next: 13.0.4
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome Version 107.0.5304.110 (Official Build) (arm64)

How are you deploying your application? (if relevant)

next start

Describe the Bug

When using cookies from next/headers in a server component RootLayout, the Link components on the children's do not prefetch any data. It sends a request but receives an "empty" response like so:

J0:[["children","about",["about",{"children":["",{}]}],null,null]]

If I don't use the cookies function, the response for the prefetch is complete and working as usual.

Expected Behavior

I would expect it to prefetch the data as usual. Is this not intended behavior?

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/johanbaath/nextjs-prefetch-issue

To Reproduce

npm install
npm run build
npm run start

Open the / root page in Chrome, watch the network tab and inspect the response for the about page. Inspect the contents of this request.

Next, comment out line 8 in src/app/layout.tsx:

const nextCookies = cookies();

Run the steps again to make a fresh build:

npm install
npm run build
npm run start

Open the / root page in Chrome, watch the network tab and inspect the response for the about page. Inspect the contents of this request. Compare it to the previous one, they are not the same.

[koba04]

@johanbaath
Do you still have the reproduced repository you pointed out?
https://github.com/johanbaath/nextjs-prefetch-issue

[johanbaath]

@johanbaath Do you still have the reproduced repository you pointed out? https://github.com/johanbaath/nextjs-prefetch-issue

Hey! I just restored the repository, it should be available now!

[koba04]

I'm still looking into this, but this is caused by the DynamicServerError: Dynamic server usage: cookies at

next.js/packages/next/src/client/components/headers.ts

Line 34 in 7b6e336

if (staticGenerationBailout('cookies')) {

during next build because that seems to be treated as Static Generation (renderOpts.supportsDynamicHTML = false).

[koba04]

@balazsorban44
The preload RSC payload is generated by the next build command, which means it's generated as Static Generation and it seems to make sense that the use of cookies avoids generating the payload.
What's the expect behavior for this?

[timneutkens]

Fixed by #48383, you can explicitly opt-in to prefetching dynamic responses now.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.