Setting Dynamic Response Headers in Next.js App Router Based on External API Headers
Unanswered
Atlantic mackerel posted this in #help-forum
Atlantic mackerelOP
I ran into a limitation while migrating to the Next.js App Router.
In the old Pages Router, we could set response headers inside getServerSideProps. However, in the App Router, this no longer works the same way. Headers are effectively read-only because of React Server Components and streaming.
I need to set a page response header based on a header returned from an external API.
Could you share your thoughts on how to handle this scenario?
In the old Pages Router, we could set response headers inside getServerSideProps. However, in the App Router, this no longer works the same way. Headers are effectively read-only because of React Server Components and streaming.
I need to set a page response header based on a header returned from an external API.
Could you share your thoughts on how to handle this scenario?
4 Replies
Atlantic mackerelOP
Hello @Anay-208 ,
I’m trying to solve an issue after migrating from the Pages Router to the App Router in Next.js.
In the Pages Router, we were able to set custom response headers inside getServerSideProps before the page was rendered. This worked well because the headers were finalized before the HTML response was sent.
After migrating to the App Router, due to React Server Components streaming, we are no longer able to set custom headers from within a page.tsx. By the time data is fetched and rendering begins, the response headers are already committed.
I’m looking for a way to:
- Read data from an API or server-side logic
- Compute a custom header value based on that data
- Set this header on the page response (not an API/route handler response)
- Do this before the headers are finalized, even with streaming enabled
I’ve tried a few approaches but haven’t found a clean solution that works with the App Router model.
This GitHub discussion describes a very similar problem:
https://github.com/vercel/next.js/discussions/58110
Has anyone found a reliable pattern to achieve this in the App Router?
I’m trying to solve an issue after migrating from the Pages Router to the App Router in Next.js.
In the Pages Router, we were able to set custom response headers inside getServerSideProps before the page was rendered. This worked well because the headers were finalized before the HTML response was sent.
After migrating to the App Router, due to React Server Components streaming, we are no longer able to set custom headers from within a page.tsx. By the time data is fetched and rendering begins, the response headers are already committed.
I’m looking for a way to:
- Read data from an API or server-side logic
- Compute a custom header value based on that data
- Set this header on the page response (not an API/route handler response)
- Do this before the headers are finalized, even with streaming enabled
I’ve tried a few approaches but haven’t found a clean solution that works with the App Router model.
This GitHub discussion describes a very similar problem:
https://github.com/vercel/next.js/discussions/58110
Has anyone found a reliable pattern to achieve this in the App Router?
@Atlantic mackerel Hello <@755810867878297610> ,
I’m trying to solve an issue after migrating from the Pages Router to the App Router in Next.js.
In the Pages Router, we were able to set custom response headers inside getServerSideProps before the page was rendered. This worked well because the headers were finalized before the HTML response was sent.
After migrating to the App Router, due to React Server Components streaming, we are no longer able to set custom headers from within a page.tsx. By the time data is fetched and rendering begins, the response headers are already committed.
I’m looking for a way to:
- Read data from an API or server-side logic
- Compute a custom header value based on that data
- Set this header on the page response (not an API/route handler response)
- Do this before the headers are finalized, even with streaming enabled
I’ve tried a few approaches but haven’t found a clean solution that works with the App Router model.
This GitHub discussion describes a very similar problem:
https://github.com/vercel/next.js/discussions/58110
Has anyone found a reliable pattern to achieve this in the App Router?
I see you want to set custom cache tags. That doesn't seem like its possible with Next.js as of now. You can perhaps use static headers by adding it to
next.config.ts