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

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

提问人:TommyVee 提问时间:7/23/2020 最后编辑:TommyVee 更新时间:8/19/2023 访问量:5939

问:

我知道这是非常普遍的,但我的Next.js网站有一个错误,当我在Safari中打开我的网站时,它有时会加载,有时不会(几乎50/50的机会 - 显示空白页面,但我可以看到我的一些组件的轮廓,虽然没有文本)。它发生在 iOS/macOS 版本的 Safari 上。我读到了标题,这些标题在尝试加载页面时显然会导致 Safari 问题,但我尝试了这些解决方案,但它们对我不起作用(例如,像这样设置标题并添加到我的节点服务器)。Cache-Controlres.header("Cache-Control", "no-cache, no-store, must-revalidate")app.disable('etag')

在这一点上,我想知道的是造成这种情况的根本原因。这是 React 的事情吗?节点的东西?Next.js 或浏览器本身(这是我的猜测,因为所有其他浏览器都没有这个问题)。 此外,这不会 100% 发生,这很奇怪。

在这个问题上没有发生。(不同的标题?localhost

有没有人遇到过同样的问题?欢迎任何反馈。

谢谢。

编辑:所以我设法解决了这个问题。问题是我尝试使用的从 Adobe Fonts 导入的字体。花了 3 天时间,但一旦我用标准的 Google 字体替换了字体,一切就开始正常工作了。 希望这能为某人省去麻烦。

JavaScript ReactJS Safari Next.js

评论

0赞 Pragnesh 8/2/2021
您好,我是新 iN react+next,在 safari 中打开我的项目时在本地出现白屏。
2赞 Ørjan 2/2/2022
谢谢你把我推向正确的方向。就我而言,我导入了只有 .使用 googles --> 工具 (github.com/google/woff2),并通过在项目中手动导入字体文件,我能够解决这个问题。ttfttfwoff
2赞 Darryl RN 8/5/2022
如果你能把你的答案作为一个答案而不是一个额外的注释来回顾,那就太好了。很高兴看到您找到了根本原因并解决了:)
0赞 princess_hacker 4/12/2023
回答您自己的问题也会为您提供额外的徽章:)

答:

0赞 Aatif Khan 8/19/2023 #1

对于糟糕的浏览器,可以给 sans 或 sans-serif 一个替代或后备 , font-family ,以避免将来出现此类问题。