This blog post summarizes some key points about caching behavior for GET requests in Next.js versions 13 and above, referencing the official Next.js documentation for details.
Default Caching:
By default, Next.js automatically caches the results of most GET requests made using the fetch API. This improves performance by serving cached data on subsequent requests, reducing the need to fetch data from the server again.
Opting Out of Caching:
There are situations where you might want to prevent Next.js from caching a GET request. One such scenario involves fetching data that depends on user-specific information like cookies. For example, imagine a function that retrieves a user's authentication token from cookies. Since the token is unique to each user, you wouldn't want Next.js to cache the response, as it wouldn't be valid for other users.
The Next.js documentation (Data Fetching, Caching, and Revalidating ) explains how requests that involve headers like Authorization or Cookie are automatically excluded from caching. This ensures that authenticated users always receive fresh data specific to their accounts, preventing unauthorized access to other users' information.
In many other cases where cookies are involved, Next.js might also opt-out of caching by default. It's recommended to refer to the official documentation for a comprehensive list of scenarios that trigger this behavior.
Manual Opt-In for Caching:
If you do want to cache a GET request that involves cookies or other headers that would normally disable caching, you can explicitly instruct Next.js to cache it. This is done by adding the next: { tags: [...] } option to the fetch call.
fetch(url, { next: { tags: [...] } });
The tags property allows you to define a list of identifiers for the cached data. You can then use the revalidateTag function (https://nextjs.org/docs/app/api-reference/functions/revalidateTag ) to invalidate the cache for specific tags, triggering a refresh of the data.
Benefits of Manual Caching:
Even though user-specific data shouldn't be cached, there could be other GET requests within your application that benefit from caching. By manually opting-in for caching with tags, you can improve the performance of your application by serving cached data for those specific requests. Additionally, using revalidateTag allows you to selectively update cached data when necessary, providing a balance between performance and data freshness.
In Summary:
Next.js automatically caches most GET requests by default.
Requests involving cookies or other specific headers are typically excluded from caching to ensure data security.
You can manually opt-in for caching with tags and use revalidateTag for selective cache updates.
Remember to refer to the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating ) for a more detailed explanation of caching behavior and configuration options.
Top comments (0)