Next.js: 开发服务器具有未样式化内容的内容（FOUC）

创建于 2020-05-18  ·  20评论  ·  资料来源: vercel/next.js

错误报告

描述错误

清楚简明地描述错误是什么。

当使用Next.js时，当<div id="__next">元素第一次变得可见时，CSS似乎并没有完全融入<head> 。

当运行我们的开发服务器时，这会导致未样式化内容（或FOUC）的闪烁。 虽然看起来生产上还不错（这对我来说很奇怪）。

重现

重现行为的步骤，请提供代码段或存储库：

  1. 通过运行以下命令来克隆此存储库：
$ git clone https://github.com/tutorbookapp/covid-tutoring
  1. 通过运行以下命令安装我们的依赖项（更多详细信息，请参见README.md ）：
$ npm i && lerna bootstrap --hoist
  1. 通过运行以下命令启动开发服务器：
$ npm run dev
  1. 首次加载页面时请注意FOUC。

预期行为

对您期望发生的事情的简洁明了的描述。

<div id="__next">元素仅应在必要的首屏样式表（即，首屏可见的React组件中包含的样式表）插入<head>后才可见<head> 。 然后可以使用可见的<div id="__next">元素加载其余样式表。

屏幕截图

如果适用，请添加屏幕截图以帮助解释您的问题。

请参阅我们开发服务器上可见的FOUC：

fouc

请注意，它已经在我们的生产网站上消失了：

no-fouc

系统信息

  • 作业系统：Ubuntu 18.04.2
  • 浏览器：Firefox 76.0.1
  • Next.js版本：9.4.0
  • Node.js版本：12.16.1
bug needs investigation
资料来源
picture nicholaschiang
👍16

最有用的评论

生产呢？ 我仍然使用StyledComponents + Material UI体验FOUC

picture florianmatz 于 2020-08-20
👍29

所有20条评论

当我使用css模块时，我也遇到了这个问题，但是当我使用styled-jsx时，它工作正常。

avijitelu picture avijitelu 于 2020-05-18

我注意到一个类似的问题，即_app.js中的全局css处于开发模式时似乎未加载javascript。 由于可能缺少样式，这使得SSR难以测试。

robgraeber picture robgraeber 于 2020-05-21
👍4

@robgraeber我有确切的问题您要做。 CSS被编译为_app.js而不是单独的CSS文件。

derskeal picture derskeal 于 2020-05-22
👍1

这里同样的问题。
我创建了一个重现此问题的最小示例： https :

dnaranjo89 picture dnaranjo89 于 2020-05-22

有时我还会在检查器中编辑一些全局css，任何更改都会导致整个页面的css以某种方式破坏。 有没有人经历过？

robgraeber picture robgraeber 于 2020-05-22

@derskeal一种解决方法是使用此sass插件，并通过sass在布局组件中导入样式表： https :

robgraeber picture robgraeber 于 2020-05-24

@Timer我可以在此https://github.com/yanv1991/demo-react-dom ，这不是使用内置sass模块加载样式，而在生产模式下使用ssr动态加载的组件

yanv1991 picture yanv1991 于 2020-06-02
👍2

该项目无法运行：

error - Error [FirebaseError]: projectId must be a string in FirebaseApp.options
    at new FirestoreError (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:1223:28)
    at Function.Firestore.databaseIdFromApp (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:21018:19)
    at new Firestore (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:20850:42)
    at /Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22871:66
    at Component.instanceFactory (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22410:16)
    at Provider.getOrInitializeService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:228:49)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:440:39)
    at Object.serviceNamespace [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:420:45)
    at eval (webpack-internal:///./src/firebase/db.tsx:19:124)
    at Module../src/firebase/db.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:128:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31)
    at eval (webpack-internal:///./src/firebase/user.tsx:12:61)
    at Module../src/firebase/user.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:152:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31) {
  code: 'invalid-argument',
  toString: [Function]
}
Timer picture Timer 于 2020-06-22

这应该在next@^9.4.5-canary.15 ！ 请升级并告诉我们。

Timer picture Timer 于 2020-06-22
🎉6 👍6 ❤1

谢谢@Timer！ 🎉我进行了测试，此修复程序对我有效。

showell215 picture showell215 于 2020-06-22

我在开发模式和生产模式下都在自定义服务器中遇到了这种情况（逐步转换企业站点上的页面）。 ^9.4.5-canary.15为我修复了它！

jimbuck picture jimbuck 于 2020-06-30

嗨，大家好。 检查了Canary版本的问题，它以开发人员模式解决了该问题，但在生产中仍然存在。 有人遇到同样的问题吗？

在生产版本中，缺少<style data-next-hide-fouc="true">body{display:none}</style> 。

casperle picture casperle 于 2020-07-06
👍2

嗨，大家好。 检查了Canary版本的问题，它以开发人员模式解决了该问题，但在生产中仍然存在。 有人遇到同样的问题吗？

在生产版本中，缺少<style data-next-hide-fouc="true">body{display:none}</style> 。

同样，在产品或相关产品中发生不同的问题，有人知道吗？

ozthekoder picture ozthekoder 于 2020-07-17

同样，在产品或相关产品中发生不同的问题，有人知道吗？

对我来说，这个问题仅发生在开发模式下，而不是生产模式下。 因此，鉴于此，我认为产品问题可能有不同的原因。

showell215 picture showell215 于 2020-07-17

嗨，大家好。 检查了Canary版本的问题，它以开发人员模式解决了该问题，但在生产中仍然存在。 有人遇到同样的问题吗？

在生产版本中，缺少<style data-next-hide-fouc="true">body{display:none}</style> 。

有人能在生产中解决此问题吗？ Canary版本修复了我们的开发版本，但生产仍然中断。

BlakeBrown picture BlakeBrown 于 2020-07-18
👍4

那金丝雀的最新版本是吗？

jimmynames picture jimmynames 于 2020-07-30

是@jimmynames ，canary是WIP的最新版本（该术语源自矿工，他们使用金丝雀来测试有毒烟雾... Next.js的金丝雀版本可以是草图）。

nicholaschiang picture nicholaschiang 于 2020-07-31

此修复程序位于Next.js 9.5.0和9.5.1或更高版本的稳定版本上（仅适用于开发服务器）！

Timer picture Timer 于 2020-07-31
👍2

生产呢？ 我仍然使用StyledComponents + Material UI体验FOUC

florianmatz picture florianmatz 于 2020-08-20
👍29

有人为此找到任何解决方案吗？

praveen7557 picture praveen7557 于 2020-11-10
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

renatorib picture renatorib  ·  3评论
YarivGilad picture YarivGilad  ·  3评论
lixiaoyan picture lixiaoyan  ·  3评论
formula349 picture formula349  ·  3评论
ghost picture ghost  ·  3评论