Why the response data is so big in browser when I use the server action with cookies().set or cookies().delete or etc that modify the cookie

[o92]

Link to the code that reproduces this issue

https://github.com/o92/next-admin

To Reproduce

import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ModeToggle } from "@/components/mode-toggle";
import { cookies } from "next/headers";

export default async function Page() {
    'use server'
    return (
        <div className="grid h-screen w-full place-content-center">
            <form action={createInvoice}>
                <Card className=" w-96 relative">
                    <ModeToggle className="absolute top-0 right-0"></ModeToggle>
                    <CardHeader>
                        <CardTitle className="text-2xl">登录</CardTitle>
                        <CardDescription>
                            请输入您的账号和密码进行登录.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="grid gap-4">
                        <div className="grid gap-2">
                            账号<Input name="email" type="text" required />
                        </div>
                        <div className="grid gap-2">
                            密码<Input name="password" type="password" required />
                        </div>
                    </CardContent>
                    <CardFooter>
                        <Button className="w-full">登陆</Button>
                    </CardFooter>
                </Card>
            </form>
        </div>
    )
}

async function createInvoice(formData:FormData) {
    'use server'
    cookies().delete("a");
    return formData;
}

![Uploading Screenshot 2024-08-16 at 21.40.21.png…]() ![Uploading Screenshot 2024-08-16 at 21.40.33.png…]()

Current vs. Expected behavior

no diff.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: unknown
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Bun: 1.1.24
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next start (local)

Additional context

No response

[o92]

[o92]

If I comment on the code about cookie:

import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ModeToggle } from "@/components/mode-toggle";
import { cookies } from "next/headers";

export default async function Page() {
    'use server'
    return (
        <div className="grid h-screen w-full place-content-center">
            <form action={createInvoice}>
                <Card className=" w-96 relative">
                    <ModeToggle className="absolute top-0 right-0"></ModeToggle>
                    <CardHeader>
                        <CardTitle className="text-2xl">登录</CardTitle>
                        <CardDescription>
                            请输入您的账号和密码进行登录.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="grid gap-4">
                        <div className="grid gap-2">
                            账号<Input name="username" type="text" required />
                        </div>
                        <div className="grid gap-2">
                            密码<Input name="password" type="password" required />
                        </div>
                    </CardContent>
                    <CardFooter>
                        <Button className="w-full">登陆</Button>
                    </CardFooter>
                </Card>
            </form>
        </div>
    )
}

async function createInvoice(formData:FormData) {
    'use server'
    // cookies().delete("a");

    return formData;
}