0
0
NextJSframework~5 mins

Why layouts avoid redundant rendering in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Layouts help keep parts of a page that don't change from reloading every time you visit a new page. This makes your app faster and smoother.

When you want a header or footer to stay the same across many pages.
When you have a sidebar menu that should not reload on every page change.
When you want to keep user login info visible without resetting it on navigation.
When you want to improve page load speed by not re-rendering common parts.
When you want to keep animations or video playing without interruption between pages.
Syntax
NextJS
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children} {/* This is where page content goes */}
        <Footer />
      </body>
    </html>
  )
}

The children prop is where the page content is inserted inside the layout.

Layouts wrap pages so shared parts like headers or footers don't reload on navigation.

Examples
This layout keeps the sidebar visible while only the main content changes.
NextJS
export default function DashboardLayout({ children }) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}
This layout wraps all pages with a navbar and footer that don't reload on page changes.
NextJS
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  )
}
Sample Program

This layout component wraps any page with a header and footer. When you navigate between pages, the header and footer stay the same and do not reload, so the app feels faster.

NextJS
import React from 'react';

function Header() {
  return <header><h1>My Site</h1></header>;
}

function Footer() {
  return <footer><p>Ā© 2024 My Site</p></footer>;
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

// Example page component
export function HomePage() {
  return <main><p>Welcome to the homepage!</p></main>;
}
OutputSuccess
Important Notes

Layouts in Next.js 14+ use the App Router and wrap pages automatically.

Only the {children} part changes when you navigate, avoiding full page reloads.

This improves user experience by keeping stable UI parts visible and fast.

Summary

Layouts keep shared page parts from reloading on every page change.

This avoids redundant rendering and makes navigation faster.

Use layouts to wrap pages with headers, footers, or sidebars that stay constant.