the difference between "use cache" and revalidate

[austere furnace]

what's the difference between using "use cache" and revalidate

[spare tree]

Hi @austere furnace. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The difference between "use cache" and revalidate in Next.js lies in their purpose and how they control caching and freshness of data or components:

---

"use cache"

• What it does:
  The use cache directive (currently experimental) marks a route, React component, or function as cacheable. When used, it tells Next.js to cache the return value of that function or component based on its inputs (such as props or arguments). The cache key is generated from the build ID, function ID, and serializable arguments.
• Where it's used:
  You can use it at the file, component, or function level. For example:

  'use cache'
  export default async function Page() { ... }
  

• How it works:
  • At build time, it enables prerendering and caching of the route/component.
  • At runtime, it caches the result in memory on the server and in the browser for the session.
  • It cannot be used with request-time APIs like cookies or headers.
• Revalidation:
  By default, the cache has a 15-minute revalidation period, but you can configure this using cacheLife and cacheTag APIs for more control over when cache entries should be revalidated see details Next.js Docs: use cache.

---

revalidate

• What it does:
  revalidate controls how often cached data or pages should be refreshed (revalidated) after their initial caching. It can be set:
  • As a static export in a route segment (e.g., export const revalidate = 60)
  • As an option in a fetch request (e.g., fetch(url, { next: { revalidate: 60 } }))
• Where it's used:
  • At the route or layout level to set a default revalidation interval for all data in that segment.
  • At the individual data-fetching level to control how often a specific fetch should be revalidated.
• How it works:
  • Time-based revalidation: After the specified interval, the next request will trigger a background revalidation, updating the cache with fresh data while serving stale data until the update completes (stale-while-revalidate behavior).
  • On-demand revalidation: You can also trigger revalidation manually using APIs like revalidatePath or revalidateTag Next.js Docs: Revalidating.
• Purpose:
  Ensures that cached data/pages are kept up-to-date according to your freshness requirements.

---

Summary Table

Feature	"use cache"	revalidate
Purpose	Cache a function/component's output	Control how often cache is refreshed
Usage	Directive at file/component/function level	Option in fetch or route segment config
Default TTL	15 minutes (configurable)	User-defined (e.g., seconds)
Revalidation	Via cacheLife/cacheTag or default period	Time-based or on-demand (path/tag)
Scope	Component/function/route	Data fetch or route segment

---

In short:

• "use cache" is about marking what should be cached and how, at the component or function level.
• revalidate is about controlling when the cache should be refreshed, either by time or on-demand.

For more details, see the official documentation on use cache and revalidation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: