Next.js: एचएमआर अक्षम करें

HMR हमेशा देव मोड में समर्थित होता है। इसे बंद करने का कोई आधिकारिक तरीका नहीं है।
अल्पावधि में ऐसा करने की हमारी कोई योजना नहीं है।

क्या इससे सर्वर पर लोड नहीं होगा, हमें उत्पादन में चलने के लिए एचएमआर को बंद करने का एक तरीका चाहिए।

यह उत्पादन में बंद है। सुनिश्चित करें कि आप next build और next start या next build और NODE_ENV=production node server.js उत्पादन में चल रहे हैं।

लेआउट पर काम करते समय HMR को बंद करना उपयोगी हो सकता है। मैं styled-components और कुछ वैश्विक सीएसएस शैलियों का संपादन कर रहा हूं, लेकिन पूर्वावलोकन बहुत जल्द टूट जाता है। इसका कारण यह है कि पेज को SSR-रेंडर की गई शैलियों और हाल ही में जेनरेट की गई शैलियों का मिश्रण मिलता है। ऐसा लगता है कि एचएमआर को बंद करने के अलावा इसे दूर करने का कोई रास्ता नहीं है।

एचएमआर के अलावा अभी भी केवल ईएस 5 के

यहां तक ​​​​कि एक हैकी समाधान की भी सराहना की जाएगी। यह एक बुरे सपने में बदल रहा है।

मुझे विश्वास है कि मुझे संबंधित समस्या का सामना करना पड़ रहा है। वर्तमान में एक Next.js पृष्ठ में प्रतिक्रिया-मार्ग बिंदु का उपयोग करने का प्रयास कर रहा है। वेपॉइंट इवेंट हैंडलर के भीतर से this.setState को कॉल करते समय मुझे Maximum call stack size exceeded त्रुटि मिल रही है। यह केवल देव मोड में Next.js चलाते समय होता है। अगर मैं npm run build और npm start समस्या उत्पन्न नहीं होती है।

शायद इस मुद्दे से संबंधित?

किसी भी तरह से हम इस मुद्दे को फिर से खोल सकते हैं। एचएमआर कई स्थितियों में बहुत कष्टप्रद हो सकता है। यदि यह प्राथमिकता नहीं है, तो क्या आप कुछ जानकारी प्रदान कर सकते हैं कि उस कोड को कहां खोजें (इसे मैन्युअल रूप से अक्षम करने के लिए) और/या पीआर @arunoda बनाएं

