React/Next.js site doesn't load properly in Safari (blank page)

Question

I know this is very general but I have a bug in my Next.js website, where when I open my site in Safari, it sometimes loads and sometimes doesn't (almost 50/50 chance - shows a blank page, but I can see outlines of some of my components, no text though). It happens on both iOS/macOS versions of Safari. I read about Cache-Control headers which apparently cause Safari trouble when trying to load the page, but I tried those solutions and they didn't work for me (e.g. setting headers like so res.header("Cache-Control", "no-cache, no-store, must-revalidate") and adding app.disable('etag') to my node server).

All I would like to know at this point is the root cause of this. Is it a React thing? Node thing? Next.js or the browser itself (that would be my guess as all the other browsers don't have this issue). Also it's very strange that this doesn't happen 100% of times.

On localhost this issue does not happen. (Different headers?)

Has anyone ever run into the same issue? Any feedback is welcomed.

Thanks.

EDIT: So I managed to fix this. The issue was the font I was trying to use imported from Adobe Fonts. Spent 3 days on this but once I replaced the font with a standard Google Font, everything started working OK. Hope this saves someone a headache.

Answer 1

Give an alternate or fallback , font-family , for lousy browsers , you can may be give sans , or sans-serif to avoid this type of issues in future.