Cacheable Functions

• Mark a regular function as cacheable by adding the use cache directive to the top of the function definition.
• When a cacheable function is called with the same inputs, it reuses the cached result if it exists, otherwise it runs and caches the output.

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 simulate a slow data request.
• 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

• This demo uses the experimental use cache directive and describes caching behavior once stable.