Force-dynamic and force-static in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you add 'use server' in a Next.js Server Component?

Consider a Next.js Server Component with the directive 'use server' at the top. What is the effect of this directive on the component's behavior?

NextJS

"use server";

export default function MyComponent() {
  return <p>Hello from server!</p>;
}

A The component is forced to run only on the server and cannot be rendered on the client.

B The component is forced to run only on the client and cannot be rendered on the server.

C The component can run both on client and server without restrictions.

D The component will throw a runtime error because 'use server' is not a valid directive.

💡 Hint

Think about where server components run in Next.js and what 'use server' enforces.

The 'use server' directive forces the component to be a server component, meaning it only runs on the server and never on the client. This helps Next.js optimize rendering and data fetching.

❓ state_output

intermediate

What is the output when using 'force-static' in a Next.js page?

Given a Next.js page with the directive 'export const dynamic = "force-static";', what will be the rendering behavior of this page?

NextJS

export const dynamic = "force-static";

export default function Page() {
  return <p>Static content</p>;
}

A The page will fail to build because 'force-static' is not a valid value.

B The page is statically generated at build time and served as static HTML.

C The page is rendered on the client only and never on the server.

D The page is always rendered dynamically on each request on the server.

💡 Hint

Consider what 'force-static' means for Next.js page rendering.

Setting 'dynamic' to 'force-static' tells Next.js to generate the page statically at build time, serving the same HTML for every request without server-side rendering.

📝 Syntax

advanced

Which code snippet correctly forces dynamic rendering in Next.js?

Select the code snippet that correctly forces a Next.js page to be dynamically rendered on every request.

A

export const dynamic = "force-dynamic";

export default function Page() { return <p>Dynamic page</p>; }

B

export const dynamic = true;

export default function Page() { return <p>Dynamic page</p>; }

C

export const dynamic = "dynamic-force";

export default function Page() { return <p>Dynamic page</p>; }

D

export const dynamic = false;

export default function Page() { return <p>Dynamic page</p>; }

💡 Hint

Check the exact string value Next.js expects for forcing dynamic rendering.

The correct way to force dynamic rendering is to export 'dynamic' with the string value 'force-dynamic'. Other values are invalid or have different meanings.

🔧 Debug

advanced

Why does this Next.js page fail to statically generate?

This Next.js page has 'export const dynamic = "force-static";' but still fails to statically generate and instead renders dynamically. Why?

NextJS

export const dynamic = "force-static";

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

A The page is missing 'use client' directive, so it cannot be statically generated.

B The 'force-static' directive is ignored if the component uses any JSX elements.

C The 'dynamic' export must be a boolean, not a string.

D Using Date.now() causes the page to depend on runtime data, so Next.js forces dynamic rendering despite 'force-static'.

💡 Hint

Think about what makes a page static or dynamic in Next.js.

Using Date.now() introduces runtime data that changes on every request, so Next.js cannot statically generate the page even if 'force-static' is set.

🧠 Conceptual

expert

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

Explain the impact of using 'force-dynamic' versus 'force-static' on caching behavior and performance in Next.js applications.

A 'force-dynamic' caches pages indefinitely on the CDN; 'force-static' forces server rendering on every request.

B 'force-dynamic' and 'force-static' have no effect on caching or performance; they only affect styling of components.

C 'force-dynamic' disables static caching and renders pages on every request, which can increase server load but ensures fresh data; 'force-static' enables static caching, improving performance but serving stale data until rebuild.

D 'force-dynamic' enables aggressive client-side caching, reducing server load; 'force-static' disables caching entirely, causing slower page loads.

💡 Hint

Consider how static and dynamic rendering affect server work and cache freshness.

'force-dynamic' disables static generation, so pages are rendered on each request, ensuring fresh data but increasing server load. 'force-static' generates pages at build time, enabling caching and faster loads but data may be stale until next build.

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