अभी हम अपोलो ग्राफक्यूएल + नेक्स्ट जेएस (5.0.0) के साथ बड़ी समस्याओं का सामना कर रहे हैं। getDataFromTree बस काम नहीं करता है और यह हमारे सेटअप में कई चीजें तोड़ता है :(

@timneutkens , @arunoda , क्या आप इसे फिर से खोल सकते हैं?

और वैसे https://github.com/zeit/next.js/issues/1938#issuecomment -358195616

shouldComponentUpdate के साथ एक समस्या की तरह दिखता है। जानना महत्वपूर्ण बात यह है कि देव मोड में हॉट रीलोडिंग कार्यक्षमता
मैं कहूंगा कि स्थानीय रूप से उत्पादन मोड में चलाएं और अपने कार्यों में कुछ लॉगिंग जोड़ें।

यह एक प्रमुख बात की तरह लगता है

कभी-कभी मैं बिना आवश्यक संदेश शोर के साथ देव उपकरण नेटवर्क टैब को अव्यवस्थित करने से बचने के लिए एचएमआर को देव मोड में अक्षम करना चाहता हूं।

"ऑन-डिमांड-एंट्री-पिंग?पेज=/xxx", आदि

पृष्ठ को पुनः लोड करने के लिए CMD-R को दबाना कोई बड़ी समस्या नहीं है, प्रोड मोड में अपडेट प्राप्त करने के लिए सर्वर को पुनरारंभ करना एक दर्द है।

वर्कअराउंड के रूप में, आप क्रोम देव टूल्स "रिक्वेस्ट ब्लॉकिंग" फीचर के साथ एचएमआर अनुरोधों को रोक सकते हैं

@vanmik ग्रेट टिप, धन्यवाद! मैं

क्रोम में अनुरोध अवरुद्ध करने के लिए (कम से कम 66) आपको निम्न की आवश्यकता हो सकती है:

'कस्टमाइज़ और नियंत्रण DevTools' खोलें (तीन लंबवत बिंदु) > More tools > Request Blocking । यह रिक्वेस्ट ब्लॉकिंग कंसोल को खोलेगा जहां आप ब्लॉक करने के लिए रिक्वेस्ट सोर्स को चेक कर सकते हैं, जैसा कि @vanmik के स्क्रीन शॉट में दिखाया गया है।

उल्लेख करना चाहते हैं कि आप इसके साथ देव उपकरण तक ही सीमित नहीं हैं। अनुरोधों को अवरुद्ध करने के लिए आप ब्राउज़र प्लगइन का उपयोग कर सकते हैं। इस मामले में आपको केवल उसके लिए देव उपकरण को हर बार खोलने की आवश्यकता नहीं है।

लेकिन मुझे उम्मीद है कि भविष्य में हमें कुछ आसान मिलेगा:

// next.config.js
module.exports = {
  hmr: false
}

एचआरएम बेकार है। यह लाभ की तुलना में अधिक बार कठिनाइयाँ लाता है (उदाहरण के लिए जब कोड के कुछ हिस्से हॉट-रीलोड हो जाते हैं जबकि कुछ नहीं जो असंगत स्थिति का कारण बनते हैं)।

जबकि @vanmik की टिप वास्तविक http://localhost:3000/_next/on-demand-entries-ping?page=/xxx प्रविष्टियों के साथ बंद है, केवल अब वे त्रुटियां हैं।

डिबगिंग के लिए स्वीकार्य नहीं:-/

ज़रूर पसंद करेंगे

// next.config.js
module.exports = {
  hmr: false
}

शायद कोई इसके लिए प्लगइन लिख सकता है ???

@gihrig आप इन त्रुटियों को कंसोल संदर्भ मेनू (त्रुटि पर

@arunoda इस पर कोई प्रगति? मुझे एचएमआर और अपरिवर्तनीय प्रोपटाइप के साथ कोई समस्या है - सुपर निराशाजनक। देखें: https://github.com/facebook/prop-types/issues/221

इसके लिए मेरा समाधान request blocking को सक्षम करना और फिर अवरुद्ध अनुरोधों की सूची में on-demand-entries-ping अनुरोध जोड़ना था। आशा है कि यह उन लोगों की मदद करता है जो एचएमआर को उतना ही नापसंद करते हैं जितना मैं करता हूं।

Next.js v7+ में हॉट मॉड्यूल रीलोडिंग (HMR) को अक्षम करने के लिए, इसे अपनी next.config.js फ़ाइल में जोड़ें:

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = config.watchOptions || {};
    config.watchOptions.ignored = [
      // Don't watch _any_ files for changes
      /.*/,
    ];
    return config;
  },
};

यह परिवर्तन पर पुनर्निर्माण को अक्षम कर देगा, जो बदले में ब्राउज़र को किसी भी परिवर्तन को कभी भी "देखने" नहीं देगा, और इसलिए कुछ भी पुनः लोड नहीं करेगा। इसका मतलब है कि Next.js परिवर्तनों पर पुन: संकलित

एक समाधान के लिए जो प्रत्येक परिवर्तन पर पूरे पृष्ठ को पुनः लोड करने के लिए बाध्य करता है, नीचे यह टिप्पणी देखें ।

FWIW का जल्द ही विलय: https://github.com/zeit/next.js/pull/4508

एक समाधान के लिए जो हमेशा परिवर्तनों पर पृष्ठ को पुनः लोड करेगा, आप एक server.js बना सकते

