Cacheable 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';
2
3export 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.tsx and page.tsx are independently cacheable. This means a layout.tsx can be prerendered, while its page.tsx can be dynamically rendered at request time.

Demo

An artificial one second delay is added to the page.tsx to make the difference more obvious.

app/page.tsx

1'use cache';
2
3export default async function Page() {
4  await new Promise((resolve) => setTimeout(resolve, 1000));
5
6  const products = await getProducts();
7  // ...
8}