cookies() returns stale value when Javascript is disabled

[debel27]

When a cookie is set in a server action, the Server Components that call cookie() will re-render. During that re-render, the value returned by cookie() is stale. The problem occurs consistently when JS is disabled on the client.

Link to the code that reproduces this issue

https://github.com/debel27/next-reproduction-app-cookies

The relevant code is entirely in the root layout.tsx file.

To Reproduce

1. Start the application in development mode (next dev)
2. Open the application in the browser (should be at http://localhost:3000)
3. Disable Javascript (the procedure varies depending on the browser)
4. Refresh the page

The page should now look like this:

Click this "login" button.

Current vs. Expected behavior

Expected behavior

Clicking the "login" button submits a form, whose server action sets a cookie. This action trigers the re-render of the root layout (which calls cookie()), leading to the "logout" screen, which displays the following:

Actual behavior

Clicking the "login" button does not lead to the the "logout" screen. The UI keeps showing the login screen. Clicking a second time on the button or refreshing the page shows the logout screen.

Clicking the button does perform a form submit, which reloads the page. The new page comes with an authentication cookie, as expected. However, it appears the server reads a stale cookie value when re-rendering the layout after the form submission. This is why the login screen keeps showing up, despite the cookie being present in the response.

This issue occurs only when Javascript is disabled in the browser. This looks strange to me, as I don't expect cookies() to be affected by this. I'm disabling Javascript to test the progressive enhancement capabilities of my app. I don't expect my users to disable Javascript, but I expect my app to work even if Javascript has not loaded yet.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #189-Ubuntu SMP Fri Jan 5 14:23:02 UTC 2024
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.46 // Latest available version is detected (14.1.1-canary.46).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

[axhon]

I am also experiencing this with version 14.1