How Next.js renders (server-first model) - Performance Optimization Steps

Performance: How Next.js renders (server-first model)

HIGH IMPACT

This affects the initial page load speed and time to first meaningful paint by rendering content on the server before sending it to the browser.

Rendering a page with dynamic content

NextJS

export const dynamic = 'force-static';

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

export default Page;

Fetching data on the server before sending HTML allows immediate content display, improving LCP and perceived speed.

📈 Performance GainReduces LCP by up to 2 seconds and avoids blocking on client JS execution.

Rendering a page with dynamic content

NextJS

import React from 'react';

export default function Page() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) return <p>Loading...</p>;
  return <div>{data.message}</div>;
}

This client-side fetching delays content rendering until JavaScript runs, causing slower initial paint and worse LCP.

📉 Performance CostBlocks meaningful content rendering until JS loads and runs, increasing LCP by 1-2 seconds on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching after load	Many (dynamic nodes created after JS runs)	Multiple reflows as content loads	High paint cost due to delayed content	[X] Bad
Server-first rendering with pre-fetched data	Minimal (static HTML nodes)	Single reflow on initial paint	Low paint cost with immediate content	[OK] Good

Rendering Pipeline

Next.js server-first rendering sends fully rendered HTML to the browser, reducing client-side work. The browser can paint content immediately without waiting for JavaScript to fetch or render data.

→HTML Generation

→Network Transfer

→Initial Paint

⚠️ BottleneckNetwork Transfer and Server Rendering time

Core Web Vital Affected

LCP

This affects the initial page load speed and time to first meaningful paint by rendering content on the server before sending it to the browser.

Optimization Tips

1Render pages on the server to send ready HTML for faster initial paint.

2Avoid fetching data only on the client to prevent delayed content rendering.

3Use caching and incremental static regeneration to speed up server response times.

Performance Quiz - 3 Questions

What is the main performance benefit of Next.js server-first rendering?

A Smaller JavaScript bundle size

B Faster initial content display by sending pre-rendered HTML

C Reduced CSS file size

D Improved client-side interactivity speed

DevTools: Performance

How to check: Record a page load in the Performance panel. Look for the time when the main content is painted and when JavaScript execution starts.

What to look for: A shorter time to first meaningful paint and less blocking time before content appears indicates good server-first rendering.