Why rendering strategy matters in NextJS - Visual Breakdown

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

Step	Action	Rendering Strategy	Result	User Experience
1	User requests page	N/A	Request received	Waiting for response
2	Next.js chooses rendering	Server-side	Render HTML on server	Page loads fast with content
3	Send response	Server-side	HTML sent to browser	User sees content immediately
4	User interacts	Server-side	Hydration happens	Page becomes interactive
5	User requests page	N/A	Request received	Waiting for response
6	Next.js chooses rendering	Client-side	Send JS bundle	Page loads blank initially
7	Send response	Client-side	JS bundle sent	User waits for JS to load
8	JS runs	Client-side	Render content in browser	Page becomes visible and interactive
9	Exit	N/A	Rendering complete	User experience depends on strategy

💡 Rendering completes after sending content and user sees page; speed and interactivity depend on strategy.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 6	After Step 8	Final
Page Content	undefined	<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 Experience	Waiting	Loading fast	Content visible	Blank screen	Content appears	Interactive 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

Look at the execution table, at which step does the user first see the page content in server-side rendering?

A Step 3

B Step 6

C Step 7

D Step 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?

A User sees content immediately

B User waits for JS to load with blank screen

C Page becomes interactive instantly

D Hydration 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.

Practice

1. In Next.js, why does choosing the right rendering strategy matter for your website?

easy

A. It decides which fonts are used on the page.

B. It changes the color scheme of the website automatically.

C. It controls the size of images on the page.

D. It affects how fast the page loads and how fresh the content is.

Solution

1. Step 1: Understand rendering strategy impact

   Rendering strategy determines when and how page content is created and delivered to users.

2. Step 2: Connect rendering to performance and freshness

   Choosing the right strategy affects page load speed and how up-to-date the content appears, which is important for user experience and SEO.

3. Final Answer:

   It affects how fast the page loads and how fresh the content is. -> Option D

4. Quick Check:

   Rendering strategy = speed and freshness [OK]

Hint: Rendering strategy controls speed and content freshness [OK]

Common Mistakes:

• Thinking rendering changes colors or fonts
• Confusing rendering with styling or image size
• Assuming rendering affects only visuals, not performance

2. Which Next.js page export correctly sets a page to use Static Site Generation (SSG)?

easy

A. export default function Page() { return Hello }

B. export const getServerSideProps = async () => { return { props: {} } }

C. export const getStaticProps = async () => { return { props: {} } }

D. export const getInitialProps = async () => { return { props: {} } }

Solution

1. Step 1: Identify SSG method in Next.js

   Static Site Generation uses getStaticProps to fetch data at build time.

2. Step 2: Match export to SSG

   Only getStaticProps triggers SSG; others are for server-side or legacy methods.

3. Final Answer:

   export const getStaticProps = async () => { return { props: {} } } -> Option C

4. Quick Check:

   SSG = getStaticProps [OK]

Hint: SSG uses getStaticProps export [OK]

Common Mistakes:

• Confusing getServerSideProps with SSG
• Using getInitialProps which is legacy
• Not exporting any data fetching function

3. Given this Next.js page code, what will the user see when visiting the page?

export async function getServerSideProps() {
  return { props: { time: new Date().toISOString() } };
}

export default function Page({ time }) {
  return 
Current time: {time}
;
}

medium

A. The current server time updated on every request.

B. The time when the site was built, never changes.

C. An error because getServerSideProps cannot return props.

D. A blank page because time is undefined.

Solution

1. Step 1: Understand getServerSideProps behavior

   This function runs on every request, fetching fresh data each time.

2. Step 2: Analyze returned props usage

   The page receives the current server time as a prop and displays it inside the div.

3. Final Answer:

   The current server time updated on every request. -> Option A

4. Quick Check:

   getServerSideProps = fresh data each request [OK]

Hint: getServerSideProps runs every request, shows fresh data [OK]

Common Mistakes:

• Thinking it shows build time (that's SSG)
• Assuming getServerSideProps causes errors
• Believing props are undefined without checking code

4. This Next.js page uses Static Site Generation but the data is not updating after deployment. What is the likely fix?

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

export default function Page({ data }) {
  return 
{data.message}
;
}

medium

A. Add revalidate property to enable Incremental Static Regeneration.

B. Change getStaticProps to getServerSideProps to fetch on every request.

C. Remove the fetch call to avoid stale data.

D. Wrap the component in React.memo to force updates.

Solution

1. Step 1: Identify SSG data freshness issue

   Static Site Generation builds pages once at build time, so data stays static unless re-built.

2. Step 2: Use revalidate for periodic updates

   Adding revalidate enables Incremental Static Regeneration, refreshing data after set seconds.

3. Final Answer:

   Add revalidate property to enable Incremental Static Regeneration. -> Option A

4. Quick Check:

   SSG + revalidate = fresh static pages [OK]

Hint: Use revalidate in getStaticProps for fresh static data [OK]

Common Mistakes:

• Switching to getServerSideProps unnecessarily
• Removing fetch which breaks data loading
• Using React.memo which doesn't affect data fetching

5. You want a Next.js page that shows user profile data that updates every 10 seconds but also loads fast initially. Which rendering strategy best fits this need?

hard

A. Use Server-side Rendering with getServerSideProps to fetch data on every request.

B. Use Static Site Generation with revalidate: 10 to update every 10 seconds.

C. Use Client-side Rendering only with useEffect to fetch data after page loads.

D. Use Static Site Generation without revalidate for fastest load.

Solution

1. Step 1: Understand the need for fast initial load and frequent updates

   Static Site Generation gives fast load by pre-building pages; revalidate allows periodic updates.

2. Step 2: Compare options for update frequency and speed

   Using revalidate: 10 updates the page every 10 seconds without slowing initial load, unlike server-side rendering which runs every request.

3. Final Answer:

   Use Static Site Generation with revalidate: 10 to update every 10 seconds. -> Option B

4. Quick Check:

   SSG + revalidate = fast + fresh [OK]

Hint: SSG with revalidate balances speed and freshness [OK]

Common Mistakes:

• Choosing server-side rendering which slows initial load
• Using client-side fetching which delays content display
• Ignoring revalidate option for periodic updates