Server state vs client state in NextJS - Performance Comparison

Performance: Server state vs client state

HIGH IMPACT

This concept affects page load speed and interaction responsiveness by determining where data is fetched and stored.

Fetching and managing data for a Next.js page

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.content}</div>;
}

Fetching data on the server delivers fully rendered HTML to the client, improving LCP and reducing loading states.

📈 Performance GainImproves LCP by delivering content immediately; reduces INP by avoiding client fetch delays.

Fetching and managing data for a Next.js page

NextJS

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.content}</div>;
}

Fetching data on the client delays Largest Contentful Paint (LCP) because the page renders without data first, causing a loading state.

📉 Performance CostBlocks LCP until client fetch completes; increases INP due to delayed content availability.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client fetch on mount	Minimal initial DOM	Multiple reflows due to loading state changes	Multiple paints for loading and content	[X] Bad
Server-side data fetch	Full DOM with data on load	Single reflow on initial render	Single paint with content	[OK] Good
Client state for UI interactions	DOM updates on interaction	Reflows only on state change	Paints only on changed elements	[OK] Good
Server state for UI interactions	Network requests on each interaction	Reflows delayed by network	Paints delayed by data arrival	[X] Bad

Rendering Pipeline

Server state fetching happens before HTML is sent, affecting the Critical Rendering Path by delivering ready content. Client state updates happen after initial render, affecting interaction responsiveness and repaint.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckFor server state: HTML generation and network latency; for client state: JavaScript execution and re-rendering.

Core Web Vital Affected

LCP, INP

This concept affects page load speed and interaction responsiveness by determining where data is fetched and stored.

Optimization Tips

1Fetch data on the server to improve initial page load speed (LCP).

2Keep interactive UI state on the client to improve responsiveness (INP).

3Avoid refetching server state on every user interaction to reduce delays.

Performance Quiz - 3 Questions

Which approach improves Largest Contentful Paint (LCP) in Next.js?

A Storing all UI state on the server

B Fetching data on the client after rendering

C Fetching data on the server before rendering

D Using client state for initial data fetch

DevTools: Performance

How to check: Record a page load and interaction in DevTools Performance panel. Look for long tasks during load and delays after user input.

What to look for: Check LCP timing for server vs client data fetch. Look at interaction latency and scripting time for client state responsiveness.