HTTP requests randomly stuck forever at pending on Chrome and Safari

Hi there,
We have deployed a NextJS site to Netlify and started notice a couple of problems happening randomly on site load:

  • Sometimes many of the images http requests get stuck forever at pending state,
  • Also, sometimes the site JS served from Cloudfront CDN are empty.

This only happens while loading the site on Chrome or Safari. Firefox works fine.

This can be easily reproduced by force refreshing the website repeteadly, after a few refreshes the pending requests show up and images never get loaded.

The website is live at https://www.wallstfam.com/

Our current Netlify setup is mostly the default config with these tweaks:

  • Fully disabled assets optimization
  • Updated Essential NextJS plugin to latest version (4.3.0).

We also deployed exactly the same site to Vercel and nothing of this happens, the site always loads perfectly, even while doing some crazy force refreshes (10 refreshes in a second). The Vercel version is at https://wsf.vercel.app/

We’d like to keep the website on Netlify where we host some other projects, but this issue is causing many users to think the website is broken and we need to fix it soon.

Any hint?

Thanks!

hey abolo, that is strange what you are seeing.

could you try capturing a HAR file with the behaviour that you’re describing?

https://toolbox.googleapps.com/apps/har_analyzer/

am i correct in understanding that this only happens with cached files? :thinking:

Hi @perry!
Attached is the HAR file. You’re right, it only happens with cached files (mostly images and svg files). If you force refresh like 10 times in a second the problem appears, that’s the only way I found for reproducing it. Our main issue is that this happens randomly on site load.

HAR file: https://www.dropbox.com/s/wnkgcdqclqpmwlm/www.wallstfam.com.har?dl=0

Thanks!

Thanks @robertrocks2342 for your suggestion! Chrome is already updated to latest version and the site is running over HTTPS but the issue still persists.

This is a high priority issue for us. (We really don’t want to have to move to vercel. But based on our testing of vercel with the same code repo, this issue does not happen there. )

Can you prioritize helping us resolve this issue? We are at a loss on what we can try to fix.

Hi @perry , any update on this issue? We’re having many users reporting this problem while loading the site. We need to fix it ASAP, otherwise we’ll be forced to move to Vercel.

Thanks.

I see this as well for your site.


This is not normal behavior, and hence is not a realistic scenario. Nevertheless, the cause of the original issue may have something to do with how Netlify manages its cache control. The cause of the force-refreshing issue is certainly this.

Most sites cache aggressively - Cloudflare, Vercel etc. Eg look at the cache control header on any static resource from Vercel:

cache-control: public,max-age=31536000,immutable

So when you reload the site, it will serve from local cache. You can reload once or a 100 times - no difference.

Netlify wants to revalidate each and every resource, each time on site load and reload. I’ve pointed this out earlier as well that its rubbish.

cache-control: public, max-age=0, must-revalidate

So I believe that when a flood of traffic hits Netlify servers, and its not a busy site, their servers cant keep up.

Here’s my post (Very) slow loading of some js: TTBF / download / revalidation, point 3
and

PS: Netlify folks can correct me if I’m wrong.

Hey there, @Phu_Ngo and @abolo :wave:

Thanks for your patience here. Our team has followed up with email support earlier this week. That being said, I wanted to publicly close the loop here as well. We’re experiencing an unusual amount of threads which made us get back to you later than expected, and we appreciate your patience.

If you would like to further investigate with our team of support engineers, please follow up to the email we sent out. If you do not have any emails from us, please let me know :slight_smile: