NextJS 13/14 Sever Component Code Runs Twice on Page Load with router.replace in Production

91 Views Asked by At

Summary

Hello,

I have a server component which processes some data that then gets sent to the client. Let's say the route is /test. On initial page load the data gets processed as expected, but when router.replace is called client side on the same route (/test), in this case inside a useEffect, the server component code reruns and sends newly processed data to the client.

To note this only happens with production builds. next dev behaves as expected.

Why is that the case? Is it expected behavior and is it possible not to trigger that second rerender?

Below is a simplified version of the code:

server component test/page.tsx
------
export default function ProductPage() {
  console.log('processing...');
  return (
    <ClientContent>
  );
}

client component ClientContent
----
export default function ClientContent() {
  useEffect(() => {
    router.replace('/test'):
  }, [])
  return (<></>);
}

My expectation is that the page gets cached on initial load and calling router.replace on the same route would not trigger anything.

0

There are 0 best solutions below