Streaming and partial rendering in NextJS - Performance & Optimization

Performance: Streaming and partial rendering

HIGH IMPACT

This affects how quickly the user sees meaningful content by sending parts of the page as soon as they are ready.

Rendering a large page with multiple components

NextJS

import { Suspense } from 'react';

export default async function Page() {
  const dataPromise = fetchDataAsync();
  return (
    <>
      <Header />
      <Suspense fallback={<Loading />}>
        <MainComponent data={await dataPromise} />
      </Suspense>
    </>
  );
}

Streams header immediately and renders main content as soon as data arrives, reducing wait time.

📈 Performance GainReduces LCP by showing partial content early, improving perceived load speed.

Rendering a large page with multiple components

NextJS

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

The entire page waits for all data before sending anything to the browser, delaying first content paint.

📉 Performance CostBlocks rendering until all data is ready, increasing LCP by several seconds on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full synchronous render	Single large DOM update	1 large reflow	High paint cost due to delayed content	[X] Bad
Streaming with partial rendering	Multiple smaller DOM updates	Multiple small reflows	Lower paint cost with faster visible content	[OK] Good

Rendering Pipeline

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

→HTML Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckWaiting for full data before sending HTML delays HTML Parsing and Paint stages.

Core Web Vital Affected

LCP

This affects how quickly the user sees meaningful content by sending parts of the page as soon as they are ready.

Optimization Tips

1Send HTML chunks as soon as parts of the page are ready to reduce wait time.

2Use React Suspense or Next.js streaming features to enable partial rendering.

3Avoid blocking the entire page render on slow data fetching to improve LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of streaming and partial rendering in Next.js?

A Smaller JavaScript bundle size

B Reduced server CPU usage

C Faster display of initial content to the user

D Improved SEO ranking

DevTools: Performance

How to check: Record a page load and look for the time when the first meaningful paint occurs and when the full content is loaded.

What to look for: Check if content appears progressively (multiple paint events) rather than all at once, indicating streaming is working.