Next.js: विकास सर्वर में अस्थिर सामग्री (FOUC) का फ्लैश है

को निर्मित 18 मई 2020 · 20टिप्पणियाँ · स्रोत: vercel/next.js

बग रिपोर्ट

बग का वर्णन करें

बग क्या है इसका एक स्पष्ट और संक्षिप्त विवरण।

Next.js का उपयोग करते समय, ऐसा प्रतीत होता है कि CSS <head> में पूरी तरह से हाइड्रेटेड नहीं है जब <div id="__next"> तत्व पहले दिखाई देते हैं।

यह हमारे विकास सर्वर को चलाते समय अस्थिर सामग्री (या 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: उबंटू 18.04.2
ब्राउज़र: फ़ायरफ़ॉक्स 76.0.1
Next.js का संस्करण: 9.4.0
Node.js का संस्करण: 12.16.1

bug needs investigation

स्रोत

nicholaschiang

👍16

सबसे उपयोगी टिप्पणी

उत्पादन के बारे में क्या? मैं अभी भी स्टाइलब्लकॉमर्स + मटेरियल यूआई के साथ एफओयूसी का अनुभव कर रहा हूं

florianmatz 20 अग॰ 2020

👍29

सभी 20 टिप्पणियाँ

मुझे इस समस्या का सामना करना पड़ रहा है जब मैं सीएसएस मॉड्यूल का उपयोग करता हूं लेकिन जब मैं स्टाइल-जेडएक्स का उपयोग करता हूं तो यह ठीक काम करता है।

avijitelu 18 मई 2020

मैं एक समान मुद्दे को देखता हूं कि _app.js में वैश्विक सीएसएस जावास्क्रिप्ट से लोड नहीं लगता है जबकि यह देव मोड में है। यह SSR को परीक्षण करने के लिए कठिन बनाता है क्योंकि लापता शैली हो सकती है।

robgraeber 21 मई 2020

👍4

@robgraeber मेरे पास सटीक मुद्दा है जो आप करते हैं। CSS को एक अलग css फ़ाइल के बजाय _app.js में संकलित किया जा रहा है।

derskeal 22 मई 2020

👍1

एक ही मुद्दा यहाँ।
मैंने इस मुद्दे को पुन: प्रस्तुत करने वाला एक न्यूनतम उदाहरण बनाया है: https://github.com/dnaranjo89/next-css-ssr

dnaranjo89 22 मई 2020

इसके अलावा कभी-कभी मैं इंस्पेक्टर में कुछ वैश्विक सीएसएस संपादित करता हूं और किसी भी बदलाव के कारण पूरे पृष्ठ की सीएसएस किसी भी तरह बर्बाद हो जाती है। क्या किसी ने ऐसा अनुभव किया है?

robgraeber 22 मई 2020

@derskeal इस सैस प्लगइन का उपयोग करने और अपने लेआउट घटक में sass के माध्यम से अपनी स्टाइलशीट आयात करने के लिए है: https://github.com/giuseppeg/styled-jsx-plugin-sass

robgraeber 24 मई 2020

@Timer मैं में इस समस्या को पुन: पेश कर सकता इस रेपो https://github.com/yanv1991/demo-react-dom , इस शैली लोड नहीं है prod मोड में एसएसआर के लिए एक गतिशील लोड घटक के साथ सास मॉड्यूल में बनाया का उपयोग

yanv1991 2 जून 2020

👍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 22 जून 2020

यह next@^9.4.5-canary.15 में तय किया जाना चाहिए! कृपया अपग्रेड करें और हमें बताएं।

Timer 22 जून 2020

🎉6 👍6 ❤1

धन्यवाद @ तैमूर! 🎉 मैंने परीक्षण किया और मेरे लिए ठीक काम करता है।

showell215 22 जून 2020

मैं यह एक कस्टम सर्वर (एंटरप्राइज़ साइट पर आकस्मिक रूप से परिवर्तित पृष्ठ) में देव मोड और उत्पादन मोड दोनों में अनुभव कर रहा था। ^9.4.5-canary.15 ने मेरे लिए इसे तय किया!

jimbuck 30 जून 2020

हाय दोस्तों। कैनरी रिलीज के साथ समस्या की जाँच की, यह देव मोड में समस्या को ठीक करता है लेकिन उत्पादन में यह अभी भी बना हुआ है। क्या कोई एक ही मुद्दे का अनुभव करता है?

उत्पादन के निर्माण में <style data-next-hide-fouc="true">body{display:none}</style> गायब है।

casperle 6 जुल॰ 2020

👍2

हाय दोस्तों। कैनरी रिलीज के साथ समस्या की जाँच की, यह देव मोड में समस्या को ठीक करता है लेकिन उत्पादन में यह अभी भी बना हुआ है। क्या कोई एक ही मुद्दे का अनुभव करता है?
उत्पादन के निर्माण में <style data-next-hide-fouc="true">body{display:none}</style> गायब है।

यहाँ भी, क्या यह एक अलग मुद्दा है जब यह उत्पादों या संबंधित में होता है, क्या कोई जानता है?

ozthekoder 17 जुल॰ 2020

यहाँ भी, क्या यह एक अलग मुद्दा है जब यह उत्पादों या संबंधित में होता है, क्या कोई जानता है?

मेरे लिए यह मुद्दा केवल देव विधा में घटित हो रहा था, न कि उत्पादन विधा में। तो यह देखते हुए, मुझे लगता है कि ठेस का मुद्दा एक अलग कारण हो सकता है।

showell215 17 जुल॰ 2020

हाय दोस्तों। कैनरी रिलीज के साथ समस्या की जाँच की, यह देव मोड में समस्या को ठीक करता है लेकिन उत्पादन में यह अभी भी बना हुआ है। क्या कोई एक ही मुद्दे का अनुभव करता है?
उत्पादन के निर्माण में <style data-next-hide-fouc="true">body{display:none}</style> गायब है।

क्या कोई इसे उत्पादन में ठीक करने में सक्षम था? कैनरी रिलीज ने हमारे देव निर्माण को तय किया, लेकिन उत्पादन अभी भी टूटा हुआ है।

BlakeBrown 18 जुल॰ 2020

👍4

तो कैनरी अगले का नवीनतम संस्करण है?

jimmynames 30 जुल॰ 2020

हाँ @jimmynames , कैनरी WIP नवीनतम संस्करण है (शब्द जहरीले धुएं के परीक्षण के लिए कैनरी पक्षियों का उपयोग करके खनिकों से उत्पन्न हुआ ... Next.js का कैनरी संस्करण स्केच हो सकता है)।

nicholaschiang 31 जुल॰ 2020

यह फिक्स Next.js 9.5.0 और 9.5.1 के स्थिर रिलीज पर है, या नया (केवल विकास सर्वर पर लागू होता है)!

Timer 31 जुल॰ 2020

👍2

florianmatz 20 अग॰ 2020

👍29

क्या किसी ने इसके लिए कोई समाधान खोजा?

praveen7557 10 नव॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स