Next.js Discord

Discord Forum

Why does cookies().set() cause re-render?

Answered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
When i call cookies().set it causes re-rendering of my page?

Heres code to re-produce:

src/app/test/page.tsx
"use client";

import type React from "react";
import { useState } from "react";
import { setAccessToken } from "../actions";

const Page = () => {
  const [value, setValue] = useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setAccessToken(value);
    console.log("submit");
  };

  return (
    <div>
      <form onSubmit={(e) => handleSubmit(e)}>
        <input
          type="text"
          placeholder="Type something here"
          onChange={(e) => setValue(e.target.value)}
        />
        <button type="submit">submit</button>
      </form>
    </div>
  );
};

export default Page;


src/app/actions.ts
export async function setAccessToken(accessToken: string) {
  await cookies().set("jid", accessToken, {
    maxAge: 60 * 60 * 24 * 7 * 365 * 10, // 10 years
    path: "/",
    httpOnly: true,
    secure: true,
  });
}
Answered by Knopper gall
You could natively set the cookie, or use middleware to set the cookie in a header.

I don't know of a way to opt out of cache invalidation for this though, nor see much reason to
View full answer

16 Replies

@Ray using cookies().set or cookies().delete in server action will invalidate the router cache
Sloth bearOP
is there a way to prevent this from happening?
@Sloth bear is there a way to prevent this from happening?
Knopper gall
You could natively set the cookie, or use middleware to set the cookie in a header.

I don't know of a way to opt out of cache invalidation for this though, nor see much reason to
Answer
@Sloth bear What do you mean natively set the cookie?
Knopper gall
in raw javascript, client side
@Knopper gall in raw javascript, client side
Sloth bearOP
You mean like calling:
document.cookie = "username=John Doe; expires=Thu, 01 Jan 2026 00:00:00 UTC; path=/";
Knopper gall
just remember you need to use headers for http cookies
yes I meant that
@Sloth bear is there a way to prevent this from happening?
Ray
You could use route handler instead of server action if you want to prevent this
@Knopper gall just remember you need to use headers for http cookies
Sloth bearOP
Can you give me an example for that? I want to replicate this:
  await cookies().set("jid", accessToken, {
    maxAge: 60 * 60 * 24 * 7 * 365 * 10, // 10 years
    path: "/",
    httpOnly: true,
    secure: true,
  });
Sloth bearOP
Alright, thank you. I would call that setAccessToken() in route handler, and in my client component fetch that route?
Sloth bearOP
Okay, i will try that out
Sloth bearOP
Now its working just fine, thanks for answers, i wasted so many hours into this today.