Skip to content
Kagan Mert

Caching with use cache.

How Cache Components and the use cache directive change data fetching in Next.js 16

Portrait placeholder with the initials KMBy Sample Author
Purple gradient with the words use cache

Cache Components make caching explicit. Anything not marked as cached renders at request time.

Marking a function as cached#

async function getPosts() {
  "use cache";
  return client.fetch(postsQuery);
}

Revalidating#

Tags let you revalidate exactly what changed.

Cache what is stable, stream what is not.
  1. Run the dev server
  2. Edit a document in the Studio
  3. Watch the page update
pnpm dev
All posts