vercel / vercel/next.js

Setting Cookies Via Server Action Reloads Entire App

Open
#50,163 28 comments 57 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Cookies Server Actions
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

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 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 1.22.19
      pnpm: 6.11.0
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/johnson-jesse/next-server-action-cookie

To Reproduce
  1. Clone repo, install, run dev.
  2. Click the first button labeled with "Via Server Action With Cookies"
  3. Notice the whole app re-renders.
  4. Optionally turn on "Highlight updates when components render." from developer window to see updates from button clicks.
Describe the Bug

Setting cookies in a server action causes the entire app to reload. This appears as a render glitch most noticeable when the layout is using a custom font that also needs to load.

https://github.com/vercel/next.js/assets/10335064/6dd72eca-93e5-460e-ab4f-38d6e9a73dd2

Expected Behavior

Setting cookies in a server action does not cause the entire app to reload thus avoiding loading the font again.

Which browser are you using? (if relevant)

Chrome Version 112.0.5615.137 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

N/A

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked next-server-action-cookie reproduction and its App Router setup; run it in development and click “Via Server Action With Cookies” while watching component updates. Trace the server action and cookie-setting behavior in the Next.js app directory, then verify that setting the cookie no longer reloads the entire app or causes the custom font to load again.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
backend, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.