Interleaving server and client in NextJS - Performance & Optimization

Performance: Interleaving server and client

HIGH IMPACT

This affects how quickly the user sees meaningful content and how responsive the page feels during loading.

Rendering a page with both server and client components

NextJS

export default async function Page() {
  const data = await fetchDataAsync();
  return (
    <>
      <ServerComponent data={data} />
      <ClientComponent />
    </>
  );
}

function ServerComponent({ data }) {
  return <div>{data}</div>;
}

'use client';
function ClientComponent() {
  const [state, setState] = React.useState(null);
  React.useEffect(() => {
    setState('Client loaded');
  }, []);
  return <div>{state}</div>;
}

Server sends HTML progressively with data, while client components hydrate separately, enabling faster first contentful paint.

📈 Performance GainReduces blocking time, improves LCP by 300+ ms, and allows interaction sooner.

Rendering a page with both server and client components

NextJS

export default function Page() {
  const data = fetchDataSync();
  return <ClientComponent data={data} />;
}

function ClientComponent({ data }) {
  const [state, setState] = React.useState(null);
  React.useEffect(() => {
    setState(data);
  }, [data]);
  return <div>{state}</div>;
}

Fetching data synchronously blocks server rendering and delays sending HTML to the client, causing slower initial paint.

📉 Performance CostBlocks rendering until data fetch completes, increasing LCP by 500+ ms depending on data size.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous data fetch blocking server render	Low initial DOM nodes	Single large reflow after data fetch	High paint cost due to delayed content	[X] Bad
Interleaved server streaming with client hydration	More DOM nodes progressively added	Multiple small reflows during hydration	Lower paint cost with faster content display	[OK] Good

Rendering Pipeline

Interleaving server and client components lets the browser start rendering server HTML immediately while client JavaScript loads and hydrates separately.

→HTML Streaming

→Hydration

→Paint

→Composite

⚠️ BottleneckHydration stage can delay interactivity if client components are large or complex.

Core Web Vital Affected

LCP

This affects how quickly the user sees meaningful content and how responsive the page feels during loading.

Optimization Tips

1Stream server HTML early to improve Largest Contentful Paint (LCP).

2Defer client component hydration to avoid blocking initial render.

3Split components to balance server rendering and client interactivity.

Performance Quiz - 3 Questions

What is the main performance benefit of interleaving server and client rendering in Next.js?

A Eliminating all reflows during page load

B Faster initial content display by streaming HTML progressively

C Reducing JavaScript bundle size by removing client code

D Avoiding hydration completely

DevTools: Performance

How to check: Record page load, look for HTML streaming in the network waterfall and check when first contentful paint occurs relative to hydration start.

What to look for: Early HTML arrival and paint marks with hydration happening after initial paint indicate good interleaving.