Skip to main content

What is caching in Next.js?

Next.jsMiddle~2 min read
Suggest an edit

Caching in Next.js is a mechanism that lets you save the results of computations and requests and reuse them, so pages load faster and the server does less redundant work.

In other words: Next.js tries not to recompute or re-request the same thing every time, if the data can be taken from the cache.

What exactly gets cached

Several levels get cached in Next.js:

1. Data cache (fetch)

  • the result of server-side fetch requests
  • used in Server Components, SSG, ISR
  • data is cached, not HTML

2. Render cache (HTML / RSC)

  • the result of rendering a page or layout
  • allows a ready result to be served quickly
  • especially important for static pages

3. Route cache

  • reuse of already generated pages
  • reduces load during navigation

Where caching happens

  • caching happens on the server
  • client requests (useEffect, SWR in the browser) do not go into this cache
  • the browser cache and the Next.js cache are different things

How Next.js decides whether to cache

The main control happens through server-side fetch.

Default behavior

js
await fetch(url)
  • the request is cached
  • the result is reused
  • suited for static data

Always-fresh data

js
await fetch(url, { cache: "no-store" })
  • caching is disabled
  • the request runs every time
  • similar to SSR

Cache with refresh

js
await fetch(url, { next: { revalidate: 60 } })
  • data is taken from the cache
  • refreshed in the background once every 60 seconds
  • this is the basis of ISR

Why all of this matters

Caching gives you:

  • a faster response for the user
  • fewer requests to the API
  • less load on the server
  • predictable page behavior
  • a good balance between speed and data freshness

A typical selection logic

  • data almost never changes -> cache it
  • data sometimes updates -> revalidate
  • data must always be fresh -> no-store
  • personal data -> more often without a cache

Short summary

  • caching is the reuse of data and rendering
  • in Next.js the cache is mostly server-side
  • the key tool is fetch
  • no-store disables the cache
  • revalidate enables automatic refresh
  • the cache speeds up the app and reduces load

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit