Cached Functions

1
async function getData() {
2
  'use cache';
3
  // ...
4
}
5

6
async function ProductList() {
7
  const products = await getData();
8
  // ...
9
}
10

11
export default async function Page() {
12
  return <ProductList />;
13
}

Demo

• The data fetching function to get the list of products is annotated with use cache.
• An artificial one second delay is added to the function to make the difference more noticeable.
• Since the function is cacheable, the delay only happens the first time the function is called.
• layout.tsx, page.tsx and <ProductList> aren't explicitly annotated with use cache, but Next.js infers they're static because they do not use any Dynamic APIs. If they started to, Next.js will guide the developer to either add use cache or a <Suspense> boundary.

Notes

• The use cache directive enables caching at the function level for expensive computations.
• Cache keys are derived from function arguments, so ensure inputs are serializable.

Visual Summary

Key Takeaways

Pitfalls & Tips

• Avoid caching when results depend on auth/session state.
• Ensure inputs are serializable and stable.

Learn More

• Caching