How to add cache headers to SSR routes?

[CaptainN]

I need to be able to set cache headers so that data chunks and rendered pages will get cached in cloudfront, even when query params are used. In PHP (or next.js pages router) this would be a 10 second problem. How do I do the same thing in next.js app router?

[andymcbee]

We don't host on Vercel, so maybe it's different than a typical setup, but:

If memory serves, I believe we had to add export const dynamic = "force-static"; to the dynamic page.tsx files and that enabled the chunks to cache with Cloudflare. I believe we also used exported const revalidate = 60; as needed in the same page.tsx files. Obviously change this value to suit needs. (This was for nextjs 14 app router)

I recall we also had to set the asset prefix in the next config file like so:

const nextConfig = {
assetPrefix: isProd ? "https://cdn.domain.com" : undefined,
};

Our pages do not use query params, so I'm not sure if this is relevant in that context. Just thought I'd pass it along as I recall it being a head scratcher when I had to do it before.

Good luck!

[andymcbee]

Ahh frustrating. What type of component is it? is it a client or server? is it being used in a layout by chance?

I'll do some digging on my end and see if I get the same behavior if I get some time this afternoon.

[CaptainN]

We got it working, but not without hitting other baffling errors, that are probably not actually errors...

The error that you get when adding generateStaticParams comes from a few different things: in RSC, functions like headers() which we had been using, or checking searchParams, or in server rendered "use client" components (SSR/SSG/ISR) hooks like useSearchParams maybe some others that aren't well documented would throw the error.

To get around the problem, we refactored on of the search params, so that it's a proper route param, and allowed the other search params (thing that modify things on page when printing) to only apply client side through checking in useEffect. This takes care of all the documented dynamic function use that is documented, and that I can find in my component tree, but it still throws an error - only if I use an empty array in generateStaticParams... If I return params, I get no error. From what I understand, and empty array should be completely valid for generateStaticParams.

[CaptainN]

But if I set force-static then it all works fine - maybe that's the correct behavior, IDK. I hope nothing is failing silently, but I have very little certainty of that.

[CaptainN]

Even though this seems to work at runtime - I now get the cache headers I'm looking for, and x-nextjs-cache reports "HIT" - it still says essentially ALL of my routes are "ƒ (Dynamic)" - all except the 404 page left over in the pages router. Literally every other page is dynamic, according to the compile output.

This may require some documentation cleanup.

[CaptainN]

Oh! It does show the correct output in the generate step - static routes as static, and dynamic as dynamic - the compile step outputs all the routes as "dynamic" - this kind of makes sense.