Skip to content

Commit aab50c3

Browse files
authored
docs: implications of mutating cookies in server actions (#83691)
Ref: #83481 Closes: https://linear.app/vercel/issue/DOC-5070/mutating-cookies-invalidates-router-cache Making sure those using cookies in server actions, know that the server tree is re-rendered and merged with the current client tree.
1 parent a93515b commit aab50c3

File tree

2 files changed

+13
-1
lines changed

2 files changed

+13
-1
lines changed

docs/01-app/01-getting-started/08-updating-data.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,11 @@ Calling `redirect` [throws](/docs/app/api-reference/functions/redirect#behavior)
393393

394394
### Cookies
395395

396-
You can `get`, `set`, and `delete` cookies inside a Server Action using the [`cookies`](/docs/app/api-reference/functions/cookies) API:
396+
You can `get`, `set`, and `delete` cookies inside a Server Action using the [`cookies`](/docs/app/api-reference/functions/cookies) API.
397+
398+
When you [set or delete](/docs/app/api-reference/functions/cookies#understanding-cookie-behavior-in-server-actions) a cookie in a Server Action, Next.js re-renders the current page and its layouts on the server so the **UI reflects the new cookie value**.
399+
400+
> **Good to know**: The server update applies to the current React tree, re-rendering, mounting, or unmounting components, as needed. Client state is preserved for re-rendered components, and effects re-run if their dependencies changed.
397401
398402
```ts filename="app/actions.ts" switcher
399403
'use server'

docs/01-app/03-api-reference/04-functions/cookies.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,14 @@ When working with cookies in Server Components, it's important to understand tha
8282

8383
The server can only send instructions (via `Set-Cookie` headers) to tell the browser to store cookies - the actual storage happens on the client side. This is why cookie operations that modify state (`.set`, `.delete`, `.clear`) must be performed in a Route Handler or Server Action where the response headers can be properly set.
8484

85+
## Understanding Cookie Behavior in Server Actions
86+
87+
After you set or delete a cookie in a Server Action, Next.js re-renders the current page and its layouts on the server so the UI reflects the new cookie value. See the [Caching guide](/docs/app/guides/caching#cookies).
88+
89+
The UI is not unmounted, but effects that depend on data coming from the server will re-run.
90+
91+
To refresh cached data too, call [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) or [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) inside the action.
92+
8593
## Examples
8694

8795
### Getting a cookie

0 commit comments

Comments
 (0)