Reactjs – Nextjs rerender all the page after page fully loaded

I’m working with a Next.js 14 application using Server-Side Rendering (SSR) to generate the complete HTML needed for the browser. However, I’ve encountered an issue where, after the page fully loads in the browser, Next.js seems to trigger a re-render. This re-render briefly displays the Loading.tsx component again before finally showing the intended page. I’m unsure if this is expected behavior or if I might be missing something in my implementation. Has anyone experienced a similar issue and can offer some insights or solutions? Any help or advice on this matter would be greatly appreciated.

Thank you in advance.

To address the issue, I systematically removed various libraries and components that I suspected might be causing the re-render. This included libraries like React-Query and Next-theme. I even went as far as removing the header and navbar from my application. Despite these efforts, the problem persists.

Initially, I expected that by eliminating these elements, the unexpected re-render issue would be resolved. My goal was to isolate the component or library responsible for triggering the re-render. However, even after these modifications, the issue of the Loading.tsx component briefly appearing during page load remains unresolved.

Interestingly, this problem only occurs during the initial page load. When navigating between routes after the initial load, everything functions as expected without any unwanted re-renders. It seems that the root cause might not be related to the specific libraries or components I suspected.

I’m continuing to seek insights or suggestions that might help identify and resolve this initial load re-rendering issue. Any further guidance would be highly appreciated.