Unable to dynamically set response headers in `page.js` components (App router)

[leonbe02]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Latest next.js app

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

n/a

To Reproduce

Create an app/page.js file and then cry when you realize there is no way to set a response header based on data you fetched to render the page.

Describe the Bug

When using the Page router, you are able to dynamically set response headers within the getServerSideProps function since it is passed a reference to the response object. When using the App router, there is no method in which you can dynamically set a header on the response based on data fetches that occur when SSR the page. This appears to be a regression or missed feature that wasn't migrated from the Page router.

import getProduct from '@/lib/getProduct.js';

export function getServerSideProps({ res, query }) {
  const product = await getProduct(query.slug);
  if (!product) return { notFound: true };

  let maxAge = 86400;
  if (product.saleEndDate > Date.now()) {
    maxAge = Math.min(
      maxAge,
      Math.floor((product.saleEndDate - Date.now()) / 1000)
    );
  }

  res.setHeader('Surrogate-Key', product.id);
  res.setHeader('Surrogate-Control', `max-age=${maxAge}`);

  return {
    props: { product }
  };
}

Expected Behavior

When using the App router, you can get a read-only copy of the request headers, but I'd expect there to be a method in which I can dynamically set the response header based on data I fetched to render the page server-side.

The main use case for us is to set the Surrogate-Key header which is used by our CDN (Fastly) to programmatically purge the cache via tagging: https://docs.fastly.com/en/guides/working-with-surrogate-keys

The only methods I see for setting response headers currently when using the App router is to apply them in the middleware or in the next.config.js. Both of these options are not aware of the data that was fetched when rendering a page so neither of them are able to set headers using data from the page.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[mattvb91]

Have you been able to fix this? This is a massive issue.

[Darshan-Naik]

Facing same issue, not able to migrate to app routing because of this limitation.

[mattvb91]

related to #42112 maybe too?

[leonbe02]

Have you been able to fix this? This is a massive issue.

There aren't any work arounds that I'm aware of, the Next.js folks will need to provide a mechanism for these Server Components to be able to apply response headers during SSR.

[fmnxl]

I've been trying to use this: https://nextjs.org/docs/pages/api-reference/next-config-js/headers.

[mattvb91]

How would I go about it if my api upstream is responsible for setting the headers? I would retrieve them out of my getInitialProps and set them based on what the API upstream was telling to set it. But I can no longer do that

[Nhollas]

This is massive not having this considering I was doing stuff like this before in pages:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req } = context;
  if (req.cookies.QuoteId) {
    return {
      props: {},
    };
  }

  const { userId, getToken } = getAuth(req);

  const response = await externalApiClient.post(
    `/api/gateway/createQuote`,
    null,
    userId
      ? {
          headers: {
            Authorization: `Bearer ${await getToken()}`,
          },
        }
      : {}
  );

  if (response.headers["set-cookie"]) {
    context.res.setHeader("set-cookie", response.headers["set-cookie"]);
  }

  return {
    props: {},
  };
};

[mattvb91]

@Nhollas pretty much in the same boat as you. And doing it through the middleware isnt really an option either because even if managed to do that it would trigger the external API request twice

[4hmaad]

buuuuuuuuuuump!!

[JacobArrow]

We are having this exact issue aswell!

[mjyaqubi]

Having the same issue while trying to add the last-modified header dynamically!

[nsmith7989]

Similar issue, looking for workarounds myself.

Anyone know: is it possible to use <meta> tags to represent headers? Is that equivalent to a http header in all cases, or just some like content security policy?