Next.js: Disable HMR

HMR selalu didukung dalam mode dev. Tidak ada cara resmi untuk mematikannya.
Kami tidak punya rencana untuk melakukannya dalam jangka pendek.

Bukankah ini akan menyebabkan beban pada server, kami membutuhkan cara untuk mematikan HMR untuk berjalan dalam produksi.

Ini tidak aktif dalam produksi. Pastikan Anda menjalankan next build dan next start atau next build dan NODE_ENV=production node server.js dalam produksi.

Mematikan HMR dapat berguna saat mengerjakan tata letak. Saya sedang mengedit styled-components dan beberapa gaya css global, tetapi pratinjaunya segera rusak. Alasannya adalah bahwa halaman mendapatkan campuran gaya yang diberikan SSR dan yang baru saja dibuat. Tampaknya tidak ada cara untuk mengatasi ini kecuali dengan mematikan HMR.

Selain HMR yang masih kompatibel hanya dengan ES5 (tidak semua orang perlu melakukan transpile kelas lagi), saya secara teratur menemukan bug terkait HMR spazzy yang hanya terjadi dalam pengembangan. Saya sangat ingin memiliki cara untuk menonaktifkannya.

Bahkan solusi peretasan akan dihargai. Ini berubah menjadi mimpi buruk.

Saya yakin saya menghadapi masalah terkait. Saat ini mencoba menggunakan react-waypoint di halaman Next.js. Saat memanggil this.setState dari dalam event handler Waypoint, saya mendapatkan kesalahan Maximum call stack size exceeded . Ini hanya terjadi saat menjalankan Next.js dalam mode dev. Jika saya npm run build dan npm start masalah tidak terjadi.

Mungkin terkait dengan masalah ini ?

Dengan cara apa pun kami dapat membuka kembali masalah ini. HMR bisa sangat mengganggu dalam berbagai situasi. Jika ini bukan prioritas, dapatkah Anda memberikan beberapa info di mana menemukan kode itu (untuk menonaktifkannya secara manual) dan/atau membuat PR @arunoda

