Static rendering (default) in NextJS - Performance & Optimization

Performance: Static rendering (default)

HIGH IMPACT

Static rendering impacts the initial page load speed by pre-building HTML at build time, reducing server work and speeding up content delivery.

Rendering a page that does not change often

NextJS

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

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

Data is fetched once at build time, serving static HTML quickly without server delay.

📈 Performance GainReduces server work, improves LCP by delivering pre-built HTML instantly.

Rendering a page that does not change often

NextJS

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

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

This fetches data on every request, causing slower response times and higher server load.

📉 Performance CostBlocks rendering on each request, increasing Time to First Byte and LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side rendering on each request	High (dynamic DOM)	Multiple per request	High due to delayed HTML	[X] Bad
Static rendering at build time	Low (static DOM)	None at runtime	Low, instant paint	[OK] Good

Rendering Pipeline

Static rendering generates HTML during build, so the browser receives ready-to-display content, skipping server-side rendering on each request.

→Server Build

→Network Transfer

→Browser Paint

⚠️ BottleneckServer Build time if many pages or heavy data fetching

Core Web Vital Affected

LCP

Static rendering impacts the initial page load speed by pre-building HTML at build time, reducing server work and speeding up content delivery.

Optimization Tips

1Use static rendering for pages with data that changes infrequently.

2Avoid server-side data fetching on every request to reduce load and improve speed.

3Pre-build pages to deliver fast initial HTML and improve LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of static rendering in Next.js?

A Pages load faster because HTML is pre-built at build time

B Pages update data on every user request

C Server does more work on each request

D Browser has to build the page from scratch

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check if HTML is served instantly without waiting for server processing.

What to look for: Look for fast Time to First Byte (TTFB) and quick HTML document load indicating static rendering.