Cached React Server Components

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

6
export default async function Page() {
7
  return <ProductList />;
8
}

Demo

• A product list component is annotated with use cache.
• An artificial one second delay is added to make the difference more noticeable.
• Since the component is cacheable, the delay only happens the first time the component is rendered.
• 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.

Notes

• The use cache directive provides granular caching at the component level.
• Cache entries are automatically invalidated when dependencies change.

Visual Summary

Key Takeaways

Pitfalls & Tips

• Avoid caching when results depend on per-request data.
• Combine with <Suspense> for graceful loading of slow components.

Continue Learning

Learn More

• Caching