Parallel routes concept in NextJS - Performance & Optimization

Performance: Parallel routes concept

MEDIUM IMPACT

Parallel routes affect how quickly different parts of a page load and render by allowing multiple UI segments to load simultaneously.

Loading multiple UI sections on a page without blocking each other

NextJS

// File structure:
// app/dashboard/@main/page.tsx     (MainContent)
// app/dashboard/@sidebar/page.tsx  (Sidebar)
// app/dashboard/@footer/page.tsx   (Footer)
// app/dashboard/layout.tsx (below)

import { ReactNode } from 'react';

export default function Layout({
  main,
  sidebar,
  footer
}: {
  main: ReactNode;
  sidebar: ReactNode;
  footer: ReactNode;
}) {
  return (
    <>
      {main}
      {sidebar}
      {footer}
    </>
  );
}

Loads each route segment independently and in parallel, allowing faster rendering of visible content and reducing blocking.

📈 Performance GainReduces LCP by 150-300ms by parallelizing route loading and rendering

Loading multiple UI sections on a page without blocking each other

NextJS

export default function Page() {
  return (
    <>
      <MainContent />
      <Sidebar />
      <Footer />
    </>
  )
}

All components load sequentially in the same route, causing slower overall load and blocking rendering of some parts until others finish.

📉 Performance CostBlocks rendering until all components load, increasing LCP by 200-400ms depending on content size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single route loading all UI	Single DOM tree with all nodes	Multiple reflows as components mount sequentially	Higher paint cost due to delayed rendering	[X] Bad
Parallel routes loading UI segments	Multiple smaller DOM trees loaded independently	Fewer reflows per route, can happen concurrently	Lower paint cost with faster visible content	[OK] Good

Rendering Pipeline

Parallel routes split the UI into independent segments that the browser can fetch and render simultaneously, reducing blocking in the critical rendering path.

→Network Fetch

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork Fetch and JavaScript Execution when routes load sequentially

Core Web Vital Affected

LCP

Parallel routes affect how quickly different parts of a page load and render by allowing multiple UI segments to load simultaneously.

Optimization Tips

1Split UI into parallel routes to load multiple parts simultaneously.

2Avoid loading all UI in a single route to prevent blocking and slow LCP.

3Use parallel routes to improve perceived load speed and responsiveness.

Performance Quiz - 3 Questions

How do parallel routes improve page load performance in Next.js?

A By loading multiple UI segments at the same time without waiting for others

B By combining all UI segments into one large bundle

C By delaying rendering until all data is fetched

D By disabling JavaScript on the page

DevTools: Performance

How to check: Record a page load and look at the flame chart to see if multiple route segments load and render concurrently or sequentially.

What to look for: Look for overlapping network requests and JavaScript execution for route segments indicating parallel loading, which improves LCP.