Full route cache in NextJS - Step-by-Step Execution

Concept Flow - Full route cache

User requests a route

↓

Check if route cached

↓

Serve cached

↓

Return response

↓

Cache new route if rendered

This flow shows how Next.js checks if a route is cached, serves it if yes, or renders and caches it if no.

Execution Sample

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <h1>Hello, cached route!</h1>;
}

This Next.js page uses full route caching by forcing static rendering.

Execution Table

Step	Action	Cache Check	Render Action	Cache Update	Response
1	User requests /page	Cache miss	Render page component	Cache /page content	Send rendered HTML
2	User requests /page again	Cache hit	Skip rendering	No cache update	Send cached HTML
3	User requests /other	Cache miss	Render /other component	Cache /other content	Send rendered HTML
4	User requests /page again	Cache hit	Skip rendering	No cache update	Send cached HTML

💡 Execution stops when response is sent to user after serving cached or rendered content.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
cache['/page']	empty	cached content	cached content	cached content	cached content
cache['/other']	empty	empty	cached content	cached content	cached content

Key Moments - 2 Insights

Why does the server skip rendering on the second request for the same route?

Because the cache check in step 2 finds the route content already cached, so it serves cached HTML without rendering again.

What happens if a new route is requested that is not cached?

The server renders the route component, caches the output, and then sends the response, as shown in step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the cache status when the user requests /page the first time?

A Cache hit

B Cache miss

C Cache empty

D Cache error

💡 Hint

Check Step 1 in the execution_table under 'Cache Check' column.

At which step does the server cache the /other route content?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at 'Cache Update' column in execution_table for /other route.

If the cache was cleared before step 4, what would happen when /page is requested again?

A Cache hit, serve cached HTML

B Error, no response

C Cache miss, render and cache again

D Serve stale content

💡 Hint

Refer to variable_tracker showing cache state and execution_table steps for cache miss behavior.

Concept Snapshot

Full route cache in Next.js:
- Checks if route HTML is cached on request
- If cached, serves cached HTML immediately
- If not cached, renders route, caches output, then serves
- Improves performance by avoiding repeated rendering
- Use export const dynamic = 'force-static' to enable full route caching

Full Transcript

Full route caching in Next.js means the server saves the full HTML output of a route after rendering it once. When a user requests a route, the server first checks if the HTML is already cached. If yes, it sends the cached HTML immediately, skipping rendering. If no, it renders the page, caches the output, and then sends it. This speeds up responses for repeated requests. The example code uses 'export const dynamic = "force-static"' to tell Next.js to cache the full route. The execution table shows requests and cache hits or misses step by step. The variable tracker shows how the cache content changes after each request. Key moments clarify why rendering is skipped on cache hits and what happens on new routes. The quiz tests understanding of cache status and behavior during requests.

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