Saat ini kami mengalami masalah besar dengan Apollo GraphQL + Next JS (5.0.0). getDataFromTree tidak berfungsi dan ini merusak banyak hal dalam pengaturan kami :(

@timneutkens , @arunoda , dapatkah Anda membuka kembali ini?

Dan omong-omong https://github.com/zeit/next.js/issues/1938#issuecomment -358195616

sepertinya ada masalah dengan shouldComponentUpdate . Hal penting yang perlu diketahui adalah bahwa dalam mode dev fungsi ini tidak dipanggil karena keterbatasan fungsi
Saya akan mengatakan jalankan dalam mode produksi secara lokal dan tambahkan beberapa logging ke functions.php Anda.

Ini sepertinya hal yang besar

Terkadang saya ingin menonaktifkan HMR dalam mode dev hanya untuk menghindari mengacaukan tab jaringan alat dev dengan suara pesan yang tidak diperlukan.

"on-demand-entries-ping?page=/xxx", dll

Menekan CMD-R untuk memuat ulang halaman bukanlah masalah besar, memulai ulang server untuk mendapatkan pembaruan dalam mode prod sangat merepotkan.

sebagai solusinya, Anda dapat mencegah permintaan hmr dengan fitur "Permintaan pemblokiran" chrome dev tools

@vanmik Tip yang bagus, terima kasih! ✨

Untuk menemukan Permintaan Pemblokiran di Chrome (setidaknya 66), Anda mungkin perlu:

buka 'Sesuaikan dan kendalikan DevTools' (tiga titik vertikal) > More tools > Request Blocking . Ini akan membuka konsol Pemblokiran Permintaan tempat Anda dapat memeriksa sumber permintaan yang akan diblokir, seperti yang ditunjukkan pada tangkapan layar

Ingin menyebutkan Anda tidak terbatas pada alat dev dengan itu. Anda dapat menggunakan plugin browser untuk memblokir permintaan. Dalam hal ini Anda tidak perlu membuka alat dev setiap saat hanya untuk itu.

Tapi saya berharap di masa depan kita akan mendapatkan sesuatu yang sederhana seperti:

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

HRM menyebalkan. Ini membawa kesulitan lebih sering daripada manfaat (misalnya ketika beberapa bagian dari kode mendapatkan hot-reload sementara beberapa tidak yang menyebabkan keadaan tidak konsisten).

Sementara tip @vanmik menghentikan operasi HMR yang sebenarnya, konsol dev saya masih berantakan dengan entri http://localhost:3000/_next/on-demand-entries-ping?page=/xxx , hanya saja sekarang ada kesalahan.

Tidak dapat diterima untuk debugging :-/

Pasti ingin memiliki

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

Mungkin seseorang bisa menulis plugin untuk ini ???

@gihrig Anda dapat memfilter kesalahan ini dengan menu konteks konsol (klik kanan pada kesalahan):

@arunoda Ada kemajuan dalam hal ini? Saya mengalami masalah dengan proptypes HMR dan immutablejs - sangat membuat frustrasi. Lihat: https://github.com/facebook/prop-types/issues/221

Solusi saya untuk itu adalah mengaktifkan request blocking dan kemudian menambahkan permintaan on-demand-entries-ping ke daftar permintaan yang diblokir. Semoga ini bisa membantu orang lain yang tidak menyukai HMR seperti saya.

Untuk menonaktifkan Hot Module Reloading (HMR) di Next.js v7+, tambahkan ini ke file next.config.js :

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

Ini akan menonaktifkan pembangunan kembali pada perubahan, yang pada gilirannya akan menyebabkan browser tidak pernah "melihat" perubahan apa pun, dan karenanya tidak akan memuat ulang apa pun. Ini berarti Next.js tidak akan mengkompilasi ulang perubahan . Anda harus memulai ulang server next.js setiap kali ada perubahan, lalu segarkan browser Anda.

Untuk solusi yang memaksa seluruh halaman memuat ulang pada setiap perubahan, lihat komentar di bawah ini .

FWIW segera menggabungkan ini: https://github.com/zeit/next.js/pull/4508

Untuk solusi yang akan selalu memuat ulang halaman pada perubahan , Anda dapat membuat 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
});

Saya seperti 80% yakin ini akan rusak di masa depan.

Ini adalah peretasan yang mengerikan, tetapi satu-satunya cara saya dapat mengatasi bug yang akan menyebabkan tab browser mengkonsumsi> 100% CPU kemudian crash di Chrome pada setiap hot reload.

Semoga pada saat peretasan pecah, akan ada solusi resmi atau bug yang disebutkan dalam masalah ini akan diperbaiki 👍

Alasan saya ingin menonaktifkan HMR adalah karena panel DevTools/Applications/Cookies (Chrome Windows) kehilangan fokus saat Anda mengetiknya karena pembaruan HMR terus terjadi di latar belakang. Saya menduga ini akan terjadi bahkan jika saya memberi tahu webpackDevServer untuk mengabaikan semua file. Koneksi websocket akan tetap dilakukan di latar belakang dan saya yakin koneksi inilah yang merusak panel cookie.

Intinya adalah: solusi ideal harus menonaktifkan HMR sepenuhnya. Terima kasih!

Sangat disayangkan Anda tidak bisa menambahkan ini ke next.config.js

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

Opsi ini menginstruksikan modul untuk beroperasi dalam mode 'malas', artinya modul tidak akan dikompilasi ulang saat file berubah, melainkan pada setiap permintaan. Kedengarannya seperti sesuatu yang banyak dari kita harapkan tanpa harus pergi sejauh solusi @jesstelford .

Sumber : https://github.com/webpack/webpack-dev-middleware#lazy

