Next.js: HMRを無効にする

HMRは常に開発モードでサポートされます。 それをオフにする公式の方法はありません。
短期的に行う予定はありません。

これによりサーバーに負荷がかかることはありません。本番環境で実行するには、HMRをオフにする方法が必要です。

本番環境ではオフです。 next buildとnext startまたはnext buildとNODE_ENV=production node server.jsを本番環境で実行していることを確認してください。

HMRをオフにすると、レイアウトで作業するときに役立ちます。 styled-componentsといくつかのグローバルCSSスタイルを編集していますが、プレビューがすぐに壊れてしまいます。 その理由は、ページにSSRでレンダリングされたスタイルと生成されたばかりのスタイルが混在しているためです。 HMRをオフにする以外に、これを克服する方法はないようです。

HMRはまだES5とのみ互換性があることに加えて（誰もがクラスをトランスパイルする必要がなくなったわけではありません）、開発中にのみ発生する不気味なHMR関連のバグに定期的に遭遇しています。 私はそれを無効にする方法が本当に欲しいです。

ハッキーな解決策でさえいただければ幸いです。 それは悪夢に変わりつつあります。

関連する問題が発生していると思います。 現在、Next.jsページでreact-waypointを使用しようとしています。 Waypointイベントハンドラー内からthis.setStateを呼び出すと、 Maximum call stack size exceededエラーが発生します。 これは、Next.jsを開発モードで実行している場合にのみ発生します。 npm run buildとnpm start 、問題は発生しません。

たぶんこの問題に関連し

とにかく、この問題を再開することができます。 HMRは、複数の状況で非常に煩わしい場合があります。 これが優先事項でない場合は、そのコードを見つける場所（手動で無効にするため）に関する情報を提供したり、PR @ arunodaを作成したりできますか

現在、Apollo GraphQL + Next JS（5.0.0）で大きな問題が発生しています。 getDataFromTreeが機能せず、これによりセットアップの多くの問題が発生します:(

@ timneutkens 、 @ arunoda 、これを再開できますか？

ちなみにhttps://github.com/zeit/next.js/issues/1938#issuecomment-358195616

shouldComponentUpdateの問題のよう開発モード制限のため、これらの関数は呼び出されないということです。
ローカルで本番モードで実行し、関数にログを追加すると思います。

これは大きなことのようです

必要のないメッセージノイズで開発ツールのネットワークタブが乱雑にならないようにするために、開発モードでHMRを無効にしたい場合があります。

「on-demand-entries-ping？page = / xxx」など

CMD-Rを押してページをリロードすることは大きな問題ではありません。サーバーを再起動してprodモードで更新を取得するのは面倒です。

回避策として、Chrome開発ツールの「リクエストブロック」機能を使用してhmrリクエストを防ぐことができます

@vanmikすばらしいヒント、ありがとう！ ✨

Chrome（少なくとも66）でリクエストのブロックを見つけるには、次のことが必要になる場合があります。

「DevToolsのカスタマイズと制御」（3つの縦のドット）> More tools > Request Blocking開きます。 これにより、 @ vanmikのスクリーンショットに示すように、ブロックするリクエストソースを確認できるリクエストブロックコンソールが開きます。

それを備えた開発ツールに限定されないことを述べたいと思います。 ブラウザプラグインを使用してリクエストをブロックできます。 この場合、そのためだけに開発ツールを毎回開いたままにしておく必要はありません。

しかし、将来的には、次のような単純なものが得られることを願っています。

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

HRMは最悪だ。 メリットよりも困難が頻繁に発生します（たとえば、コードの一部がホットリロードされ、一部がホットリロードされない場合、一貫性のない状態が発生します）。

@vanmikのヒントは実際のHMR操作を停止しますが、私のhttp://localhost:3000/_next/on-demand-entries-ping?page=/xxxエントリで雑然としていて、今だけエラーになっています。

デバッグには使用できません：-/

確かに持っていたいです

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

多分誰かがこれのためのプラグインを書くことができますか？

@gihrigコンソールのコンテキストメニューでこれらのエラーをフィルタリングできます（エラーを右クリックします）。

@arunodaこれについて何か進展はありますか？ HMRとimmutablejsのプロパティタイプに問題があります-非常にイライラします。 参照： https ：

それに対する私の回避策は、 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はこれをすぐにマージします： //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％確信しています。

これは恐ろしいハックですが、ブラウザタブが100％を超えるCPUを消費し、ホットリロードのたびにChromeでクラッシュするバグを回避する唯一の方法です。

うまくいけば、ハックが壊れるまでに、公式の解決策があるか、この問題で言及されているバグが修正されるでしょう👍

HMRを無効にしたい理由は、HMRの更新がバックグラウンドで行われ続けるため、入力時にDevTools / Applications / Cookies（Chrome Windows）パネルのフォーカスが失われるためです。 webpackDevServerにすべてのファイルを無視するように指示したとしても、これが当てはまると思います。 WebSocket接続は引き続きバックグラウンドで行われ、Cookieパネルをスラッシングしているのはこの接続であると私は信じています。

要点：理想的なソリューションでは、HMRを完全に無効にする必要があります。 ありがとう！

残念ながら、これをnext.config.js追加することはできません。

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

このオプションは、モジュールに「レイジー」モードで動作するように指示します。つまり、ファイルが変更されたときに再コンパイルされるのではなく、要求ごとに再コンパイルされます。 @jesstelfordのソリューションまで行かなくても、私たちの多くが望んでいることのように

ソース： https ：

next 7.0.2でこれを試してみると、次のエラーが発生します。

今日、Create ReactAppプロジェクトで作業する機会がありました。

このHMRの問題の根本は、HMRが実装されている方法ほど悪であるということではないと思います。

簡単に言えば、クライアントがサーバーを定期的にポーリングすることは理想的とは言えません。

ざっと観察すると、CRAは、ファイルが変更されたときにのみクライアントと通信するソケット接続を使用しているように見えます。その後、クライアントはページをリロードします。 このスキームでは、操作が次のポーリング間隔に依存しないため、ブラウザーの更新も高速になります。

CRAはオープンソースです。 時間と関心のある人がNextのHMRをアップグレードしてCRAモデルに従うことができれば素晴らしいと思います（もちろん、簡単に無効にすることもできます:-)

