Amazon cloudfront not storing cache and always gets x-cache: Miss from cloudfront in browser in webpage header.

Question

I have NextJS ISR Application deployed on AWS Amplify. I set cache control policy in amplify.yml as customHeaders:
    - pattern: '/job/*'
      headers:
      - key: 'Cache-Control'
        value: 'public, max-age=14400, s-maxage=14400, stale-while-revalidate=7200'

and also in next.config.js as 
async headers() {
    return [
      {
        source: "/job/:job_search",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=14400, s-maxage=14400, stale-while-revalidate=7200",
          },
        ],
      },
    ];
  },

also I set Behaviors in cloudfront distribution to store cache, but even though i am not able to get cache from cloudfront for my static pages. when i hit static page from postman i get page from cloudfront cache and get in header as X-Cache: Hit from cloudfront and also response in fast, But when i hit page from browser i dont get page form cache and also pages take time to load and in header i get X-Cache: Miss from cloudfront.

I am not getting how should i set settings so that my static pages will serve from cache ? Please guide me

Answer

If you have configured CloudFront to cache your static pages, but are still seeing X-Cache: Miss from cloudfront in your browser headers, there could be a few reasons for this.

Firstly, it's worth checking if the cache-control headers are being set correctly on the responses from your server. You have already added cache-control headers in your amplify.yml and next.config.js files, but you can verify if these headers are being set correctly by inspecting the response headers of a request to your server. You can use a tool like cURL or Postman to make a request to your server and inspect the response headers.

If the cache-control headers are being set correctly, then it's possible that the browser is bypassing the cache and making a request to the server every time because of the way the page is being loaded. For example, if the page is being loaded with AJAX or JavaScript, the browser may not cache the page by default. In this case, you can try configuring your application to explicitly request the page with cache-control headers.

Another possibility is that CloudFront is not properly configured to cache your static pages. You can check your CloudFront distribution's cache behavior settings to ensure that caching is enabled and that the cache key is configured correctly. You can also check the CloudFront access logs to see if your static pages are being served from cache.

Finally, keep in mind that CloudFront caching is distributed and may take some time to propagate. If you have recently made changes to your cache-control headers or CloudFront distribution settings, it may take some time for the changes to take effect.

I hope this helps!

Answer

Same problem. and i think it is a cloudfront Bug.
it doesn't support s-maxage and max-age at the same time, remove one it will work.

here is how i reproduced the problem:

i built a small web server hosting a couple of html pages to validate how cloudfront behaves with cachecontrol headers and i was surprised by the cache beeing completly disabled for resources that have in their origin both headers : max-age and s-maxage.

**The Setup:**
1.The setup is easy i have an apache that hosts a galery of 3 images for which i specified the follwing .htaccess file :
`
    Header set Cache-Control "public, max-age=20, s-maxage=60"
`

2.I put a tail on my apache access log to observe the requests hitting the server (origin)

3.My Cloud front configuration is full default with a CacheOptimized and an allviewer orgin policy.

**Test 1/Result 1:  (falsy)**
on the access log, i observe a hit on each request to the image and on the response header from cloud front observed on the browser i have an X-cache header with the following message : Miss from cloudfront.

**Test2/Result 2: (working)**
When i change the origin header to only max-age or s-maxage the cloudfront start working correctly respeting the Chache control header.

Is it a cloudfront bug or did i do someting wrong?

Amazon cloudfront not storing cache and always gets x-cache: Miss from cloudfront in browser in webpage header.

Relevant content