Ketika saya mencoba ini pada next 7.0.2 , saya mendapatkan kesalahan berikut:

Memiliki kesempatan untuk bekerja dengan proyek Create React App hari ini.

Saya pikir akar masalah HMR ini bukan karena HMR itu jahat, melainkan cara penerapannya.

Sederhananya, meminta klien melakukan polling server secara berkala kurang dari ideal.

Dari pengamatan sepintas terlihat bahwa CRA menggunakan koneksi soket yang hanya berkomunikasi dengan klien ketika ada file yang diubah, lalu klien memuat ulang halaman. Skema ini juga menghasilkan refresh browser yang lebih cepat karena operasinya tidak bergantung pada interval polling berikutnya.

CRA adalah sumber terbuka . Akan sangat bagus jika seseorang dengan waktu dan minat dapat menggali untuk meningkatkan HMR Berikutnya untuk mengikuti model CRA (dan membuatnya mudah dinonaktifkan juga, tentu saja :-)

@gihrig mungkin ada beberapa alasan berbeda mengapa orang ingin menonaktifkan HMR.

Pemahaman saya adalah bahwa react-hot-loader memerlukan asumsi tertentu untuk dipegang tentang bagaimana aplikasi Anda ditulis, bagaimana keadaan dimodelkan, dan tidak adanya identitas objek yang signifikan. Asumsi ini biasanya berlaku untuk aplikasi berbasis redux yang ditulis dengan benar, tetapi mungkin tidak berlaku untuk aplikasi yang telah dirancang menggunakan pendekatan lain. Saya setuju bahwa masalahnya bukan karena HMR itu jahat — hanya saja itu bukan alat generik. Ini menciptakan beberapa disonansi dalam konteks kerangka kerja yang sebaliknya agnostik tentang keputusan desain ini.

Beralih dari polling ke websocket mungkin merupakan ide yang bagus, tetapi polling bukanlah "akar masalah", atau lebih tepatnya itu tidak terkait dengan setidaknya beberapa masalah yang dihadapi orang-orang di sini.

Perhatikan bahwa kedua 2 komentar terakhir membuat asumsi yang salah:

• Next.js tidak menggunakan react-hot-loader, ia merender ulang pohon komponen saat perubahan dipancarkan
• Next.js tidak melakukan polling untuk menerima perubahan, ia melakukan polling untuk menandai halaman mana yang masih dilihat, di canary ini telah diubah menjadi websocket hanya agar pengguna tidak melihat polling yang terjadi di devtools mereka. Untuk lebih memperluas HMR ini berfungsi menggunakan koneksi sumber acara, artinya server mengirimkan acara (pada perubahan file) ke browser

@timneutkens Senang mendengarnya, terima kasih. Itu bukan asumsi yang salah, meskipun, itu adalah info yang sudah ketinggalan zaman. RHL digunakan ketika kami mulai menggunakan Berikutnya dan itu adalah penyebab masalah yang kami temui yang membuat saya awalnya berkomentar di utas ini. Saya belum melihat masalah apa pun yang terkait dengan HMR saat menggunakan Next dalam beberapa saat sekarang.

Faktanya, kami sekarang dapat menjalankan ES2017 build in dev!

Setelah 2 tahun orang mengeluh tentang HMR masih belum ada cara resmi untuk menonaktifkannya?!!

Mengapa loggin ini GET /_next/on-demand-entries-ping?page=/ di aplikasi NON next.js saya?

-- diselesaikan sendiri: harus mengomentari aplikasi logger.use.(morgan(dev)) yang aneh adalah bahwa Morgan diinstal pada aplikasi yang berbeda tanpa next.js, jadi ada sesuatu yang terjadi dengan ini dicatat oleh Morgan, saya ingin tahu mengapa ini terjadi. Ini tidak terjadi sebelum menginstal next.js pada proyek yang berbeda.

Silakan buka kembali masalah ini jelas tidak terpecahkan.

+1