简体繁体 English

React/Next.js 站点无法在 Safari 中正确加载（空白页）

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

原文 2020-07-23 13:28:01 4 1 javascript/ node.js/ reactjs/ safari/ next.js

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).我知道这是非常普遍的，但我的 Next.js 网站中有一个错误，当我在 Safari 中打开我的网站时，它有时会加载，有时不会（几乎 50/50 的机会 - 显示空白页面，但我可以看到轮廓我的一些组件，但没有文字）。 It happens on both iOS/macOS versions of Safari.它发生在 Safari 的两个 iOS/macOS 版本上。 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 (eg setting headers like so res.header("Cache-Control", "no-cache, no-store, must-revalidate") and adding app.disable('etag') to my node server).我阅读了有关Cache-Control标头的信息，这些标头在尝试加载页面时显然会导致 Safari 麻烦，但我尝试了这些解决方案，但它们对我不起作用（例如，设置像res.header("Cache-Control", "no-cache, no-store, must-revalidate")并将app.disable('etag')添加到我的节点服务器）。

All I would like to know at this point is the root cause of this.在这一点上，我只想知道这一切的根本原因。 Is it a React thing?它是 React 的东西吗？ Node thing?节点的事？ Next.js or the browser itself (that would be my guess as all the other browsers don't have this issue). Next.js 或浏览器本身（这是我的猜测，因为所有其他浏览器都没有这个问题）。 Also it's very strange that this doesn't happen 100% of times.也很奇怪，这不会发生 100% 的时间。

On localhost this issue does not happen.在localhost上不会发生此问题。 (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.问题是我尝试使用从 Adobe Fonts 导入的字体。 Spent 3 days on this but once I replaced the font with a standard Google Font, everything started working OK.花了 3 天的时间，但是一旦我用标准的 Google 字体替换了字体，一切都开始正常了。 Hope this saves someone a headache.希望这可以避免某人头痛。