Force-dynamic and force-static in NextJS - Step-by-Step Execution

Concept Flow - Force-dynamic and force-static

Start: Next.js page

↓

Check: Use force-static?

↓

Render at build

↓

Static HTML

↓

Serve cached

↓

Send response

Next.js decides if a page is static or dynamic based on force-static or force-dynamic. Static pages build once and serve cached HTML. Dynamic pages run server code on each request.

Execution Sample

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <h1>Hello Static</h1>;
}

This code forces the page to be static, so Next.js builds it once and serves the same HTML every time.

Execution Table

Step	Action	force-static?	Result	Output
1	Next.js reads page config	Yes	Page marked static	No server code run on request
2	Build time runs	Yes	Page HTML generated once	<h1>Hello Static</h1>
3	Request arrives	Yes	Serve cached HTML	<h1>Hello Static</h1>
4	Next.js reads page config	No	Page marked dynamic	Server code runs on each request
5	Request arrives	No	Run server code	<h1>Hello Dynamic</h1>
6	Response sent	No	Fresh HTML each time	<h1>Hello Dynamic</h1>
7	End	-	-	Execution stops

💡 Execution stops after serving response for static or dynamic page

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
force-static	undefined	true or false	true or false	true or false	true or false
HTML output	none	none	<h1>Hello Static</h1> or <h1>Hello Dynamic</h1>	<h1>Hello Static</h1> or <h1>Hello Dynamic</h1>	served HTML

Key Moments - 3 Insights

Why does force-static generate HTML only once?

Because force-static tells Next.js to build the page at build time and serve cached HTML, as shown in execution_table rows 2 and 3.

What happens when force-dynamic is used?

Next.js runs server code on every request to generate fresh HTML, as seen in execution_table rows 4 to 6.

Can force-static pages run server code on each request?

No, force-static disables server code running on requests, serving only pre-built HTML (rows 1-3).

Visual Quiz - 3 Questions

Look at the execution_table, what is the output at step 3 when force-static is true?

A <h1>Hello Dynamic</h1>

B No output

C <h1>Hello Static</h1>

D Error

💡 Hint

Check row 3 in execution_table where force-static is Yes and output is shown

At which step does Next.js run server code for a force-dynamic page?

A Step 5

B Step 4

C Step 2

D Step 3

💡 Hint

Look at execution_table rows 4-6 for force-dynamic behavior

If force-dynamic is used instead of force-static, how does the execution_table change?

A Page is always static

B Server code runs on each request

C Steps 1-3 are skipped

D No HTML is generated

💡 Hint

Refer to variable_tracker and execution_table rows showing force-static false behavior

Concept Snapshot

Next.js pages can be forced static or dynamic.
force-static builds HTML once at build time.
force-dynamic runs server code on every request.
Static pages serve cached HTML fast.
Dynamic pages generate fresh HTML each time.
Use export const dynamic = 'force-static' or 'force-dynamic'.

Full Transcript

This visual trace shows how Next.js handles force-static and force-dynamic page rendering. When force-static is set, Next.js builds the page HTML once during build time and serves the cached HTML on every request without running server code. This is fast and good for pages that don't change often. When force-dynamic is set, Next.js runs server code on every request to generate fresh HTML, useful for pages that need up-to-date data. The execution table walks through these steps, showing when HTML is generated and served. The variable tracker shows how the force-static flag and HTML output change during execution. Key moments clarify common confusions about when server code runs and how static pages behave. The quiz tests understanding by asking about outputs and steps in the process. This helps beginners see how Next.js decides between static and dynamic rendering.