Next.js Course
Next.js
/
Beginner

Cache Control

Definition

Configuring the caching behavior of the extended `fetch` API in Next.js using the `cache` property.

Explain Like I'm New

You have three choices for every fetch. 1. Cache it forever (SSG). 2. Never cache it; fetch it fresh every time (SSR). 3. Cache it, but update it every X seconds (ISR).

Real World Example

Using `force-cache` for a list of physical store locations (they rarely change). Using `no-store` for a user's shopping cart (it changes constantly and must always be 100% accurate).

Common Use Cases

  • •Performance tuning
  • •Data accuracy

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What is the default cache behavior of `fetch` in the Next.js App Router?

intermediate

  • What string value do you pass to the `cache` option to force Server-Side Rendering (SSR) for a component?

Flash Cards

Question

Default behavior?

Click to reveal answer
Answer

`force-cache` (It acts like Static Site Generation by default).

Question

Force SSR?

Click to reveal answer
Answer

`cache: 'no-store'`. This tells Next.js to skip the cache and hit the actual data source on every single page load.