Streaming long operations in NextJS - Performance & Optimization

Performance: Streaming long operations

HIGH IMPACT

This affects how quickly users see content during long server operations by sending partial data progressively.

Rendering a page with a long server-side operation

NextJS

import React from 'react';

export default async function Page() {
  const stream = fetchLongDataStream();
  return (
    <div>
      <React.Suspense fallback={<Loading />}>
        <StreamingContent stream={stream} />
      </React.Suspense>
    </div>
  );
}

Streams data progressively to the client, allowing partial content to render early and improve perceived speed.

📈 Performance GainReduces LCP by showing content chunks as they arrive, improving user experience during long operations

Rendering a page with a long server-side operation

NextJS

export default async function Page() {
  const data = await fetchLongData();
  return <div>{data}</div>;
}

The entire data must load before rendering, blocking the first paint and delaying user feedback.

📉 Performance CostBlocks rendering until data fetch completes, increasing LCP by several seconds for long operations

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking full data fetch	Single large DOM update after full data	1 reflow after full data	High paint cost due to large update	[X] Bad
Streaming partial content	Multiple small DOM updates progressively	Multiple small reflows but faster perceived paint	Lower paint cost per chunk	[OK] Good

Rendering Pipeline

Streaming sends partial HTML chunks progressively, allowing the browser to start parsing and painting before the full content is ready.

→Network

→HTML Parsing

→Paint

→Composite

⚠️ BottleneckNetwork and HTML Parsing waiting for full data in non-streaming; streaming reduces this wait.

Core Web Vital Affected

LCP

This affects how quickly users see content during long server operations by sending partial data progressively.

Optimization Tips

1Stream partial HTML to reduce time before first meaningful paint.

2Use React Suspense to handle loading states during streaming.

3Balance chunk size to avoid too many small reflows while keeping content progressive.

Performance Quiz - 3 Questions

What is the main performance benefit of streaming long operations in Next.js?

A It allows partial content to render early, improving perceived load speed.

B It reduces the total amount of data sent over the network.

C It eliminates the need for server-side rendering.

D It caches all data on the client to avoid future requests.

DevTools: Performance

How to check: Record a page load with streaming enabled, look for early Contentful Paint and progressive HTML parsing in the flame chart.

What to look for: Early LCP event and incremental DOM updates showing partial content rendering before full data arrives.