Cookies.set is meant to add a Set-Cookie header to the HTTP response

so I think you accidentaly do that, what does the network give?

you need to access your cookie via usual client-side JavaScript rather than Next cookies() function I think

I've never tried to use client-side, you might also want to open a discussion/issue on Next github or see if one exists, that's an interesting question and it's actually quite intuitive to try to use "cookies().set()" like you did

Anyway given your current code, it's expected to behave like so

I'll answser more precisely on SO

yeah setting cookies with server action cause the whole page reload for me too. maybe its sending the post request to the same url? i'm not sure

that might be a plain bug though, a server action with JS enabled should maybe not need that if you don't explicitely redirect to another page, or refresh

it's really worth asking on GitHub, the community help is, well, the community so it's hard to tell what's expected from the framework in advanced use cases like that

Hi Eric thanks a lot for the reply I did not consider that I called it from the client side, I'm a little embarrassed, i tried similar code with my other purely server-side components and only the containing chunk was rerendered

export const Ladder = async ({ symbol }: LadderProps) => {
  const orders = (await client.binance.getOrdersForSymbol.query({ symbol })) ?? [];

  return (
    <section className={styles.wrapper}>
      <Sidebar size="small">
        <OrderButtons {...{ symbol }} />
        <EmergencyButton {...{ symbol }} />
      </Sidebar>
      <PriceLevels {...{ symbol }} oldOrders={orders} />
    </section>
  );
};

here ladder is adjacent component to the chart component from the SO question it contains EmergencyButton component which is also a server component

export const EmergencyButton = ({ symbol }: EmergencyButtonProps) => {
  async function cancelOrders() {
    'use server';
    try {
      await client.binance.deleteAllOrdersForSymbol.mutate({ symbol });
      cookies().set('cancel-orders', 'true', { maxAge: 0 });
    } catch (error) {
      console.error('Error in cancelOrders:', error);
    }
  }
  return (
    <form className={styles.form} action={cancelOrders}>
      <Button size="small" variant="secondary">
       X
      </Button>
    </form>
  );
};

interestingly when I click EmergencyButton parent component is rerendered too but not the adjacent Chart component, so it looks like it is invalidating the entire tree-chunk (assuming that every server component is being streamed independently)

I'm afraid I do not understand it as deeply as you do 🙂 so I would not know what to ask about exactly - but this is an interesting thing to learn