Demo
Cached Route Segments
Mark a route segment as cacheable by adding the use cache directive to the top of the layout.tsx or page.tsx file.
app/page.tsx
1'use cache';23export default async function Page() {4// ...5}
On the client
- The router first checks the client cache for a valid cache entry before making a new request to the server.
- Cache entries in the server response update the client cache.
On the server
- The renderer first checks the server cache for a valid cache entry before rendering a new result and updating the server cache.
Prerendering
- A cacheable route segment can be prerendered ahead of time, either at build time or during background revalidation.
- The prerendered result is distributed across a global content delivery network (CDN).
- At runtime, the CDN serves the closest static result to the client.
layout.tsxandpage.tsxare independently cacheable. This means alayout.tsxcan be prerendered, while itspage.tsxcan be dynamically rendered at request time.
Demo
-
An artificial one second delay is added to the
page.tsxto make the difference more obvious.app/page.tsx1'use cache';23export default async function Page() {4await new Promise((resolve) => setTimeout(resolve, 1000));56const products = db.product.findMany();7// ...8} -
Since the whole route is cacheable, this delay only happens the first time the function runs, during prerendering.
Notes
- This demo uses the experimental
use cachedirective and describes caching behavior once stable.
Key Takeaways
| Topic | Guidance |
|---|---|
| Scope | Cache at the route segment level |
| Client | Router reuses cached segments to avoid network requests |
| Server | Renderer reuses cached output when valid |
Pitfalls & Tips
- Avoid
use cachefor per-user or rapidly changing data. - Combine with revalidation strategies when data updates.
Learn More
layout.tsx (Cacheable)
page.tsx (Cached)
<ProductList> (Cached)
All (9)
