Modal pattern with intercepting routes in NextJS - Performance & Optimization

Performance: Modal pattern with intercepting routes

MEDIUM IMPACT

This pattern affects page load speed and interaction responsiveness by controlling when modals load and how routes update without full page reloads.

Displaying a modal dialog triggered by navigation without full page reload

NextJS

import { useRouter } from 'next/navigation';

function Page() {
  const router = useRouter();
  const openModal = () => {
    router.push('/page/modal'); // Intercepting route opens modal overlay
  };
  return <button onClick={openModal}>Open Modal</button>;
}

// Modal is a separate route segment rendered as overlay without full reload

Uses Next.js intercepting routes to load modal as overlay, avoiding full page reload and improving responsiveness.

📈 Performance GainReduces blocking time to under 50ms, improves INP by avoiding full reload

Displaying a modal dialog triggered by navigation without full page reload

NextJS

import { useRouter, useSearchParams } from 'next/navigation';

function Page() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const modalOpen = searchParams.get('modal') === 'true';

  return (
    <>
      <button onClick={() => router.push('/page?modal=true')}>Open Modal</button>
      {modalOpen && <Modal />}
    </>
  );
}

function Modal() {
  return <div>Modal Content</div>;
}

// Navigation triggers client navigation/re-render to show modal content
// e.g., /page?modal=true causes navigation and re-render

Triggers full page reload on modal open, causing slower interaction and higher load times.

📉 Performance CostBlocks rendering for 300-500ms depending on network, increases LCP and INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload modal	High (reloads entire DOM)	Multiple reflows	High paint cost	[X] Bad
Intercepting route modal overlay	Low (adds overlay nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Intercepting routes load modal content as a client-side overlay, avoiding full page reload and reducing layout recalculations.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint due to full page reload in bad pattern

Core Web Vital Affected

INP

This pattern affects page load speed and interaction responsiveness by controlling when modals load and how routes update without full page reloads.

Optimization Tips

1Use intercepting routes to load modals as overlays without full page reloads.

2Avoid adding heavy DOM changes inside modal overlays to reduce reflows.

3Measure interaction responsiveness (INP) to verify modal performance.

Performance Quiz - 3 Questions

What is the main performance benefit of using intercepting routes for modals in Next.js?

A Improves SEO by hiding modal content from crawlers

B Reduces JavaScript bundle size by removing modal code

C Avoids full page reloads, improving interaction speed

D Automatically caches modal content on the server

DevTools: Performance

How to check: Record a user interaction opening the modal. Compare time between click and next paint. Look for full page reload events.

What to look for: Long main thread blocking and multiple layout recalculations indicate bad pattern; short interaction time and minimal layout changes indicate good pattern.