Force-dynamic and force-static in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does force-dynamic do in Next.js?

force-dynamic tells Next.js to always render the page on the server at request time. It disables caching and static optimization, so the page content is fresh every time.

beginner

What is the purpose of force-static in Next.js?

force-static forces Next.js to generate a static HTML page at build time, even if the page has dynamic data. This means the page is cached and served fast without server rendering on each request.

intermediate

When should you use force-dynamic in Next.js?

Use force-dynamic when your page needs fresh data on every request, like user-specific content or frequently changing information.

intermediate

What happens if you use force-static on a page with dynamic data?

The page will be generated once at build time and served as static HTML. Dynamic data won't update until you rebuild the app, so the content might be outdated.

intermediate

How do force-dynamic and force-static affect performance in Next.js?

force-static improves performance by serving cached static pages quickly. force-dynamic can be slower because it renders pages on each request but ensures fresh content.

What does force-dynamic do in Next.js?

A Disable server rendering completely

B Generate static HTML at build time

C Cache the page for faster loading

D Always render the page on the server at request time

force-dynamic forces server rendering on every request to keep content fresh.

Which option forces Next.js to generate static pages at build time?

A force-static

B force-client

C force-server

D force-dynamic

force-static tells Next.js to create static HTML pages during build.

If you want user-specific data to update on every request, which should you use?

A force-dynamic

B force-static

C force-static with caching

D force-client

force-dynamic ensures fresh data by rendering on each request.

What is a downside of using force-static on dynamic data?

A Server crashes

B Slower page loads

C Content might be outdated until rebuild

D No caching

Static pages do not update until you rebuild, so dynamic data can become stale.

Which rendering mode generally offers better performance for mostly static content?

A force-dynamic

B force-static

C client-side rendering

D server-side rendering without caching

force-static serves cached static pages quickly, improving performance.

Explain the difference between force-dynamic and force-static in Next.js and when to use each.

Think about when you want fresh data versus fast loading.

Describe how using force-static affects page content updates and performance.

Consider the trade-off between speed and freshness.

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