@gihrig人々がHMRを無効にしようとしている理由はおそらくいくつかあります。

私の理解では、react-hot-loaderには、アプリケーションの作成方法、状態のモデル化方法、および重要なオブジェクトIDの欠如について保持するための特定の仮定が必要です。 これらの仮定は通常、正しく記述されたreduxベースのアプリには当てはまりますが、他のアプローチを使用して設計されたアプリには当てはまらない場合があります。 問題はHMRが悪であるということではなく、一般的なツールではないということだけに同意します。 これにより、これらの設計上の決定にとらわれないフレームワークのコンテキストで不協和音が発生します。

ポーリングからWebSocketに切り替えることはおそらく良い考えですが、ポーリングは「問題の根本」ではなく、むしろここで人々が遭遇した問題の少なくともいくつかとは無関係です。

最後の2つのコメントはどちらも間違った仮定をしていることに注意してください。

• Next.jsはreact-hot-loaderを使用せず、変更が発行されたときにコンポーネントツリーを再レンダリングします
• Next.jsは、変更を受け取るためのポーリングを行いません。まだ表示されているページをマークするためのポーリングを行います。カナリアでは、devtoolsでポーリングが行われていることをユーザーに表示しないように、これがWebSocketに変更されました。 このHMRをさらに拡張するには、イベントソース接続を使用します。つまり、サーバーは（ファイルの変更時に）イベントをブラウザーに送信します。

@timneutkens聞いて

実際、ES2017ビルドを開発で実行できるようになりました！

2年間HMRについて不平を言った後、それを無効にする公式の方法はまだありませんか？!!

このlogginがNONnext.jsアプリで/ _next / on-demand-entries-ping？page = /を取得するのはなぜですか？

-自己解決：ロガーapp.useをコメントアウトする必要がありました。（morgan（dev））奇妙なことに、Morganはnext.jsのない別のアプリにインストールされているため、これがログに記録されて何かが起こっています。モーガン、なぜこれが起こっているのか知りたい。 これは、next.jsを別のプロジェクトにインストールする前は発生していませんでした。

問題を再度開いてください。問題は完全に解決されていません。

+1