CodePark/ questions / Data fetching & caching
START PRACTICINGPRACTICE
Frontend question · Next.js › Data fetching & caching

What is the "use cache" directive in Next.js 16 and how does it change the caching model?

// next.config.ts
export default { cacheComponents: true };

// lib/products.ts
import { cacheLife, cacheTag } from "next/cache";

export async function getProducts() {
  "use cache";
  cacheLife("hours");
  cacheTag("products");
  return db.product.findMany();
}

"use cache" is the directive you use to opt in to caching in Next.js 16's new model, called Cache Components. You enable that model with cacheComponents: true in next.config.

In this model, rendering is dynamic by default. Nothing is cached unless you ask. You add "use cache" at the top of one of these:

  • a file
  • a component
  • an async function

Next.js stores the output of the cached function or component and reuses it. The arguments form part of the cache key, so different arguments give different entries.

  • cacheLife sets how long the entry stays fresh.
  • cacheTag attaches tags you can invalidate later.

It largely replaces fetch cache options and route segment config, such as export const dynamic.

Cached parts become part of the static shell, the HTML sent at once. Uncached dynamic parts are wrapped in Suspense and streamed in at request time.

  • Cache Components are enabled with cacheComponents: true in Next.js 16.
  • Rendering is dynamic by default, and caching is explicit.
  • "use cache" works on files, components and functions.
  • cacheLife controls how long an entry lives, and cacheTag controls invalidation.
  • Cached output joins the static shell, and dynamic parts stream in.