Streaming and partial rendering in NextJS - Step-by-Step Execution

Concept Flow - Streaming and partial rendering

Start Server Rendering

↓

Render Initial HTML Chunk

↓

Send Chunk to Browser

↓

Browser Displays Partial Content

↓

Render Next Chunk on Server

↓

Send Next Chunk to Browser

↓

Browser Updates with More Content

↓

Repeat Until Full Page Rendered

↓

Complete Rendering

The server renders and sends parts of the page step-by-step, letting the browser show content early and update progressively.

Execution Sample

NextJS

import React, { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <MainContent />
    </>
  );
}

This Next.js component shows a loading fallback for the Header first, then streams MainContent, showing partial content early while Header loads.

Execution Table

Step	Server Action	Content Sent	Browser Action	Visible Content
1	Start rendering Page component	No content yet	Waiting for data	Blank page
2	Render <Suspense> fallback for Header	<p>Loading header...</p>	Display fallback	Shows 'Loading header...' text
3	Render MainContent component	<main>Main content here</main>	Append main content	Shows 'Loading header...' + Main content
4	Header component resolves	<header>Header content</header>	Replace fallback with Header	Shows Header + Main content
5	Finish rendering all components	Full page sent	Page fully loaded	Complete page visible

💡 All components rendered and streamed; browser shows full page progressively.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
ContentSent	''	'<p>Loading header...</p>'	'<p>Loading header...</p><main>Main content here</main>'	'<header>Header content</header><main>Main content here</main>'	Full HTML page
BrowserVisible	''	'Loading header...'	'Loading header... + Main content'	'Header + Main content'	Full page content

Key Moments - 2 Insights

Why does the browser show 'Loading header...' before the actual header content?

Because the <Suspense> fallback is sent first (see execution_table step 2), letting the browser show something while waiting for the Header component to load.

How does streaming improve user experience compared to waiting for the full page?

Streaming sends parts of the page early (steps 2 and 3), so the user sees content sooner instead of a blank page until everything loads (see execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what content is visible in the browser after Step 3?

A 'Main content here'

B 'Loading header...'

C 'Loading header... + Main content'

D Blank page

💡 Hint

Check the 'Visible Content' column after Step 3 in the execution_table.

At which step does the browser start showing the main content?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Content Sent' and 'Visible Content' columns for when

Main content here

is sent.

If the <Suspense> fallback was removed, what would the browser show after Step 2?

A Blank page

B Header content immediately

C Loading header...

D Main content

💡 Hint

Refer to the role of fallback in execution_table step 2 and variable_tracker.

Concept Snapshot

Next.js streaming sends HTML chunks progressively.
Use <Suspense> with fallback to show placeholders.
Browser renders partial content early.
Improves perceived load speed.
Page updates as more chunks arrive.
Full page visible when done.

Full Transcript

Streaming and partial rendering in Next.js means the server sends parts of the page step-by-step. First, it sends a fallback UI like 'Loading header...' so the browser shows something quickly. Then, the main content is sent and appended below the fallback. Next, the server sends the actual header content, replacing the fallback. This way, users see parts of the page early instead of waiting for everything to load. The process repeats until the full page is rendered and visible. This improves user experience by reducing blank screen time and showing content progressively.