Not-found.tsx customization in NextJS - Performance & Optimization

Performance: Not-found.tsx customization

MEDIUM IMPACT

This affects the page load speed and user experience when a user navigates to a non-existent route, impacting the Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

Customizing the 404 Not Found page in Next.js

NextJS

export default function NotFound() {
  return <div><h1>Page Not Found</h1><p>Sorry, we couldn't find that page.</p></div>;
}

Static content renders immediately without waiting for data, improving load speed and user experience.

📈 Performance GainInstant render, reduces LCP by 300-500ms, no blocking

Customizing the 404 Not Found page in Next.js

NextJS

export default async function NotFound() {
  const data = await fetch('https://api.example.com/slow-endpoint').then(res => res.json());
  return <div>{data.message}</div>;
}

Fetching data with await (blocking) in the NotFound component blocks rendering and delays page load.

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

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking data fetch in NotFound	Moderate (due to data rendering)	1+ reflows triggered by delayed content	High paint cost due to delayed render	[X] Bad
Static simple NotFound component	Low (minimal DOM nodes)	Single reflow	Low paint cost with immediate render	[OK] Good

Rendering Pipeline

When the NotFound component renders, the browser processes style calculation, layout, paint, and composite. Heavy or async operations in NotFound delay these stages, especially layout and paint.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to blocking data fetching or large components

Core Web Vital Affected

LCP

This affects the page load speed and user experience when a user navigates to a non-existent route, impacting the Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

Optimization Tips

1Avoid blocking data fetching in Not-found.tsx to prevent blocking rendering.

2Keep Not-found.tsx content static and lightweight for faster load times.

3Use DevTools Performance tab to verify Not-found.tsx renders quickly without delays.

Performance Quiz - 3 Questions

What is the main performance risk of fetching data with await (blocking) inside Not-found.tsx?

A It increases bundle size significantly

B It blocks rendering and delays Largest Contentful Paint

C It causes excessive CSS recalculations

D It improves user experience by showing dynamic content

DevTools: Performance

How to check: Open DevTools > Performance tab > Record page load on a non-existent route > Look for long tasks or delayed paint events

What to look for: Check LCP timing and if the NotFound component blocks rendering or causes layout shifts