Next.js: يحتوي خادم التطوير على وميض من المحتوى غير المصمم (FOUC)

تم إنشاؤها على ١٨ مايو ٢٠٢٠  ·  20تعليقات  ·  مصدر: vercel/next.js

تقرير الشوائب

وصف الخطأ

وصف واضح وموجز لماهية الخطأ.

عند استخدام Next.js ، يبدو أن CSS لم يتم ترطيبه بالكامل في <head> عندما يصبح العنصر <div id="__next"> مرئيًا لأول مرة.

يتسبب هذا في وميض محتوى غير منظم (أو 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> . يمكن بعد ذلك تحميل أوراق الأنماط المتبقية مع إظهار العنصر <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

التعليق الأكثر فائدة

ماذا عن الإنتاج؟ ما زلت أواجه FOUC مع StyledComponents + Material UI

picture florianmatz في ٢٠ أغسطس ٢٠٢٠
👍29

ال 20 كومينتر

أواجه هذه المشكلة أيضًا عندما أستخدم وحدات css ، لكن عندما أستخدم style-jsx ، فإنها تعمل بشكل جيد.

avijitelu picture avijitelu في ١٨ مايو ٢٠٢٠

لقد لاحظت مشكلة مماثلة تتمثل في عدم تحميل ملف css العام في _app.js مع إيقاف تشغيل جافا سكريبت أثناء وجوده في وضع التطوير. يجعل اختبار SSR أكثر صعوبة نظرًا لاحتمال وجود أنماط مفقودة.

robgraeber picture robgraeber في ٢١ مايو ٢٠٢٠
👍4

robgraeber لديّ المشكلة بالضبط. يتم تجميع CSS في _app.js بدلاً من ملف css منفصل.

derskeal picture derskeal في ٢٢ مايو ٢٠٢٠
👍1

نفس المشكلة هنا.
لقد قمت بإنشاء مثال أدنى لإعادة إنتاج هذه المشكلة: https://github.com/dnaranjo89/next-css-ssr

dnaranjo89 picture dnaranjo89 في ٢٢ مايو ٢٠٢٠

أحيانًا أيضًا سأقوم بتحرير بعض ملفات css العالمية في المفتش وأي تغيير يتسبب في إتلاف css للصفحة بالكامل بطريقة ما. هل جرب أحد ذلك؟

robgraeber picture robgraeber في ٢٢ مايو ٢٠٢٠

derskeal الحل البديل هو استخدام هذا المكون الإضافي sass واستيراد أوراق الأنماط الخاصة بك عبر sass في مكون Layout الخاص بك: https://github.com/giuseppeg/styled-jsx-plugin-sass

robgraeber picture robgraeber في ٢٤ مايو ٢٠٢٠

Timer يمكنني إعادة إنتاج هذه المشكلة في هذا الريبو https://github.com/yanv1991/demo-react-dom ، هذا لا يتم تحميل الأنماط باستخدام وحدات sass المدمجة مع مكون ديناميكي محمل لـ ssr في وضع prod

yanv1991 picture yanv1991 في ٢ يونيو ٢٠٢٠
👍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 في ٢٢ يونيو ٢٠٢٠

يجب إصلاح هذا في next@^9.4.5-canary.15 ! يرجى الترقية وإخبارنا.

Timer picture Timer في ٢٢ يونيو ٢٠٢٠
🎉6 👍6 ❤1

شكراTimer! 🎉 لقد اختبرت ويعمل الإصلاح بالنسبة لي.

showell215 picture showell215 في ٢٢ يونيو ٢٠٢٠

كنت أعاني من ذلك في كل من وضع التطوير ووضع الإنتاج في خادم مخصص (يتم تحويل الصفحات بشكل تدريجي على موقع المؤسسة). ^9.4.5-canary.15 أصلحه لي!

jimbuck picture jimbuck في ٣٠ يونيو ٢٠٢٠

اهلا ياجماعة. تحقق من مشكلة إصدار canary ، وهو يعمل على إصلاح المشكلة في وضع dev ولكن لا يزال قائماً في الإنتاج. هل هناك شخص ما يواجه نفس المشكلة؟

في بنية الإنتاج هناك مفقود <style data-next-hide-fouc="true">body{display:none}</style> .

casperle picture casperle في ٦ يوليو ٢٠٢٠
👍2

اهلا ياجماعة. تحقق من مشكلة إصدار canary ، وهو يعمل على إصلاح المشكلة في وضع dev ولكن لا يزال قائماً في الإنتاج. هل هناك شخص ما يواجه نفس المشكلة؟

في بنية الإنتاج هناك مفقود <style data-next-hide-fouc="true">body{display:none}</style> .

نفس الشيء هنا ، هل هذه مشكلة مختلفة عندما تحدث في هاج أو ذات صلة ، هل يعرف أي شخص؟

ozthekoder picture ozthekoder في ١٧ يوليو ٢٠٢٠

نفس الشيء هنا ، هل هذه مشكلة مختلفة عندما تحدث في هاج أو ذات صلة ، هل يعرف أي شخص؟

بالنسبة لي ، كانت هذه المشكلة تحدث فقط في وضع التطوير ، وليس في وضع الإنتاج. نظرًا لذلك ، أفترض أن مشكلة المنتج قد يكون لها سبب مختلف.

showell215 picture showell215 في ١٧ يوليو ٢٠٢٠

اهلا ياجماعة. تحقق من مشكلة إصدار canary ، وهو يعمل على إصلاح المشكلة في وضع dev ولكن لا يزال قائماً في الإنتاج. هل هناك شخص ما يواجه نفس المشكلة؟

في بنية الإنتاج هناك مفقود <style data-next-hide-fouc="true">body{display:none}</style> .

هل كان أي شخص قادرًا على إصلاح هذا في الإنتاج؟ قام إصدار Canary بإصلاح بنية التطوير الخاصة بنا ، ولكن لا يزال الإنتاج معطلاً

BlakeBrown picture BlakeBrown في ١٨ يوليو ٢٠٢٠
👍4

إذن هل الكناري أحدث إصدار من التالي بعد ذلك؟

jimmynames picture jimmynames في ٣٠ يوليو ٢٠٢٠

نعم jimmynames ، canary هو أحدث إصدار من العمل قيد التقدم (نشأ المصطلح من عمال المناجم الذين يستخدمون طيور الكناري لاختبار الأبخرة السامة ... يمكن أن يكون إصدار الكناري من Next.js رسمًا)

nicholaschiang picture nicholaschiang في ٣١ يوليو ٢٠٢٠

هذا الإصلاح موجود في الإصدار الثابت من Next.js 9.5.0 و 9.5.1 أو أحدث (ينطبق على خادم التطوير فقط)!

Timer picture Timer في ٣١ يوليو ٢٠٢٠
👍2

ماذا عن الإنتاج؟ ما زلت أواجه FOUC مع StyledComponents + Material UI

florianmatz picture florianmatz في ٢٠ أغسطس ٢٠٢٠
👍29

هل وجد أي شخص أي حل لهذا؟

praveen7557 picture praveen7557 في ١٠ نوفمبر ٢٠٢٠
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

jesselee34 picture jesselee34  ·  3تعليقات
wagerfield picture wagerfield  ·  3تعليقات
irrigator picture irrigator  ·  3تعليقات
YarivGilad picture YarivGilad  ·  3تعليقات
swrdfish picture swrdfish  ·  3تعليقات