Caching Q&A, Not Covered by Docs

[magnusriga]

Summary

I have read the docs on the new Next.js 16 caching model, and all related documentation. I am left with the below questions.

I hope this Q&A, once answered by someone with more insight than myself, can severe as an additional guide for users in the future.

Relevant Official Docs

• https://nextjs.org/docs/app/getting-started/cache-components#dynamic-content
• https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents
• https://nextjs.org/docs/app/api-reference/directives/use-cache
• https://nextjs.org/docs/app/api-reference/directives/use-cache-remote
• https://nextjs.org/docs/app/api-reference/functions/cacheLife
• https://nextjs.org/docs/app/api-reference/functions/cacheTag

Notes

• Below Q&A is using the definitions of Dynamic content, Runtime data, and Non-deterministic operations defined in the docs.

Q&A

• QUESTION

  • If a cached function calls fetch(..), is it also necessary cache the component containing that function, with use cache, or will components automatically be cached when all their containing data fetches are cached?
  • Similarly, if a component has use cache, is it necessary to also cache components higher up in tree with use cache, for the whole page and/or layout to be cached?

• ANSWER

  • XYZ

• QUESTION

  • If I have use cache inside a <Suspense>ed component, does it defer rendering of the inner component until request time, or does it cache the component and serve it from the Full Route Cache immediately upon request?
  • Is there any point to wrapping Suspense around a Server Component ("SC") that calls fetch, when the SC itself declares use cache?

• ANSWER

  • XYZ

• QUESTION

  • Assume:
    • Suspense around MyComponent.
    • MyComponent calls Dynamic content function getUsers (not Runtime data), which calls fetch(..).
    • getUsers is marked with use cache, to cache its result.
  • Will MyComponent be rendered runtime, or included in static shell?

• ANSWER

  • XYZ

• QUESTION

  • Docs say:
    • At build time, Next.js renders your route's component tree. As long as components don't access network resources, certain system APIs, or require an incoming request to render, their output is automatically added to the static shell.
    • When unhandled dynamic or runtime data access is detected during development and built time, Next.js raises an error. Otherwise, the prerendering step automatically extracts the static HTML shell.
  • Docs also say:
    • dynamic = "force-dynamic" is not needed, all pages are dynamic by default.
  • Those seem contradictory.
    • Are pages static or dynamic by default?

• ANSWER

  • XYZ

• QUESTION

  • Is it best practice to cache entire layout and pages, or to only cache data fetching functions within, if the goal is for a full route to be cached?
  • XYZ

• QUESTION

  • The docs state that the cache is in-memory, by default.
  • Is that the Full Route Cache or the Data Cache the docs refers to?
  • I thought the static shall was stored on disk, at build time.
  • So, are there two caches, one on disk and one in-memory?
  • Which is used when?

• ANSWER

  • XYZ

• QUESTION

  • On revalidation, e.g. revalidateTags(..), pages from the build-time cache might be re-rendered and then cached again. Are they then cahced on disk, in the .next directory, like they were on build, or are they now placed in the in-memory cache instead?

• ANSWER

  • XYZ

• QUESTION

  • The docs state that the build id is part of the cache key.
  • Is it necessary to include the build-id as a prefix, in a remote cache handler setup?

• ANSWER

  • XYZ

• QUESTION

  • cacheLife: Defines stale, i.e. client-side cache duration, which is used alongside use cache.
  • Is that the same as staleTimes?
  • To enable the Router cache for all pages in an app, should we prefer staleTimes, so we do not have to set cacheLife in every page component?
  • Is it possible to use cacheLife.stale in already pre-rendered components, i.e. no use cache, to enable Router cache for "static" pages, like staleTimes.static?
  • Is it possible to use cacheLife in dynamic components, i.e. no use cache but accesses Dynamic | Non-Deterministic data, to enable Router cache for "dynamic" pages, like staleTimes.dynamic?

• ANSWER

  • XYZ

• QUESTION

  • Let's say we pass runtime data to a cached component, e.g. sessionId, the docs states there will be one cache entry per sessionId value, since args are part of the cache key, and must therefore be mindful of what props we pass to cached components, to avoid bloating the cache (source).
  • Given that consideration, it seems like runtime data with many possible values, like sessionId, should in most cases not be passed to cached components that live within runtime data components, even though this main docs example does exactly that: https://nextjs.org/docs/app/getting-started/cache-components#with-runtime-data

• ANSWER

  • XYZ

Additional information

N/A

Example

No response

[justAnArthur]

@icyJoseph