Are there any behavioral differences between applying "use cache" at the file level versus the component level? #85759
Replies: 1 comment 2 replies
-
|
Given nothing else but the default page or layout export: 'use cache'
export default async function Page() {}export default async function Page() {
'use cache'
}AFAIK, these would be equivalent. The nice side effect being that the entire page component would be cached, given that no dynamic or runtime behavior is present, like accessing searchParams, etc. On layout level, since the children and parallel routes, are references/slots/placeholders, as long as you don't "introspect" them, they are pass-through into the cached output of the layout. There's two considerations (I should document). At the top of the file, means that function exports from this module, have to be async functions. You can still export metadata as object for example. In general the function scope targeted by the directive has to be async. Also, these exported cached functions can be imported into client modules, and invoked from the client. If you nest the |
Beta Was this translation helpful? Give feedback.
-
|
@icyJoseph From what I see in the build output, even without "use cache", the static parts are already included in the static shell (.html). Is this understanding correct? |
Beta Was this translation helpful? Give feedback.
-
|
That's PPR doing the lift, during prerendering it walks the route tree, and everything that's static, or has been cached becomes part of the static shell. As a side effect, all pages have an associated |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Could you explain how these two differ in behavior?
Additionally, is there any reason to make a static component async and apply "use cache" to it?
https://nextjs.org/docs/app/api-reference/directives/use-cache#caching-an-entire-route-with-use-cache
Beta Was this translation helpful? Give feedback.
All reactions