Problem with dynamic page cache

[mas8022]

Hello everyone,
I’m working with Next.js 16 and I’ve enabled the new Component-level Cache feature. It works correctly for static pages, but I’ve run into an issue: dynamic routes/pages do not seem to be cached at all, even though caching is enabled.

Is this the expected behavior for dynamic pages in Next.js 16, or am I missing something in the configuration?
Any clarification on why component caching doesn’t apply to dynamic routes would be greatly appreciated.

Thank you in advance.

[icyJoseph]

dynamic routes/pages do not seem to be cached at all, even though caching is enabled.

Is this the expected behavior for dynamic pages in Next.js 16

Code example? Is this working locally (with a build+start), but not on Vercel? or other serverless deploy?

[mas8022]

Hello It's not working local after build I don't test in vercel after deploy

[icyJoseph]

Well, I need to some some code to be able to help ya! Could you share some pseudocode at least?

[mas8022]

I don't have special code you code test it by your self ❤️😅

…

On Wed, Nov 26, 2025, 15:15 Joseph ***@***.***> wrote: Well, I need to some some code to be able to help ya! Could you share some pseudocode at least? — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVT2JGKOTY2GZ5D4ENT36WHFPAVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBYGU3TEMI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mas8022]

Even set your internet to 3g mode ? It is fast show the page ?

[icyJoseph]

I picked some else's project and it kind of works ok, each card is a /cards/[slug]/page.tsx kind of page - sorry if I am being like this, I am very short on time, so if we can discuss over the same code we'll make a lot of gains, instead of trying to guess past each other.

Screen.Recording.2025-11-26.at.16.12.54.mov

[mas8022]

This my sample code but don't work cache good on it
https://github.com/mas8022/next-16

[icyJoseph]

Nice. So like, what is your expectation, let's avoid assumptions, so that we can make progress here.

What I see in that repo is that, src/app/(main)/todos/[id]/page.tsx and src/app/(main)/todos/page.tsx do a look up for data associated with a user, either for all todos or one todo by [id].

What expectation are you having, or what's not working at all? Is it ISR per todo? or are you seeing too many hits against the database, in spite of the caching? did you expect more in the static shell?

[mas8022]

Can you give me your GitHub this project I want read and clone that to understand beter

[mas8022]

Thank you ❤️🙏

…

On Wed, Nov 26, 2025, 18:45 Joseph ***@***.***> wrote: I picked some else's project and it kind of works ok, each card is a /cards/[slug]/page.tsx kind of page - sorry if I am being like this, I am very short on time, so if we can discuss over the same code we'll make a lot of gains, instead of trying to guess past each other. https://github.com/user-attachments/assets/5406864f-6ddc-4ad7-b0ec-4d3e31e05302 — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVUKWAIX7SBSRMNVUKT36W7X3AVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBYG43TMNQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mas8022]

You right

…

On Wed, Nov 26, 2025, 18:45 Joseph ***@***.***> wrote: I picked some else's project and it kind of works ok, each card is a /cards/[slug]/page.tsx kind of page - sorry if I am being like this, I am very short on time, so if we can discuss over the same code we'll make a lot of gains, instead of trying to guess past each other. https://github.com/user-attachments/assets/5406864f-6ddc-4ad7-b0ec-4d3e31e05302 — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVUKWAIX7SBSRMNVUKT36W7X3AVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBYG43TMNQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mas8022]

I'll send you a sample code tomorrow night. Sorry for being late, I have an exam tomorrow morning. Sorry again.

…

On Wed, Nov 26, 2025, 18:45 Joseph ***@***.***> wrote: I picked some else's project and it kind of works ok, each card is a /cards/[slug]/page.tsx kind of page - sorry if I am being like this, I am very short on time, so if we can discuss over the same code we'll make a lot of gains, instead of trying to guess past each other. https://github.com/user-attachments/assets/5406864f-6ddc-4ad7-b0ec-4d3e31e05302 — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVUKWAIX7SBSRMNVUKT36W7X3AVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBYG43TMNQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mas8022]

For this code, first we need to go to the /auth page, then register, then create a few tasks on the home page, then when you go to the page that displays the tasks, you should click on each task and it should immediately display that page for the second time onwards, but this is not the case. I have given some guidance in the READ.md file on how to run my code.

