Next.js Caching

[phymo]

Caching behavior changes depending on:

1. whether the route is statically or dynamically rendered, 2.
2. data is cached or uncached, and
3. whether a request is part of an initial visit or a subsequent navigation. Depending on your use case, you can configure the caching behavior for individual routes and data requests.

[phymo]

Request Memorization

you can call a fetch function for the same data in multiple places in a React component tree while only executing it once.

Once the route has been rendered and the rendering pass is complete, memory is "reset" and all request memoization entries are cleared.

Good to know:

1. Request memorization is a React feature, not a Next.js feature
2. only apply to GET method in fetch requests
3. only apply to the React Component Tree:
4. For cases where fetch is not suitable (e.g. some database clients, CMS clients, or GraphQL clients), you can use the React cache function to memoize functions.

[phymo]

Data Cache

In the browser, the cache option of fetch indicates how a request will interact with the browser's HTTP cache, in Next.js, the cache option indicates how a server-side request will interact with the server's Data Cache.

revalidation

1. time-based revalidation fetch('https://...', { next: { revalidate: 3600 } })

2. on-demand revalidation: Data can be revalidated on-demand by path (revalidatePath) or by cache tag (revalidateTag).

opting out

// Opt out of caching for an individual `fetch` request
fetch(`https://...`, { cache: 'no-store' })

// Opt out of caching for all data requests in the route segment
export const dynamic = 'force-dynamic'

[phymo]

Full Route Cache

Next.js automatically renders and caches routes at build time. By default, the Full Route Cache is persistent.

Caching on server

1. React renders Server Components into a special data format, optimized for streaming, called the React Server Component Payload.
2. Next.js uses the React Server Component Payload and Client Component JavaScript instructions to render HTML on the server.

   Caching on client

   At request time, on the client:

3. The HTML is used to immediately show a fast non-interactive initial preview of the Client and Server Components.
4. The React Server Components Payload is used to reconcile the Client and rendered Server Component trees, and update the DOM.
5. The JavaScript instructions are used to hydrate Client Components and make the application interactive. The React Server Component Payload is stored in the client-side Router Cache - a separate in-memory cache, split by individual route segment

Static vs Dynamic Rendering

invalidation

1. Revalidating Data: Revalidating the Data Cache, will in turn invalidate the Router Cache by re-rendering components on the server and caching the new render output.
2. Redeploying: Unlike the Data Cache, which persists across deployments, the Full Route Cache is cleared on new deployments.

[phymo]

Router Cache

Router Cache vs Full Route Cache vs browser cache

invalidation

1. in a Server Action:
   • revalidatePath or revalidateTag
   • cookies.set or cookies.delete
     2. call router.refresh