menu

Questions & Answers

How to route between pages with minimum re-render in a dashboard in Next.js

The Dashboard looks something like this:

export default function Dashboard({ children }) {
return (
    <>
        <DashboardLayout menu={menu}>
            <DashboardPage variant="cards" flow="one-one">
                {children}
            </DashboardPage>
        </DashboardLayout>
    </>
)

}

The Dashboard has a sidebar menu on the left which allows for navigating between different DashboardPages. However, it is precisely this navigation that I am uncertain about. Because the Dashboard pages all share components like the menu, the sidebar, the footer, etc., I ideally don't want to re-render these components.

If I use the Next.JS native <Link> component, then the whole page get re-rendered.

The only alternative I see to this is using a React hook like useState or useReducer to set which pages gets rendered as such:

export default function Dashboard() {
const [state, dispatch] = useReducer();

return (
    <>
        <DashboardLayout menu={menu}>
            <DashboardPage variant="cards" flow="one-one">
                {state == 'page1' && <DashboardPage1 />}
                {state == 'page2' && <DashboardPage1 />}
                {state == 'page3' && <DashboardPage1 />}
                ...
                {state == 'pageN' && <DashboardPageN />}
            </DashboardPage>
        </DashboardLayout>
    </>
)

}

I am relatively new to both React and Next.JS, and I am not sure if I am thinking about this the right way. I feel like the first option leads to unnecessary re-renders, and the second option is a bit ugly.

If anyone could help me out and let me know what the best way to solve this problem is, that would be fantastic.

Comments:
2023-01-23 23:25:03
React generally rerenders when it needs to. Are you seeing an actual performance degradation, i.e. have you actively measured/audited the performance? How exactly are you validating/verifying what is rendered/rerendered? Can you edit the post to share more relevant details and more specifically what the issue is?
Answers(1) :

You can use the built-in tag of NextJS and NextJS Router

{/* Adding the Link Component */}
<Link href="/"> Dashboard</Link>

import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

Or you can use React-Router-DOM for navigation using useNavigate hook An eg. of React-router

import { useNavigate } from "react-router-dom";

const Page = () => {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/pagename')}>
      Go To Page
    </button>
  );
}
Comments:
2023-01-23 23:25:03
Thank you for your answer! However, there is still the question of "minimum re-rendering". If I route as you propose here, if I am not mistaken, this would have the same effect as using a <Link> component, wouldn't it? Which means that things like the sidebar, menu and footer would re-render? I might be wrong here, but just want to make sure :)