…

On Thu, Nov 27, 2025, 12:57 Joseph ***@***.***> wrote: Nice. So like, what is your expectation, let's avoid assumptions, so that we can make progress here. What I see in that repo is that, src/app/(main)/todos/[id]/page.tsx and src/app/(main)/todos/page.tsx do a look up for data associated with a user, either for all todos or one todo by [id]. What expectation are you having, or what's not working at all? Is it ISR per todo? or are you seeing too many hits against the database, in spite of the caching? did you expect more in the static shell? — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVU5DPOXEZYIXTJ25R33627ZPAVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBZGQ4TSMY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[icyJoseph]

What you mean more is like, well the TODO is stored in in-memory cache, for max time, doesn't the page just show it, and that's one of the ongoing pieces here, you can already add something like, to your todos/[id] page, and you'll see that

export const unstable_prefetch = {
  mode: "runtime",
  samples: [{}],
};

With this added, you'll see that the RSC payloads change. In this case the todo is console.log

You can use https://rsc-parser.vercel.app/ to visualize this text bits a bit better - not that you need to though!

Without:

1:"$Sreact.fragment"
2:"$Sreact.suspense"
4:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"OutletBoundary"]
0:{"buildId":"WXjjMYAbz7pXvgU0J7G5G","rsc":["$","$1","c",{"children":[["$","div",null,{"className":"w-full flex flex-col items-center gap-5 p-20","children":[["$","p",null,{"className":"font-semibold text-3xl","children":"the todo page"}],["$","$2",null,{"children":"$L3"}]]}],null,["$","$L4",null,{"children":["$","$2",null,{"name":"Next.MetadataOutlet","children":"$@5"}]}]]}],"loading":null,"isPartial":true}
5:null

No console.log text to be seen, only the loading state (no fallback UI on your suspense boundary).

Normally, the network is so fast, you might not even see this but if you slow it down yeah...

With the runtime prefetch:

1:"$Sreact.fragment"
3:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"OutletBoundary"]
4:"$Sreact.suspense"
6:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"ViewportBoundary"]
8:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"MetadataBoundary"]
b:I[27201,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"IconMark"]
0:{"b":"hWbKM-xhoI1rUfm6hrxHy","f":[["children","(main)","children","todos","children",["id","6","d"],"children","__PAGE__",["__PAGE__",{}],[["$","$1","c",{"children":["$L2",null,["$","$L3",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@5"}]}]]}],{},null,false,true],["$","$1","h",{"children":[null,["$","$L6","Gd041tLSKict_EV2AqcIYv",{"children":"$@7"}],["$","div","Gd041tLSKict_EV2AqcIYm",{"hidden":true,"children":["$","$L8",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":"$@9"}]}]}]]}],false]],"S":false}
2:["$","div",null,{"className":"w-full flex flex-col items-center gap-5 p-20","children":[["$","p",null,{"className":"font-semibold text-3xl","children":"the todo page"}],["$","$4",null,{"children":"$La"}]]}]
7:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
a:["$","div",null,{"className":"w-full h-screen flex flex-col items-center justify-center gap-5","children":[["$","p",null,{"className":"text-xl","children":"console.log"}],["$","p",null,{"className":"text-xl","children":"11/27/2025"}]]}]
9:[["$","link","0",{"rel":"icon","href":"/favicon.ico?favicon.0b3bf435.ico","sizes":"256x256","type":"image/x-icon"}],["$","$Lb","1",{}]]
5:null

Now we see it. As part of the a: entry. So clicking into the item shows immediate data.

This and any other automatic optimizations will be part of the final picture. The team wants to ensure that if the automatic optimizations don't pick up on a certain page, then the dev runtime or build step should tell you that, as in one route navigation might not work as you expect... It is still unstable in terms of the API, but this is part of feature set that Cache Components covers.

[mas8022]

It doesn't work properly for me. When I use 3G, even though I'm on the todo page, it still takes a while to display.

…

