Caching in Vercel deployed Next 14 project

Types of Caches in Next.js

1. Request Memoization

Request memoization memoize requests that have same URL and options. This mean the fetch functions of React component tree only executed once. The memory used to store data of first call will reset after rendering the route

2. Data Cache

Data Cache is built-in cache of Next.js, and it persists the result of data fetches across incoming server requests and deployment. The CDN and Edge Network can be called as Data cache server. To revalidate these cache, there is two way, time based revalidation and on-demand revalidation.

How to handle the cache?

• For static rendering the 'force-cache' is default configuration
• To configure the caching behavior use the cache and next.revalidate options of fetch
• revalidateTag or revalidatePath used for on-demand revalidating

3. Full Route Cache

The Full Route Cache applied to statically rendered routes at build time or during revalidation. it stores RSC(React Server Component) payload and HTML on their server across multiple user requests. Whether a route is cached or not depends on whether it is statically rendered or dynamically rendered. The statically rendered route cached by default, and dynamically rendered route rendered at request time not cached(but the Data cache will cached)

To invalidate the Full Route Cache, there is also two way, revalidating data and redeploying. revalidating the data cache will invalidate the router cache by re-redering component on the server and caching the new render output.

How to handle the cache?

• The data Cached at build time or during revalidation
• To invalidate Full Route Cache, revalidating the Data Cache or redeploy

Rendering: Static vs Dynamic

• Static Rendering: rendered at build time
• Dynamic Rendering: rendered at request time

When is dynamic rendering implemented?

• export route config as dynamic
• Using functions like headers, cookies, searchParams or using useSearchParams() hook inside of client component make the route becomes dynamic. This cause it to traverse up to the first <Suspense> boundary and render that entire segment dynamically. Therefore, it is recommended to wrap the client component inside a <Suspens> boundary

4. Router Cache

Router Cache is Next.js's in memory client side cache that stores RSC payload for duration of user session. This improve navigation experience, for example, implementing 'no full page reload' between navigation and preserve React state and browser state

To invalidate this, the server action like revalidatePath, revalidateTag, cookies.set, cookies.delete should called. or router.refresh() for current route needed

Cache Interaction

1. Data Cache & Full Router Cache

Revalidating or Opting out the Data Cache will invalidate the Full Route Cache, but invalidating the Full Route Cache does not affect the Data Cache

2. Data Cache & Client Side Router Cache

Revalidating the Data Cache in a route handler will not immediately invalidate the Router Cache as the route handler isn't tied to a specific route. This mean Router Cache will continue to serve the previous payload until a hard refresh, or the automatic invalidation period has elapsed. To immediately invalidate the Data Cache and Router Cache you can use revalidatePath or revalidateTag with server action

Types of Caches in Vercel deployed

1. Edge Cache

Vercel Edge Network cache the content at the edge. There is two types of cache, static file cache and dynamic content(e.g. SSR) cache. The static file cached by default and this static cache persisted between deployments, but dynamic content need to set the Cache-Control headers. By adding Cache-Control headers to the response, the response will be cached in the region the API was requested from.

CDN-Cache-Control

• CDN-Cache-Control: allows you to control the edge cache or other CDN cache separately from the browser's cache
• Vercel-CDN-Cache-Control: allows you to specifically control Vercel's edge cache neither other CDN nor the browser will be affected by this. this are not returned to the browser of forwarded to other CDNs

then, what is the different between set 's-maxage' in Cache-Control and set 'max-age' in CDN-Cache-Control?

2. Data Cache

Data Cache is a specialized cache that stores response from data fetches. Every region in which severless or edge function runs has an independent cache. The data used in SSR or Next.js route handlers is cached close to where the function executes.

All of the cached data can define a revalidation interval, after these interval the data will be considered as stale, and triggering revalidation. Also, the on demand revalidation can revalidate the data regardless revalidation interval, and these revalidation propagates to all regions within 300ms. Next.js allows these revalidation by using revalidateTag or revalidatePath with server action.