const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {

  // ℹ️ Below is the magic which forces a page reload on every change
  // ℹ️ From https://github.com/zeit/next.js/issues/1109#issuecomment-446841487

  // The publish function tells the client when there's a change that should be hot reloaded
  const publish = app.hotReloader.webpackHotMiddleware.publish.bind(
    app.hotReloader.webpackHotMiddleware,
  );

  // Intercept publish events so we can send something custom
  app.hotReloader.webpackHotMiddleware.publish = (event, ...rest) => {
    let forwardedEvent = event;

    // upgrade from a "change" to a "reload" event to trick the browser into reloading
    if (event.action === 'change') {
      forwardedEvent = {
        action: 'reload',
        // Only `/_document` pages will trigger a full browser refresh, so we force it here.
        data: ['/_document'],
      };
    }

    // Forward the (original or upgraded) event on to the browser
    publish(forwardedEvent, ...rest);
  };
  // ℹ️ End force page reload on change

  // ... Whatever custom server setup you have. See: https://github.com/zeit/next.js/#custom-server-and-routing
});

मुझे 80% यकीन है कि यह भविष्य में टूट जाएगा।

यह एक भयानक हैक है, लेकिन जिस तरह से मैं एक बग के आसपास काम करने में सक्षम था, जिसके कारण ब्राउज़र टैब> १००% सीपीयू का उपभोग करेगा, फिर हर गर्म पुनः लोड पर क्रोम में क्रैश हो जाएगा।

उम्मीद है कि जब तक हैक टूटेगा, तब तक कोई आधिकारिक समाधान हो जाएगा या इस मुद्दे में उल्लिखित बगों को ठीक कर दिया जाएगा

HMR को अक्षम करने का कारण यह है कि जब आप इसमें टाइप करते हैं तो DevTools/Applications/Cookies (Chrome Windows) पैनल फोकस खो देता है क्योंकि HMR अपडेट बैकग्राउंड में होते रहते हैं। मुझे संदेह है कि यह मामला होगा भले ही मैंने webpackDevServer को सभी फाइलों को अनदेखा करने के लिए कहा। वेबसोकेट कनेक्शन अभी भी पृष्ठभूमि में बनाया जाएगा और मेरा मानना ​​​​है कि यह कनेक्शन है जो कुकीज़ पैनल को तोड़ रहा है।

बिंदु जा रहा है: एक आदर्श समाधान को एचएमआर को पूरी तरह से अक्षम करना चाहिए। धन्यवाद!

यह दुर्भाग्यपूर्ण है कि आप इसे केवल अपने next.config.js नहीं जोड़ सकते

module.exports = {
  webpackDevMiddleware: config => {
    config.lazy = true;
    return config;
  },
};

यह विकल्प मॉड्यूल को 'आलसी' मोड में संचालित करने के लिए निर्देश देता है, जिसका अर्थ है कि यह फ़ाइलों के बदलने पर पुन: संकलित नहीं होगा, बल्कि प्रत्येक अनुरोध पर होगा। ऐसा लगता है कि हम में से बहुत से लोग @jesstelford के समाधान के बिना जाने की उम्मीद कर रहे हैं।

स्रोत : https://github.com/webpack/webpack-dev-middleware#lazy

जब मैं इसे next 7.0.2 हूं, तो मुझे निम्न त्रुटि मिलती है:

आज एक क्रिएट रिएक्ट ऐप प्रोजेक्ट के साथ काम करने का अवसर मिला।

मुझे लगता है कि इस एचएमआर समस्या की जड़ यह नहीं है कि एचएमआर उतना ही बुरा है जिस तरह से इसे लागू किया गया है।

सीधे शब्दों में कहें, क्लाइंट को समय-समय पर सर्वर पर मतदान करना आदर्श से कम है।

सरसरी तौर पर देखने से ऐसा प्रतीत होता है कि सीआरए एक सॉकेट कनेक्शन का उपयोग करता है जो केवल क्लाइंट से संचार करता है जब कोई फ़ाइल बदल जाती है, तब क्लाइंट पृष्ठ को पुनः लोड करता है। इस योजना के परिणामस्वरूप तेज़ ब्राउज़र रीफ़्रेश भी होता है क्योंकि ऑपरेशन अगले मतदान अंतराल पर निर्भर नहीं है।

सीआरए खुला स्रोत है । यह बहुत अच्छा होगा अगर समय और रुचि वाला कोई व्यक्ति सीआरए मॉडल का पालन करने के लिए नेक्स्ट के एचएमआर को अपग्रेड करने में खुदाई कर सकता है (और इसे आसानी से अक्षम भी कर सकता है, निश्चित रूप से :-)

