Performance Issues with Next.js Website Using Azure CDN (Standard Edgio)

Question

"My website is built on Next.js and is configured with Azure CDN (Standard Edgio) I've set the caching behavior to 'Set if missing' and configured the query string caching to 'cache every unique URL'. However, I am experiencing a noticeable lag in UI and extended loading times when navigating between menus or sections on the site. and When I access the website without CDN, it works perfectly fine without any such kind of issues. Could you please assist in resolving this problem?"

Answer 1

@Hrithik

Thank you for reaching out.

In order to check if the caching is working as expected, you can take a look at Cache Statuses report for your Azure CDN (Standard Edgio). This report describes the distribution of cache hits and cache misses for client requests. Because the fastest performance results from cache hits, you can optimize data delivery speeds by minimizing cache misses and expired cache hits.

Cache Hit Ratio can also be a good indication of cached requests that were served directly from cache.

Based on the observation from the reports above and you can check the cache configuration need any change.

As you have set the cache behavior to Set if missing this option Honors origin-provided cache-directive headers, if they exist; otherwise, uses the provided cache duration. More information on Cache-directive headers can be found here.

Cache every unique URL: In this mode, each request with a unique URL, including the query string, is treated as a unique asset with its own cache.

It is not suggested to use this mode when the query string contains parameters that will change with every request, such as a session ID or a user name, because it will result in a low cache-hit ratio.

Hope this helps! Please let me know if you any additional questions. Thank you!