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.

Practice

1. What does the force-dynamic directive do in Next.js?

easy

A. It caches the page for offline use.

B. It makes the page build once and never update.

C. It disables server-side rendering.

D. It makes the page update on every request.

Solution

1. Step 1: Understand the purpose of force-dynamic

   This directive tells Next.js to always fetch fresh data and update the page on every request.

2. Step 2: Compare with other directives

   Unlike force-static, which builds once, force-dynamic ensures the page is never cached statically.

3. Final Answer:

   It makes the page update on every request. -> Option D

4. Quick Check:

   force-dynamic = update every request [OK]

Hint: force-dynamic means fresh page every time [OK]

Common Mistakes:

• Confusing force-dynamic with force-static
• Thinking force-dynamic disables server rendering
• Assuming force-dynamic caches pages

2. Which is the correct way to force a page to be static in Next.js using the new app router?

easy

A. export const dynamic = 'force-static';

B. export const static = true;

C. export const dynamic = 'force-dynamic';

D. export const revalidate = 0;

Solution

1. Step 1: Recall the syntax for forcing static rendering

   In Next.js app router, you use export const dynamic = 'force-static'; to make a page static.

2. Step 2: Check other options

   export const dynamic = 'force-dynamic'; forces dynamic, export const static = true; is invalid syntax, and export const revalidate = 0; controls ISR but not force-static.

3. Final Answer:

   export const dynamic = 'force-static'; -> Option A

4. Quick Check:

   force-static uses dynamic = 'force-static' [OK]

Hint: Use dynamic = 'force-static' to make static pages [OK]

Common Mistakes:

• Using force-dynamic instead of force-static
• Trying to use export const static = true
• Confusing revalidate with force-static

3. Given this Next.js page code snippet:

export const dynamic = 'force-static';

export default function Page() {
  return 
{new Date().toISOString()}
;
}

What will the page show when you refresh it multiple times?

medium

A. The date and time from when the page was first built, never changing.

B. The current date and time updated on every refresh.

C. An error because dynamic cannot be force-static.

D. A blank page because the date is not static.

Solution

1. Step 1: Understand force-static behavior

   With dynamic = 'force-static', the page is built once at build time and reused.

2. Step 2: Analyze the date rendering

   The new Date().toISOString() runs only once during build, so the date shown is fixed.

3. Final Answer:

   The date and time from when the page was first built, never changing. -> Option A

4. Quick Check:

   force-static = fixed build time content [OK]

Hint: force-static shows build time data, not live updates [OK]

Common Mistakes:

• Expecting date to update on refresh
• Thinking force-static causes errors
• Confusing force-static with server-side rendering

4. You want a Next.js page to update on every request but accidentally wrote:

export const dynamic = 'force-static';

What problem will this cause?

medium

A. The page will reload infinitely causing a crash.

B. The page will throw a syntax error and not load.

C. The page will never update and show stale data.

D. The page will update but with a delay.

Solution

1. Step 1: Identify the directive effect

   dynamic = 'force-static' makes the page static, so it does not update on each request.

2. Step 2: Understand the impact on data freshness

   The page will serve the cached static version, causing stale data to show.

3. Final Answer:

   The page will never update and show stale data. -> Option C

4. Quick Check:

   force-static = stale data if dynamic update needed [OK]

Hint: force-static stops updates, use force-dynamic for fresh data [OK]

Common Mistakes:

• Expecting syntax error from force-static
• Thinking page updates slowly instead of never
• Confusing infinite reload with static caching

5. You have a Next.js page that fetches user data and you want it statically rendered but revalidated every 10 seconds on demand to keep data fresh, also improving performance by caching for 10 seconds. Which setup correctly combines force-static and caching?

hard

A. export const dynamic = 'force-dynamic'; export const revalidate = 10;

B. export const dynamic = 'force-static'; export const revalidate = 10;

C. export const dynamic = 'force-dynamic'; export const revalidate = 0;

D. export const dynamic = 'force-static'; export const revalidate = 0;

Solution

1. Step 1: Understand force-static with revalidate

   force-static forces static rendering, but revalidate = 10 enables Incremental Static Regeneration (ISR) with 10-second caching and on-demand revalidation.

2. Step 2: Check other options

   Options with force-dynamic render dynamically without ISR caching. revalidate = 0 disables revalidation.

3. Final Answer:

   export const dynamic = 'force-static'; export const revalidate = 10; -> Option B

4. Quick Check:

   force-static + revalidate = ISR caching [OK]

Hint: Use force-static with revalidate for ISR caching [OK]

Common Mistakes:

• Using force-dynamic when ISR needed
• Setting revalidate to 0 disables revalidation
• Using force-static without revalidate for permanent static