Setting Http headers like Cache-Tags inside App Routes

[LegendAlec-M]

Summary

Hi,

We are using App routes in our Next.js project v14. Our page.tsx file, calls an API endpoint with the page slug and user location as parameters to retrieve the page content. Our use case is to pick the property article_id from the API Endpoint response and set it in the HTTP Cache-Tag header
e.g. Cache-Tag: article_10.

At the moment its not possible to set Http headers inside the page.tsx file due to limitation of next.js. We have thought about adding the API call as a middleware, however it's not in the page context in middleware or we would have to duplicate calls to the Api endpoint once in middleware and once in page.tsx.

Is there a workaround that we could use at to set http headers inside the App routes (page.tsx)

Thanks in advance for you help.

Alec

Additional information

No response

Example

No response

[icyJoseph]

You must be using App Router though, no?

This is not a limitation of Next.js, necessarily, but streaming, headers are already sent. In Pages Router, you can do this in getServerSideProps though. But you keep saying page.tsx and stuff.

What is the usage at the of the day, caching in a CDN? Feels like yeah, you'd need to have a fast path in the proxy/middleware to get the data you need, preferably with a key-value store in front, to lower latency.

[LegendAlec-M]

@icyJoseph Sorry, just double checked its App Router, its to set the Cache-Tags for CDN. So the only away around this is to store the api response in middleware on a cache key and then read it in page.tsx ?

[kuldeeprajput-dev]

@LegendAlec-M Bro, I think the collaborator @icyJoseph is right here.

In App Router, page.tsx is part of the rendering/streaming flow, so it is too late to set response headers like Cache-Tag from there. The header needs to be known before the response starts.

For CDN cache tags, the better workaround is to resolve only the minimum data in middleware/proxy, like:

slug + location -> article_id

Then set the Cache-Tag header there. I would avoid storing the full API response in middleware; a small KV/cache lookup for the article_id should be cleaner and faster.

[LegendAlec-M]

Thanks @kuldeeprajput-dev , I'll give it a try.