Next.js Caching Architecture

The four Next.js caching layers are Request Memoization, Data Cache, Full Route Cache, and Router Cache. Each serves a distinct purpose, from deduplicating fetch requests to storing static HTML, ensuring optimal application performance.

To invalidate stale data in Next.js, use `revalidateTag` to purge specific cached fetch responses by tag, or `revalidatePath` to purge all cached data for a specific route, ensuring users see the latest information after updates.

Your Next.js app shows outdated information because cached data persists across layers. You must identify whether the Data Cache or Full Route Cache is responsible and manually trigger revalidation using `revalidatePath` or `router.refresh()`.

To control caching behavior for database queries in Next.js, use the `unstable_cache` function alongside `fetch` options and route segment configurations to manually define revalidation strategies and opt out of default caching.

Yes, `AbortController` can be used to manage Next.js Request Memoization by aborting ongoing fetch requests, effectively controlling the duration and behavior of the request-level cache during active data fetching operations.

To opt out of the Next.js Full Route Cache, configure route segment settings to use dynamic rendering, use `router.refresh()` to clear the Router Cache, or set specific `fetch` options to bypass the Data Cache entirely.