Server-side state passing in NextJS - Performance & Optimization

Performance: Server-side state passing

MEDIUM IMPACT

This affects the initial page load speed and time to interactive by controlling how much data is sent from server to client and how quickly the page renders.

Passing server-side data to a Next.js page for initial render

NextJS

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

export default function Page({ summary }) {
  return <div>{summary}</div>;
}

Passing only essential summary data reduces payload size and speeds up initial render.

📈 Performance GainSaves 150-400kb in payload, reduces LCP by 300-500ms

Passing server-side data to a Next.js page for initial render

NextJS

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

export default function Page({ data }) {
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Fetching and passing a large amount of data causes a big JSON payload sent to the client, increasing load time and delaying rendering.

📉 Performance CostAdds 200-500kb to initial HTML payload, blocking LCP until data is parsed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing large server-side state	No extra DOM nodes	1 reflow after hydration	High paint cost due to delayed hydration	[X] Bad
Passing minimal server-side state	No extra DOM nodes	1 reflow after hydration	Low paint cost with fast hydration	[OK] Good

Rendering Pipeline

Server-side state is serialized into the HTML sent to the browser. The browser parses this data during HTML parsing, then React hydrates the page using this state. Large state increases HTML size and parsing time, delaying style calculation and paint.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Hydration

⚠️ BottleneckHTML Parsing and Hydration

Core Web Vital Affected

LCP

This affects the initial page load speed and time to interactive by controlling how much data is sent from server to client and how quickly the page renders.

Optimization Tips

1Only pass the minimal necessary data from server to client.

2Avoid embedding large JSON objects in the HTML response.

3Use client-side fetching for non-critical data to speed up initial load.

Performance Quiz - 3 Questions

How does passing large server-side state in Next.js affect page load?

A Increases HTML size and delays Largest Contentful Paint

B Reduces JavaScript bundle size

C Improves hydration speed

D Has no effect on performance

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect the document request size and payload. Check the size of the HTML and JSON data embedded.

What to look for: Look for large HTML payload size and long blocking time before first contentful paint indicating heavy server-side state.