Next.js Discord

Discord Forum

NextJS cookies() function cause page refresh.

Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Hi, would you please be able to help me with this case ? I don't know if this is Next or trpc, if anyone has experience with trpc please tell me if i am able to use Next cache and revalidate it by tags while using trpc calls.

13 Replies

Eric Burel
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
Eric Burel
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
Barbary LionOP
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 }} />
      <PriceLevels {...{ symbol }} oldOrders={orders} />
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">
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