Why caching is central to Next.js - Visual Breakdown

Concept Flow - Why caching is central to Next.js

User requests page

↓

Check cache for page/data

↓

Serve cached

↓

Send response to user

↓

Store fresh data in cache

↓

End

Next.js first looks for cached content to serve quickly. If none, it fetches fresh data, serves it, and caches it for next time.

Execution Sample

NextJS

export async function GET() {
  const cached = await cache.get('page-data')
  if (cached) return cached
  const data = await fetchData()
  await cache.set('page-data', data)
  return data
}

This code tries to get data from cache first; if missing, it fetches fresh data, caches it, then returns it.

Execution Table

Step	Action	Cache State	Data Fetched	Response Sent
1	Check cache for 'page-data'	Empty	No	No
2	Cache miss, fetch fresh data	Empty	Yes	No
3	Store fresh data in cache	Has 'page-data'	Yes	No
4	Send fresh data as response	Has 'page-data'	Yes	Yes
5	Next request: check cache	Has 'page-data'	No	Yes

💡 Cache hit on step 5 stops fetching, response served immediately

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
cache	Empty	Empty	Empty	Has 'page-data'	Has 'page-data'	Has 'page-data'
data	undefined	undefined	Fetched data	Fetched data	Fetched data	Fetched data
responseSent	No	No	No	No	Yes	Yes

Key Moments - 3 Insights

Why does Next.js check the cache before fetching data?

Because serving cached data is faster and reduces server work, as shown in execution_table step 1 and 5 where cache hits avoid fetching.

What happens if the cache is empty?

Next.js fetches fresh data, stores it in cache, then sends it, as seen in steps 2, 3, and 4 of the execution_table.

How does caching improve user experience?

By quickly serving cached pages, users get faster responses without waiting for data fetching, demonstrated by step 5 where response is immediate.

Visual Quiz - 3 Questions

Look at the execution_table, what is the cache state after step 3?

A Undefined

B Empty

C Has 'page-data'

D Cleared

💡 Hint

Check the 'Cache State' column at step 3 in execution_table

At which step does Next.js send the response to the user for the first time?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Response Sent' column in execution_table to find when it changes to 'Yes'

If the cache was never updated, what would happen on step 5?

A Cache hit, response served immediately

B Cache miss, data fetched again

C Error because cache is empty

D Response delayed indefinitely

💡 Hint

Refer to the cache state changes in variable_tracker and execution_table steps 3 and 5

Concept Snapshot

Next.js uses caching to speed up page loads.
It checks cache first to serve stored data.
If cache misses, it fetches fresh data.
Fresh data is cached for future requests.
This reduces server load and improves user experience.

Full Transcript

Next.js handles user requests by first checking if the requested page or data is already stored in cache. If it finds cached content, it sends that immediately, making the response very fast. If the cache is empty, Next.js fetches fresh data from the source, sends it to the user, and saves it in cache for next time. This caching process helps Next.js serve pages quickly and reduce repeated work, improving performance and user experience.

Practice

1. Why is caching important in Next.js for website performance?

easy

A. It stores parts of the website to load pages faster.

B. It deletes all data after every page load.

C. It slows down the website to save energy.

D. It disables JavaScript on the page.

Solution

1. Step 1: Understand caching purpose

   Caching saves website parts so they don't need to be rebuilt every time.

2. Step 2: Connect caching to Next.js performance

   Next.js uses caching to serve pages quickly by reusing saved content.

3. Final Answer:

   It stores parts of the website to load pages faster. -> Option A

4. Quick Check:

   Caching = Faster page loads [OK]

Hint: Caching means saving parts to speed up loading [OK]

Common Mistakes:

• Thinking caching deletes data after load
• Believing caching slows down the site
• Confusing caching with disabling JavaScript

2. Which Next.js feature controls how often cached pages update?

easy

A. revalidate

B. getStaticProps

C. useEffect

D. getServerSideProps

Solution

1. Step 1: Identify caching update control

   Next.js uses the revalidate property to set cache refresh timing.

2. Step 2: Differentiate from other features

   getStaticProps fetches data at build time, useEffect runs on client, getServerSideProps fetches on every request.

3. Final Answer:

   revalidate -> Option A

4. Quick Check:

   Cache update timing = revalidate [OK]

Hint: Look for 'revalidate' to set cache refresh time [OK]

Common Mistakes:

• Confusing getStaticProps with cache timing
• Using useEffect for server caching
• Thinking getServerSideProps controls caching

3. What will happen if you set revalidate: 10 in getStaticProps?

medium

A. The page updates on every request.

B. The page updates every 10 seconds after first load.

C. The page never updates after build.

D. The page updates every 10 minutes.

Solution

1. Step 1: Understand revalidate value meaning

   Setting revalidate: 10 means Next.js will refresh the cached page every 10 seconds.

2. Step 2: Compare with other options

   It does not update on every request, never after build, nor every 10 minutes.

3. Final Answer:

   The page updates every 10 seconds after first load. -> Option B

4. Quick Check:

   revalidate: 10 means 10 seconds refresh [OK]

Hint: revalidate number = seconds between cache refresh [OK]

Common Mistakes:

• Thinking revalidate is minutes, not seconds
• Believing page never updates with revalidate
• Confusing revalidate with server-side rendering

4. You set revalidate: '10' (string) instead of 10 (number). What happens?

medium

A. Next.js updates the page every 10 minutes.

B. Next.js treats it as 10 seconds anyway.

C. Next.js ignores revalidate and never updates the page.

D. Next.js throws a type error and fails to build.

Solution

1. Step 1: Check revalidate type requirement

   Next.js expects revalidate as a number, not a string.

2. Step 2: Understand error on wrong type

   Passing a string causes a type error and build failure.

3. Final Answer:

   Next.js throws a type error and fails to build. -> Option D

4. Quick Check:

   revalidate must be number, string causes error [OK]

Hint: Use number type for revalidate, not string [OK]

Common Mistakes:

• Passing string instead of number for revalidate
• Assuming Next.js auto-converts string to number
• Ignoring build errors caused by wrong types

5. You want a page to show fresh data but still load fast. Which caching strategy fits best in Next.js?

hard

A. Disable caching completely.

B. Use getServerSideProps to fetch data on every request.

C. Set revalidate to a low number like 5 seconds.

D. Set revalidate to a very high number like 86400 seconds.

Solution

1. Step 1: Balance freshness and speed

   Low revalidate means data updates often but still uses cache for speed.

2. Step 2: Compare other options

   getServerSideProps fetches every time but is slower; very high revalidate delays updates; disabling cache hurts speed.

3. Final Answer:

   Set revalidate to a low number like 5 seconds. -> Option C

4. Quick Check:

   Low revalidate = fresh + fast [OK]

Hint: Low revalidate balances fresh data and speed [OK]

Common Mistakes:

• Choosing getServerSideProps for speed
• Setting revalidate too high losing freshness
• Disabling cache hurting performance