Next.js: 開発サーバーにスタイルなしコンテンツのフラッシュがあります（FOUC）

作成日 2020年05月18日 · 20コメント · ソース: vercel/next.js

バグレポート

バグを説明する

バグが何であるかについての明確で簡潔な説明。

Next.jsを使用する場合、 <div id="__next">要素が最初に表示されたときに、CSSが<head>に完全にハイドレートされていないように見えます。

これにより、開発サーバーの実行時にスタイルなしコンテンツ（またはFOUC）がフラッシュされます。しかし、本番環境では問題ないようです（これは私には奇妙に思えます）。

再現するには

動作を再現する手順は、コードスニペットまたはリポジトリを提供してください。

次のコマンドを実行して、このリポジトリのクローンを作成

$ git clone https://github.com/tutorbookapp/covid-tutoring

次のコマンドを実行して、依存関係をインストールします（詳細はREADME.md ）。

$ npm i && lerna bootstrap --hoist

次のコマンドを実行して、開発サーバーを起動します。

$ npm run dev

最初にページをロードするときは、FOUCに注意してください。

予想される行動

何が起こると予想したかについての明確で簡潔な説明。

<div id="__next">要素のみが必要以上倍スタイルシートの後に見えなければならないに挿入される（上述倍可視で反応させコンポーネントが中に含まれている、すなわちスタイルシート） <head> 。残りのスタイルシートは、 <div id="__next">要素が表示された状態でロードできます。

スクリーンショット

該当する場合は、問題の説明に役立つスクリーンショットを追加してください。

開発サーバーに表示されるFOUCを参照してください。

fouc

それが私たちの生産ウェブサイトになくなっていることに注意して

no-fouc

システムインフォメーション

OS：Ubuntu 18.04.2
ブラウザ：Firefox 76.0.1
Next.jsのバージョン：9.4.0
Node.jsのバージョン：12.16.1

bug needs investigation

ソース

nicholaschiang

👍16

最も参考になるコメント

生産はどうですか？ StyledComponents + MaterialUIでFOUCをまだ経験しています

florianmatz 2020年08月20日

👍29

全てのコメント20件

cssモジュールを使用するとこの問題も発生しますが、styled-jsxを使用すると正常に動作します。

avijitelu 2020年05月18日

_app.jsのグローバルcssが、開発モードのときにjavascriptをオフにしてロードされていないように見えるという同様の問題に気づきました。スタイルが欠落している可能性があるため、SSRのテストが難しくなります。

robgraeber 2020年05月21日

👍4

@robgraeber私はあなたがしている正確な問題を抱えています。 CSSは、個別のcssファイルではなく_app.jsにコンパイルされています。

derskeal 2020年05月22日

👍1

ここで同じ問題。
この問題を再現する最小限の例を作成しました： https ：

dnaranjo89 2020年05月22日

また、インスペクターでグローバルcssを編集することもありますが、変更を加えると、ページ全体のcssが何らかの形で破壊されます。誰かがそれを経験したことがありますか？

robgraeber 2020年05月22日

@derskealの回避策は、このsassプラグインを使用し、レイアウトコンポーネントのsassを介してスタイルシートをインポートすることです： https ：

robgraeber 2020年05月24日

@Timerこのhttps://github.com/yanv1991/demo-react-domでこの問題を再現できました。これは、組み込みのsassモジュールを使用してスタイルをロードしておらず、prodモードでssrの動的にロードされたコンポーネントを使用しています

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 2020年06月22日

これはnext@^9.4.5-canary.15で修正する必要があります！アップグレードしてお知らせください。

Timer 2020年06月22日

🎉6 👍6 ❤1

@Timerに感謝します！ 🎉私はテストしました、そして修正は私のために働きます。

showell215 2020年06月22日

これは、カスタムサーバーの開発モードと本番モードの両方で発生していました（エンタープライズサイトのページを段階的に変換します）。 ^9.4.5-canary.15は私のためにそれを修正しました！

jimbuck 2020年06月30日

こんにちは、みんな。カナリアリリースの問題を確認しました。開発モードでの問題は修正されましたが、本番環境ではまだ残っています。誰かが同じ問題を経験していますか？

本番ビルドでは、 <style data-next-hide-fouc="true">body{display:none}</style>が欠落しています。

casperle 2020年07月06日

👍2

こんにちは、みんな。カナリアリリースの問題を確認しました。開発モードでの問題は修正されましたが、本番環境ではまだ残っています。誰かが同じ問題を経験していますか？
本番ビルドでは、 <style data-next-hide-fouc="true">body{display:none}</style>が欠落しています。

ここでも同じですが、これは製品または関連で発生した場合の別の問題ですか、誰か知っていますか？

ozthekoder 2020年07月17日

ここでも同じですが、これは製品または関連で発生した場合の別の問題ですか、誰か知っていますか？

私にとって、この問題は本番モードではなく、開発モードでのみ発生していました。したがって、prodの問題には別の原因がある可能性があると思います。

showell215 2020年07月17日

こんにちは、みんな。カナリアリリースの問題を確認しました。開発モードでの問題は修正されましたが、本番環境ではまだ残っています。誰かが同じ問題を経験していますか？
本番ビルドでは、 <style data-next-hide-fouc="true">body{display:none}</style>が欠落しています。

誰かがこれを本番環境で修正できましたか？ Canaryリリースで開発ビルドが修正されましたが、本番環境はまだ壊れています。

BlakeBrown 2020年07月18日

👍4

では、カナリアの最新バージョンは次ですか？

jimmynames 2020年07月30日

はい@jimmynames 、カナリアはWIPの最新バージョンです（この用語は、カナリア鳥を使用して有毒ガスをテストする鉱夫に由来します。..Next.jsのカナリアバージョンはスケッチである可能性があります）。

nicholaschiang 2020年07月31日

この修正は、Next.js 9.5.0および9.5.1以降の安定版リリース（開発サーバーにのみ適用）にあります。

Timer 2020年07月31日

👍2

生産はどうですか？ StyledComponents + MaterialUIでFOUCをまだ経験しています

florianmatz 2020年08月20日

👍29

誰かがこれに対する解決策を見つけましたか？

praveen7557 2020年11月10日

このページは役に立ちましたか？

0 / 5 - 0 評価