Layout is re-rendering when the page is updated

Answered

Tosa posted this in #help-forum

TosaOP

2024-04-06T12:44:37.000Z

I'm following https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages
And it says:

One benefit of using layouts in Next.js is that on navigation, only the page components update while the layout won't re-render. This is called partial rendering:

But I'm getting something different

Answered by Tosa

oh it's addressed in the next chapter

View full answer

5 Replies

TosaOP

2024-04-06T12:45:37.000Z

/app/dashboard/layout.tsx:

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  console.log("Rendering layout")
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

TosaOP

2024-04-06T12:49:20.000Z

oh it's addressed in the next chapter

Answer

TosaOP

2024-04-06T12:49:34.000Z

this is a bit misleading

I would suggest adding something like:

One benefit of using layouts in Next.js is that on navigation, only the page components update while the layout won't re-render. This is called partial rendering, _We will implement this feature next chapter_