MENU

fetch memoization

Because Next.js memoizes fetch() requests, you can call fetch() to share data across different components without passing props up and down the component tree.

Memoization doesn't apply to fetch requests in Route Handlers as they are not a part of the React component tree.

Notice below that 'fetching...' is logged only three times.

Duration

The cache persists for the duration of a single server request, remaining active until the rendering of the React component tree is complete. Hence, if you refresh the page in the example above, the fetching will be repeated again.

Revalidation

Because the memoization is limited to individual server requests and only applies during rendering, revalidation is unnecessary.

Opting Out

Memoization in fetch requests is limited to the GET method; other methods like POST and DELETE are not memoized. This is a built-in React optimization, and opting out is not recommended.

For handling specific requests, you can use the signal property from AbortController to cancel active requests as needed. However, this approach won't disable memoization but will allow you to abort ongoing requests.