Full route cache in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of a Next.js page using full route cache with revalidation set to 10 seconds?

Consider a Next.js page that uses export const revalidate = 10; for full route caching. What happens when a user visits the page multiple times within 10 seconds?

NextJS

export const revalidate = 10;

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

A The page shows the same time for all visits within 10 seconds, then updates after 10 seconds.

B The page updates the time on every visit regardless of the 10 seconds setting.

C The page never updates the time once cached, even after 10 seconds.

D The page throws an error because revalidate cannot be a number.

💡 Hint

Think about how Next.js uses the revalidate property to control cache duration.

Setting revalidate = 10 tells Next.js to cache the page for 10 seconds. Within that time, the cached page is served. After 10 seconds, Next.js regenerates the page on the next request.

📝 Syntax

intermediate

Which option correctly enables full route caching with a 60-second revalidation in Next.js?

Choose the correct way to enable full route caching with a 60-second revalidation period in a Next.js page.

A export const cache = true;

B export const revalidate = 60;

C export const revalidate = '60';

D export const cache = { revalidate: 60 };

💡 Hint

Check the official Next.js syntax for revalidation.

The correct syntax to set full route cache revalidation is export const revalidate = 60;. Other options are either invalid or incomplete.

🔧 Debug

advanced

Why does this Next.js page update on every request despite revalidate set to 30?

Given the code below, the page shows a new time on every request despite revalidate set to 30. What is the most likely cause?

NextJS

export const revalidate = 30;

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

A The revalidate value must be a string, not a number.

B The page is missing a fetch call to trigger revalidation.

C The page is a client component, so revalidate has no effect.

D The revalidate property only works in API routes, not pages.

💡 Hint

Consider the difference between client and server components in Next.js caching.

Full route caching with revalidate only works on server components. If the page is a client component, caching does not apply.

🧠 Conceptual

advanced

What happens when you set export const revalidate = 0; in a Next.js page?

In Next.js, what is the effect of setting export const revalidate = 0; in a page component?

A The page is regenerated on every request (no caching).

B The page throws a runtime error because 0 is invalid.

C The page is cached indefinitely and never revalidated.

D The page is cached for 0 seconds, then revalidated immediately after rendering.

💡 Hint

Think about what zero seconds means for caching duration.

Setting revalidate = 0 disables caching, so the page regenerates on every request.

❓ state_output

expert

What is the rendered output after 15 seconds if a Next.js page uses full route cache with revalidate=20 and shows current time?

A Next.js page exports export const revalidate = 20; and renders the current time. The page is first requested at 12:00:00 and cached. What time will the page show if requested again at 12:00:15?

NextJS

export const revalidate = 20;

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

A The time from 12:00:20 because revalidation happens early.

B The current time at 12:00:15 (fresh render).

C An error because the cache is still valid.

D The time from the first request at 12:00:00 (cached).

💡 Hint

Recall how revalidation timing affects cached page output.

The page is cached for 20 seconds, so a request at 15 seconds returns the cached output from 12:00:00.

Practice

1. What does enabling full route cache in Next.js do for your page?

easy

A. It saves the entire page output to serve faster on next visits.

B. It disables all caching and forces server rendering every time.

C. It only caches API responses but not the page content.

D. It caches only images and static assets, not HTML.

Solution

1. Step 1: Understand full route cache purpose

   Full route cache stores the whole rendered page output to speed up loading.

2. Step 2: Compare options with this purpose

   Only "It saves the entire page output to serve faster on next visits." describes saving entire page output for faster serving.

3. Final Answer:

   It saves the entire page output to serve faster on next visits. -> Option A

4. Quick Check:

   Full route cache = saves full page output [OK]

Hint: Full route cache means caching the whole page output [OK]

Common Mistakes:

• Thinking it only caches API data
• Confusing with disabling cache
• Assuming it caches only images

2. Which code snippet correctly enables full route cache in a Next.js page component?

easy

A. export const cache = 'no-cache';

B. export const revalidate = 0;

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

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

Solution

1. Step 1: Recall syntax for full route cache

   Next.js uses export const dynamic = 'force-static' to enable full route cache.

2. Step 2: Check each option

   Only "export const dynamic = 'force-static';" matches the correct syntax for full route cache.

3. Final Answer:

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

4. Quick Check:

   Full route cache syntax = dynamic = 'force-static' [OK]

Hint: Use dynamic = 'force-static' to enable full route cache [OK]

Common Mistakes:

• Using 'force-dynamic' instead of 'force-static'
• Confusing cache control with dynamic export
• Setting revalidate to 0 disables caching differently

3. Given this Next.js page code, what will be the caching behavior?

export const dynamic = 'force-static';
export default function Page() {
  return <h1>Hello World</h1>;
}

medium

A. The page caches only API data but renders HTML dynamically.

B. The page is server rendered on every request without caching.

C. The page disables caching and reloads data on each visit.

D. The page is fully cached and served statically on all requests.

Solution

1. Step 1: Analyze the dynamic export value

   The code sets dynamic = 'force-static', which enables full static caching.

2. Step 2: Understand effect on page rendering

   This means the page HTML is cached fully and served statically on all requests.

3. Final Answer:

   The page is fully cached and served statically on all requests. -> Option D

4. Quick Check:

   dynamic = 'force-static' means full static cache [OK]

Hint: dynamic = 'force-static' means full static cache [OK]

Common Mistakes:

• Thinking it disables caching
• Assuming partial caching of API only
• Confusing with dynamic rendering

4. Identify the error in this Next.js page that tries to enable full route cache:

export const dynamic = 'force-static'

export default function Page() {
  return <div>Cached Page</div>;
}

medium

A. Missing semicolon after dynamic export causes syntax error.

B. No error; code correctly enables full route cache.

C. Page component must be async to enable caching.

D. Using 'force-static' is invalid; should be 'force-dynamic'.

Solution

1. Step 1: Check syntax correctness

   JavaScript allows omitting semicolons; no syntax error here.

2. Step 2: Verify caching value and component

   'force-static' is valid to enable full route cache; component can be normal function.

3. Final Answer:

   No error; code correctly enables full route cache. -> Option B

4. Quick Check:

   Code syntax and caching value are correct [OK]

Hint: Semicolons optional; 'force-static' is valid caching value [OK]

Common Mistakes:

• Assuming missing semicolon causes error
• Confusing 'force-static' with 'force-dynamic'
• Thinking component must be async

5. You want to optimize a mostly static blog page with some dynamic widgets. Which approach best uses full route cache in Next.js?

hard

A. Set export const dynamic = 'force-static' and load widgets client-side only.

B. Use dynamic = 'force-dynamic' to cache the whole page including widgets.

C. Disable caching and fetch all data server-side on every request.

D. Use revalidate = 0 to cache page but update widgets dynamically.

Solution

1. Step 1: Understand full route cache use case

   Full route cache works best for mostly static pages to serve fast.

2. Step 2: Handle dynamic widgets separately

   Loading widgets client-side keeps page static cache intact while showing dynamic content.

3. Step 3: Evaluate options

   Set export const dynamic = 'force-static' and load widgets client-side only. matches this approach; others either disable caching or cache dynamic parts incorrectly.

4. Final Answer:

   Set export const dynamic = 'force-static' and load widgets client-side only. -> Option A

5. Quick Check:

   Static page + client widgets = dynamic = 'force-static' [OK]

Hint: Cache static page, load dynamic parts client-side [OK]

Common Mistakes:

• Caching dynamic widgets server-side causing stale data
• Disabling cache unnecessarily
• Using force-dynamic which disables full route cache