CODEWITHSUNDEEP
javascriptreactjsnext.jsnext.js13trpc
seven
seven

Reputation: 1674

NextJS cookies() function cause page refresh / trpc always fetches entire route

Should a cookies().set() function call cause full page refresh in new Next 14? In the chart component, every interval change requests new data so I thought I would do this server-side, until now it refetched the data and it was fine but since yesterday it started to cause a full page refresh and reload of my other component which is on this same route but is more expensive and loads much longer. The docs only say that

Using it in a layout or page will opt a route into dynamic rendering at request time.

But this does not necessarily mean that having this call in my component would reload the entire page right?

And also if you will I have a concern about trpc that I use, when I make a call to my backend for any route in the network tab I always see a fetch where it fails to load the response and payload in case of a component with this cookies() call is the value of the cookie i set or some gibberish from next i believe

1: "tkJNa2edO1ReSBFeTtF3/ylWv+2A46cEY5LLkcOCkYgMnfkWeX/SMd+/CCIPBH4W9IettDZ1H0IM9xHzjjKJ4w28FevcMDLnMkHF0H7TymCoxFH04w=="
2_$ACTION_REF_1: 
2_$ACTION_1:1: ["$@2"]
2_$ACTION_1:0: {"id":"8ad85c6f04f4b5912851a1a1b7731332e1b2753c","bound":"$@1"}
2_$ACTION_1:2: "tWfv6x4N8OQpm2utvGMwGwQAHv8WRKnPZYXCJEXaI224Bve7D+IVjbkA9F+v9u5hdU2xmwNmx8usNLY5DsewZqmpDRXD1X7vzsM33CUZSs8wsg9DVA=="
0: ["$@1","$K2"]

This is my component:

export async function TradingCharts({ symbol }: D3ChartProps) {
  const interval = (cookies().get('interval')?.value ?? '1d') as KlineInterval;
  const candlesticksPromise = client.binance.candlestick.query({
    symbol,
    interval,
  });
  const lastTradePromise = client.binance.lastTrade.query({ symbol });
  const [candlesticks, recentTrade] = await Promise.all([candlesticksPromise, lastTradePromise]);

  const handleIntervalChange = async (interval: KlineInterval) => {
    'use server';
    cookies().set('interval', interval, { maxAge: 0 });
  };

  return (
    <section className={styles.container}>
      <IntervalButtons changeInterval={handleIntervalChange} currentInterval={interval} />
      <CandlestickChart
        {...{ symbol, candlesticks, interval, recentTrade: parseFloat(recentTrade ?? '0') }}
        key={interval}
      />
    </section>
  );
}

and just in case this is how I initialize trpc in Nextjs

export const client = createTRPCProxyClient<AppRouter>({
  links: [
    splitLink({
      condition: (op) => op.type === 'subscription',
      true: wsLink({
        client: createWSClient({
          url: 'ws://localhost:7000',
        }),
      }),
      false: httpBatchLink({
        url: 'http://localhost:7000',
        fetch(url, options) {
          return fetch(url, {
            ...options,
            credentials: 'include',
            cache: 'no-store',
          });
        },
      }),
    }),
  ],
});

Thanks a lot.

Upvotes: 2

Views: 1503

Answers (1)

Eric Burel
Eric Burel

Reputation: 4944

In my understanding, what you want here is to call the Server Action, but set the cookie client-side:

onIntervalChange={async (interval) => {
    // NOTE: at this point I still can't tell if you need to use
    // a React transition, there are no official answers on this
    const data = await yourServerActionThatGetsData(interval)
    setState(data)
   // CLIENT-SIDE cookie setting code, using smth like react-cookies
    cookies.set("interval", interval)
    
}}

Let me know if I misunderstood your use case

Upvotes: 1

Related Questions