use cache directive to the top of the function definition.1async function ProductList() {2'use cache';3// ...4}56export default async function Page() {7return <ProductList />;8}
use cache.layout.tsx and page.tsx 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.use cache directive provides granular caching at the component level.Same inputs reuse the cached render result.
| Topic | Guidance |
|---|---|
| Scope | Cache at the component level |
| Inputs | Cache key is based on component inputs |
| Performance | Great for expensive server renders |
<Suspense> for graceful loading of slow components.| Demo | Description |
|---|---|
| Cached Routes | Cache entire route segments |
| Cached Functions | Cache pure function results |
| Revalidation | Invalidate cached components |








