Support a pattern like Vary for ISR (opt-out of dynamic rendering)

[amannn]

From the data fetching caching docs:

Next.js provides helpful functions you may need when fetching data in Server Components such as cookies and headers. These will cause the route to be dynamically rendered as they rely on request time information.

Over time, I ran into some cases where a route opts into dynamic rendering, disabling the cache-control response header.

Examples:

1. A proxy passes an x-auth authorization header to the app, which should be forwarded to API calls. This is different from a user-specific authorization header in that it is required for non-user-specific endpoints too. I understand that an environment parameter could be used in a similar way, this is mostly about being able to integrate with existing infrastructure.
2. A proxy generates an x-request-id header that is passed to the app and needs to be forwarded to all API calls. In this case, the API calls might reach through multiple levels between services and the ID is important to group relevant logs.

As soon as headers().get(…) is called, Next.js disables the full route cache.

HTTP supports the Vary header to describe the headers that influence the response.

I'm wondering if something like this could be supported by Next.js too.

Example:

// page.tsx

// Only if these headers are read via `headers().get(…)`, 
// then the full route cache is skipped. Additionally, some
// headers like `host` can still support CDN caching in
// case the header is part of the cache key.
export const vary = ['authorization'];

Alternatively, there could also be a list of explicitly allowed headers that don't influence the response.

See also: Understanding The Vary Header

[leerob]

It's now possible to customize cache-control as of v14.2.10. Please upgrade and give it a try!

#69802