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.