Why rendering strategy matters in NextJS - Performance Evidence

Performance: Why rendering strategy matters

HIGH IMPACT

Rendering strategy affects how fast the main content appears and how quickly users can interact with the page.

Rendering a page with dynamic data

NextJS

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

Pre-fetching data during build or server-side rendering allows the page to render immediately with content.

📈 Performance GainReduces LCP by loading content faster and avoids blocking rendering.

Rendering a page with dynamic data

NextJS

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

Fetching data directly in the component without server-side rendering delays content display and blocks rendering.

📉 Performance CostBlocks rendering until data fetch completes, increasing LCP by 1-3 seconds depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching	Many (delayed DOM update)	Multiple (due to late content injection)	High (delayed paint)	[X] Bad
Server-side or static rendering	Few (immediate DOM ready)	Single (initial layout)	Low (fast paint)	[OK] Good

Rendering Pipeline

Rendering strategy determines when and where data is fetched and HTML is generated, affecting the browser's ability to paint content quickly.

→HTML Generation

→Style Calculation

→Layout

→Paint

⚠️ BottleneckHTML Generation when data fetching blocks rendering

Core Web Vital Affected

LCP, INP

Rendering strategy affects how fast the main content appears and how quickly users can interact with the page.

Optimization Tips

1Pre-render pages on the server or at build time to speed up initial content display.

2Avoid fetching data on the client during initial load to reduce blocking and improve responsiveness.

3Choose rendering strategies based on content freshness needs to balance performance and data accuracy.

Performance Quiz - 3 Questions

Which rendering strategy generally improves Largest Contentful Paint (LCP) the most?

A Client-side rendering with data fetching after load

B Server-side rendering or static generation

C Rendering only on user interaction

D Using heavy animations on load

DevTools: Performance

How to check: Record a page load and look for the Largest Contentful Paint event timing and scripting blocking time.

What to look for: Long gaps before LCP or heavy scripting blocking indicate poor rendering strategy.