Next js 14 app router always Hard refresh when behind cloudfront

Question

I am working with nextJs 14 app router and it's behind CloudFront

My application works very weirdly it is always hard refresh irrespective of whether I use the Link component of the nextJs.

I have noticed that when the application is not behind CloudFront for example on a local or development environment there is a different vary header.

Kindly help me find out how this issue can be solved.

I tried to write a policy on CloudFront to send the vary header which is expected

Update:

We have solved this by adding the cache policy at cloudfront to allow vary header with required values on request and response both

Answer 1

Update:

We have solved this by adding the cache policy at cloudfront to allow vary header with required values on request and response both