Cacheable Routes

• Mark a route segment as cacheable by adding the use cache directive to the top of the layout.tsx or page.tsx file.
• On the server:
  • When a cacheable route segment is called with the same inputs, it reuses the cached result if it exists, otherwise it renders and caches the output.
• On the client:
  • The router will first check the client cache for a route segment before making a new request to the server.
• layout.tsx and page.tsx are cached independently. This means you can have a cached layout.tsx and a dynamic page.tsx.

Demo

• An artificial one second delay is added to the page.tsx to simulate a slow data request.
• 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 cache directive and describes caching behavior once stable.