0
0
NextJSframework~10 mins

Why rendering strategy matters in NextJS - Visual Breakdown

Choose your learning style9 modes available
Concept Flow - Why rendering strategy matters
User requests page
Choose rendering strategy
Server Render
Send HTML
Page loads fast
User experience varies
This flow shows how a page request leads to choosing a rendering strategy, affecting load speed and interactivity.
Execution Sample
NextJS
export default function Page() {
  return <h1>Hello from Next.js!</h1>
}

// Rendering strategy: Server-side or Client-side
A simple Next.js page component that can be rendered on server or client, showing how strategy affects output.
Execution Table
StepActionRendering StrategyResultUser Experience
1User requests pageN/ARequest receivedWaiting for response
2Next.js chooses renderingServer-sideRender HTML on serverPage loads fast with content
3Send responseServer-sideHTML sent to browserUser sees content immediately
4User interactsServer-sideHydration happensPage becomes interactive
5User requests pageN/ARequest receivedWaiting for response
6Next.js chooses renderingClient-sideSend JS bundlePage loads blank initially
7Send responseClient-sideJS bundle sentUser waits for JS to load
8JS runsClient-sideRender content in browserPage becomes visible and interactive
9ExitN/ARendering completeUser experience depends on strategy
💡 Rendering completes after sending content and user sees page; speed and interactivity depend on strategy.
Variable Tracker
VariableStartAfter Step 2After Step 3After Step 6After Step 8Final
Page Contentundefined<h1>Hello from Next.js!</h1> (server)<h1>Hello from Next.js!</h1> (sent)undefined (no HTML yet)<h1>Hello from Next.js!</h1> (rendered client)<h1>Hello from Next.js!</h1> (visible)
User ExperienceWaitingLoading fastContent visibleBlank screenContent appearsInteractive page
Key Moments - 3 Insights
Why does server-side rendering show content faster than client-side?
Because server-side rendering sends ready HTML, so the browser can display content immediately (see execution_table rows 2-4). Client-side waits for JavaScript to load and run first.
Why might client-side rendering show a blank page initially?
Because the browser receives only JavaScript and no HTML content initially, so it must run JS to build the page (see execution_table rows 6-8).
What happens during hydration in server-side rendering?
Hydration attaches JavaScript behavior to the already loaded HTML, making the page interactive without reloading content (see execution_table row 4).
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table, at which step does the user first see the page content in server-side rendering?
AStep 3
BStep 6
CStep 7
DStep 8
💡 Hint
Check the 'Result' and 'User Experience' columns for server-side rendering steps.
According to the variable tracker, what is the 'Page Content' value after step 6 in client-side rendering?
A"<h1>Hello from Next.js!</h1> (server)"
B"<h1>Hello from Next.js!</h1> (rendered client)"
C"undefined (no HTML yet)"
D"<h1>Hello from Next.js!</h1> (sent)"
💡 Hint
Look at the 'Page Content' row and the value after step 6.
If the rendering strategy changed to client-side only, how would the user experience at step 3 change?
AUser sees content immediately
BUser waits for JS to load with blank screen
CPage becomes interactive instantly
DHydration happens at step 3
💡 Hint
Refer to execution_table rows 3 and 7 for differences between server and client rendering.
Concept Snapshot
Next.js rendering strategy affects how and when page content appears.
Server-side rendering sends ready HTML for fast initial load.
Client-side rendering sends JavaScript first, delaying content display.
Hydration makes server-rendered pages interactive.
Choosing the right strategy improves user experience and performance.
Full Transcript
When a user requests a page in Next.js, the framework chooses a rendering strategy: server-side or client-side. Server-side rendering builds the HTML on the server and sends it immediately, so the user sees content fast. Then hydration adds interactivity. Client-side rendering sends JavaScript first, so the user sees a blank page until the JS runs and renders content. This affects how quickly the page loads and becomes interactive. Understanding this flow helps developers pick the best strategy for user experience.