On Thu, Nov 27, 2025, 14:26 Joseph ***@***.***> wrote: What you mean more is like, well the TODO is stored in in-memory cache, for max time, doesn't the page just show it, and that's one of the ongoing pieces here, you can already add something like, to your todos/[id] page, and you'll see that export const unstable_prefetch = { mode: "runtime", samples: [{}],}; With this added, you'll see that the RSC payloads change. In this case the todo is console.log Without: 1:"$Sreact.fragment" 2:"$Sreact.suspense" 4:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"OutletBoundary"] 0:{"buildId":"WXjjMYAbz7pXvgU0J7G5G","rsc":["$","$1","c",{"children":[["$","div",null,{"className":"w-full flex flex-col items-center gap-5 p-20","children":[["$","p",null,{"className":"font-semibold text-3xl","children":"the todo ***@***.***"}]}]]}],"loading":null,"isPartial":true} 5:null No console.log text to be seen, only the loading state (no fallback UI on your suspense boundary). Normally, the network is so fast, you might not even see this but if you slow it down yeah... With the runtime prefetch: 1:"$Sreact.fragment" 3:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"OutletBoundary"] 4:"$Sreact.suspense" 6:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"ViewportBoundary"] 8:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"MetadataBoundary"] b:I[27201,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/3f1a423581781f16.js"],"IconMark"] ***@***.******@***.******@***.***"}]}]}]]}],false]],"S":false} 2:["$","div",null,{"className":"w-full flex flex-col items-center gap-5 p-20","children":[["$","p",null,{"className":"font-semibold text-3xl","children":"the todo page"}],["$","$4",null,{"children":"$La"}]]}] 7:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] a:["$","div",null,{"className":"w-full h-screen flex flex-col items-center justify-center gap-5","children":[["$","p",null,{"className":"text-xl","children":"console.log"}],["$","p",null,{"className":"text-xl","children":"11/27/2025"}]]}] 9:[["$","link","0",{"rel":"icon","href":"/favicon.ico?favicon.0b3bf435.ico","sizes":"256x256","type":"image/x-icon"}],["$","$Lb","1",{}]] 5:null Now we see it. As part of the 7th entry. So clicking into the item shows immediate data. This and any other automatic optimizations will be part of the final picture. The team wants to ensure that if the automatic optimizations don't pick up on a certain page, then the dev runtime or build step should tell you that, as in one route navigation might not work as you expect... It is still unstable in terms of the API, but this is part of feature set that Cache Components covers. — Reply to this email directly, view it on GitHub <#86508 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A72UNVQSWQLW6YP2ZF4UIVD363KFJAVCNFSM6AAAAACNFSX3C6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMBZGU4TENY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[icyJoseph]

Did you add this to the page.tsx files?

In the beginning it is all -uchkkk- but once some of the other assets loads, then the data is there. Cache components keep 3 views in the DOM and re-uses them via Activity Component, so I am clicking around 4 todos + the all todos page, to show that some of the are regenerated

Screen.Recording.2025-11-27.at.11.32.02.mov

[mas8022]

That's interesting, my code ran correctly. What code did you modify to make it work properly and what did you add?

[icyJoseph]

I only added the unstable_prefetch to the pages:

diff --git a/src/app/(main)/todos/[id]/page.tsx b/src/app/(main)/todos/[id]/page.tsx
index 998c930..f2065a2 100644
--- a/src/app/(main)/todos/[id]/page.tsx
+++ b/src/app/(main)/todos/[id]/page.tsx
@@ -15,3 +15,8 @@ export default async function Page({
     </div>
   );
 }
+
+export const unstable_prefetch = {
+  mode: "runtime",
+  samples: [{}],
+};
diff --git a/src/app/(main)/todos/page.tsx b/src/app/(main)/todos/page.tsx
index 9cd4dad..4ad7f5d 100644
--- a/src/app/(main)/todos/page.tsx
+++ b/src/app/(main)/todos/page.tsx
@@ -24,3 +24,8 @@ const Page = () => {
 };
 
 export default Page;
+
+export const unstable_prefetch = {
+  mode: "runtime",
+  samples: [{}],
+};

[mas8022]

Thanks alot ❤️ it's fixed and work perfectly but I can't find this code in documents anyway thanks alot

[icyJoseph]

Yes, we had initially included, in an incorrect place, and as you can see, it is unstable_ - we need to define some more aspects of the API surface devs will interact with.

[mas8022]

Thanks♥️