MENU

Data Cache

As you build your app for the production server, the compiler will create a data store containing all the results of the fetch() requests.

If you refresh the page here, the numbers will change. The data cache does not work here because we use the development server. If we build and run the app on the production server, you will see the data cache working. The fetch option {cache: 'force-cache'} will override the revalidate() call in 'actions.tsx' and cause the numbers to remain static even when the 'revalidate' button is clicked. In this example, slight delays are introduced in successive calls to getItem() to avoid fetch() contention.

Duration

The Data Cache persists across incoming requests and deployments unless you choose to revalidate or opt out. Cache data is stored on the server's disk (in the folder .next).

Revalidation

To refresh the cache, call revalidatePath or revalidateTag in a server action. (You can call them in your route handler (route.tsx) too if you carry out fetch requests in the route handler.)

You can also use time-based validation:

Opting Out

To prevent the caching of the response from a fetch request, you can use the following approach: