Dynamic rendering triggers in NextJS - Step-by-Step Execution

Concept Flow - Dynamic rendering triggers

User Request

↓

Check Rendering Mode

↓

Static

↓

Serve Cached

↓

Fetch Data / Compute

↓

Render Updated Page

↓

Send Response to User

When a user requests a page, Next.js decides if it serves a cached static page or runs server code to dynamically render fresh content.

Execution Sample

NextJS

export default function Page() {
  const time = new Date().toLocaleTimeString();
  return <p>Current time: {time}</p>;
}

This component dynamically renders the current time on each request.

Execution Table

Step	Trigger	Server Code Run?	Data Fetched	Rendered Output	Response Sent
1	User requests page	Yes	Current time fetched	Rendered with current time	Page sent with fresh time
2	User refreshes page	Yes	New current time fetched	Rendered with new time	Page sent with updated time
3	No further requests	No	No data fetched	No rendering	No response

💡 Execution stops when no user requests occur.

Variable Tracker

Variable	Start	After 1	After 2	Final
time	undefined	e.g. 10:15:30 AM	e.g. 10:15:45 AM	latest fetched time

Key Moments - 2 Insights

Why does the server code run on every request in dynamic rendering?

Because dynamic rendering means Next.js runs the server code each time to fetch fresh data, as shown in execution_table steps 1 and 2.

What happens if no user requests come in?

No server code runs and no page is rendered or sent, as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2?

A Page served from cache without running server code

B Server code runs and page renders with new time

C No response sent to user

D Server code runs but no data fetched

💡 Hint

Check the 'Server Code Run?' and 'Rendered Output' columns at step 2.

At which step does the server NOT run code?

A Step 3

B Step 2

C Step 1

D None, server always runs code

💡 Hint

Look at the 'Server Code Run?' column for each step.

If the page was static, how would the execution table change?

A Server code runs on every request

B No response sent to user

C Page served from cache without server code running

D Data fetched on every request

💡 Hint

Static pages serve cached content without running server code each time.

Concept Snapshot

Dynamic rendering in Next.js means server code runs on each user request.
This fetches fresh data and renders the page anew.
If no requests come, no rendering happens.
Static pages serve cached content without server code running.
Dynamic rendering ensures up-to-date content every time.

Full Transcript

Dynamic rendering triggers in Next.js happen when a user requests a page. The server checks if the page should be rendered dynamically or served statically. For dynamic pages, server code runs on every request to fetch fresh data and render the page. This is shown in the execution table where each user request triggers server code execution, data fetching, and rendering. If no requests occur, no server code runs and no page is sent. This ensures users always see the latest content. Static pages skip server code on requests and serve cached content instead.