Hello everyone,

I'm building a SaaS application where I want to keep all my pages in the DOM for a better user experience. Each page is a component that I either show or hide via CSS display property based on the current URL. I have a menu that updates the URL, which in turn shows the appropriate component.

The issue I'm facing is with useRouter. I use const router = useRouter(); for navigation using router.push() throughout my components and sub-components. However, using useRouter triggers a re-render of all components every time the URL changes.

Is there a way to prevent useRouter from causing these unwanted re-renders while still being able to navigate between pages with ( router.push("path", undefined, { shallow: true })) ?

I will not change all my app at the point where I'm but yes if you have a quick fix idea and also a long term fix idea

Thank you in advance!