I am struggling to understand the caching mechanism in Next.js app router. According to the documentation, Next.js is supposed to cache everything statically by default, but this doesn't seem to apply when dealing with dynamic paths in my application.
Lets say i have a route like this /test/[[...slug]]
What I want is to SSR (Server-Side Render) a page, but after the first time, the whole page should be cached in the CDN (Content Delivery Network). I can achieve this by using generateStaticParams with an empty array or force-static. However, the issue is that the first load will not use streaming, and my loading.js and loading in suspense won't be utilized. This happens because when you use generateStaticParams or force-static, Next.js sets dynamicParams to false, and as a result, streaming stops working. But it gets caached in the CDN
But when i tried without generateStaticParam or force-static. It is always X-Vercel-Cache: MISS when i look in the network tab.
i am using vercel as hosting
My goal is to benefit from both features: I want the initial load of a page to use streaming, and once it's complete, have the entire page cached in the CDN. Is there a way to accomplish this in Next.js? Have I overlooked something in the documentation or missed a critical concept?
Any guidance on this matter would be greatly appreciated. Thank you in advance.
I've tried running several combinations of their settings that I find here https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config but none of them solve my problem
