Opting out of caching in NextJS - Step-by-Step Execution

Concept Flow - Opting out of caching

Request received

↓

Check cache policy

↓

Cache

↓

Send response

When a request comes in, Next.js checks if caching is allowed. If opted out, it fetches fresh data every time.

Execution Sample

NextJS

export const dynamic = 'force-dynamic';

export default function Page() {
  return <h1>Fresh content every time</h1>;
}

This Next.js page disables caching to always serve fresh content.

Execution Table

Step	Action	Cache Policy	Data Source	Response Sent
1	Request received	Check dynamic export	N/A	N/A
2	dynamic = 'force-dynamic' detected	No caching	Fetch fresh data	N/A
3	Render page with fresh data	No caching	Fresh data	<h1>Fresh content every time</h1>
4	Send response to client	No caching	Fresh data	<h1>Fresh content every time</h1>
5	Next request arrives	Repeat steps 1-4	Always fresh	Always fresh response

💡 Caching is disabled by dynamic = 'force-dynamic', so fresh data is fetched every request.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
dynamic	undefined	'force-dynamic'	'force-dynamic'	'force-dynamic'	'force-dynamic'
cacheAllowed	true	false	false	false	false
dataSource	N/A	fresh fetch	fresh data	fresh data	fresh data
responseContent	N/A	N/A	<h1>Fresh content every time</h1>	<h1>Fresh content every time</h1>	<h1>Fresh content every time</h1>

Key Moments - 2 Insights

Why does the page fetch fresh data every time instead of using cache?

Because the dynamic export is set to 'force-dynamic' (see execution_table step 2), Next.js disables caching and fetches fresh data on every request.

What happens if we remove the dynamic export?

Next.js will use default caching behavior, so the page might serve cached content instead of fresh data (not shown in this trace).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the data source used?

A Cached data

B Fresh data fetched

C No data

D Static pre-rendered data

💡 Hint

Check the 'Data Source' column at step 3 in execution_table.

At which step is the cache policy determined to disable caching?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Cache Policy' column in execution_table to find when 'No caching' is set.

If we change dynamic to 'force-static', how would the response behavior change?

A Page caches data and serves cached content when possible

B Page throws an error

C Page always fetches fresh data

D Page disables rendering

💡 Hint

Refer to variable_tracker 'dynamic' variable and understand how 'force-dynamic' disables caching.

Concept Snapshot

Next.js lets you control caching with the dynamic export.
Set dynamic = 'force-dynamic' to disable caching.
This makes Next.js fetch fresh data every request.
Useful for pages needing always up-to-date content.
Without it, Next.js may cache and reuse data.
Remember: disabling cache can affect performance.

Full Transcript

In Next.js, you can opt out of caching by exporting a special variable called dynamic with the value 'force-dynamic'. When a request comes in, Next.js checks this setting. If it sees 'force-dynamic', it skips caching and fetches fresh data every time. This means the page always shows the latest content. The example code exports dynamic = 'force-dynamic' and returns a simple heading. The execution table shows each step: receiving the request, detecting the no-cache policy, fetching fresh data, rendering the page, and sending the response. Variables like dynamic and cacheAllowed track this behavior. Key moments include understanding why fresh data is fetched and what happens if the dynamic export is removed. The quiz tests your understanding of data source, cache policy timing, and effects of changing dynamic. Remember, opting out of caching ensures fresh content but may reduce performance due to repeated data fetching.