@gihrig शायद कुछ अलग कारण हैं कि लोग

मेरी समझ यह है कि प्रतिक्रिया-गर्म-लोडर को आपके आवेदन को कैसे लिखा जाता है, राज्य कैसे मॉडलिंग किया जाता है, और महत्वपूर्ण वस्तु पहचान की अनुपस्थिति के बारे में कुछ धारणाओं की आवश्यकता होती है। ये धारणाएं आम तौर पर एक सही ढंग से लिखे गए रेडक्स-आधारित ऐप के लिए होती हैं, लेकिन उन ऐप्स के लिए नहीं हो सकती हैं जिन्हें अन्य तरीकों का उपयोग करके डिज़ाइन किया गया है। मैं मानता हूं कि मुद्दा यह नहीं है कि एचएमआर बुरा है - यह सिर्फ इतना है कि यह एक सामान्य उपकरण नहीं है। यह एक ढांचे के संदर्भ में कुछ असंगति पैदा करता है जो अन्यथा इन डिजाइन निर्णयों के बारे में अज्ञेयवादी है।

मतदान से वेबसोकेट पर स्विच करना शायद एक अच्छा विचार है, लेकिन मतदान "समस्या की जड़" नहीं है, या इसके बजाय यह कम से कम उन कुछ समस्याओं से संबंधित नहीं है जिनमें लोगों ने भाग लिया है।

ध्यान दें कि अंतिम 2 टिप्पणियाँ दोनों गलत धारणाएँ बनाती हैं:

• Next.js प्रतिक्रिया-हॉट-लोडर का उपयोग नहीं करता है, यह एक परिवर्तन उत्सर्जित होने पर घटक पेड़ को फिर से प्रस्तुत करता है
• Next.js परिवर्तन प्राप्त करने के लिए मतदान नहीं करता है, यह चिह्नित करने के लिए मतदान करता है कि कौन से पृष्ठ अभी भी देखे जा रहे हैं, कैनरी पर इसे एक वेबसोकेट में बदल दिया गया है ताकि उपयोगकर्ता अपने devtools में मतदान नहीं देख सके। इस पर और विस्तार करने के लिए HMR एक इवेंट सोर्स कनेक्शन का उपयोग करके काम करता है, जिसका अर्थ है कि सर्वर ब्राउज़र को ईवेंट (फ़ाइल परिवर्तन पर) भेजता है

@timneutkens यह सुनकर बहुत अच्छा लगा, धन्यवाद। यह गलत धारणा नहीं थी, हालांकि, यह पुरानी जानकारी थी। आरएचएल उपयोग में था जब हमने नेक्स्ट का उपयोग करना शुरू किया और यह हमारे सामने आने वाली समस्याओं का कारण था जिसने मुझे मूल रूप से इस धागे में टिप्पणी करने के लिए प्रेरित किया। हालांकि, कुछ समय में नेक्स्ट का उपयोग करते समय मैंने एचएमआर से संबंधित कोई समस्या नहीं देखी है।

वास्तव में, अब हम अपने ES2017 बिल्ड को देव में चलाने में सक्षम हैं!

लोगों द्वारा एचएमआर के बारे में शिकायत करने के 2 साल बाद भी इसे निष्क्रिय करने का कोई आधिकारिक तरीका नहीं है? !!

मेरे NON next.js ऐप पर यह लॉगगिन GET /_next/on-demand-entries-ping?page=/ क्यों है?

- स्व-समाधान: लॉगर ऐप पर टिप्पणी करना था। उपयोग। (मॉर्गन (देव)) अजीब बात यह है कि मॉर्गन एक अलग ऐप पर स्थापित है जिसमें कोई अगला नहीं है। मॉर्गन, मैं जानना चाहता हूं कि ऐसा क्यों हो रहा है। किसी भिन्न प्रोजेक्ट पर next.js स्थापित करने से पहले ऐसा नहीं हो रहा था।

कृपया फिर से खोलें समस्या निश्चित रूप से हल नहीं हुई है।

+1