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를 실행할 때만 발생합니다. I 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 모드에서 업데이트를 받기 위해 서버를 다시 시작하는 것은 고통스럽습니다.

해결 방법으로 크롬 개발 도구의 "요청 차단" 기능을 사용하여 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 proptypes에 문제가 있습니다. 매우 실망스럽습니다. 참조: https://github.com/facebook/prop-types/issues/221

이에 대한 내 해결 방법은 request blocking 를 활성화한 다음 차단된 요청 목록에 on-demand-entries-ping 요청을 추가하는 것입니다. 저처럼 HMR을 싫어하시는 분들께 조금이나마 도움이 되었으면 합니다.

Next.js v7+에서 HMR(Hot Module Reloading)을 비활성화하려면 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 가 변경 사항에 대해 다시 컴파일되지 않음을 의미합니다. 변경 사항이 있을 때마다 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% 확신한다.

끔찍한 해킹이지만 브라우저 탭이 >100% CPU를 소비한 다음 핫 새로고침할 때마다 Chrome에서 충돌을 일으키는 버그를 해결할 수 있는 유일한 방법이었습니다.

해킹이 중단될 때까지 공식 솔루션이 있거나 이 문제에서 언급된 버그가 수정되기를 바랍니다 👍

HMR을 비활성화하려는 이유는 HMR 업데이트가 백그라운드에서 계속 발생하기 때문에 입력할 때 DevTools/Applications/Cookies(Chrome Windows) 패널이 포커스를 잃기 때문입니다. webpackDevServer에 모든 파일을 무시하도록 지시해도 이 경우가 아닐까 생각합니다. websocket 연결은 여전히 ​​백그라운드에서 이루어지며 쿠키 패널을 스래싱하는 것은 이 연결이라고 생각합니다.

요점: 이상적인 솔루션은 HMR을 완전히 비활성화해야 합니다. 감사 해요!

불행히도 이것을 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 에서 이것을 시도하면 다음 오류가 발생합니다.

오늘 Create React App 프로젝트와 함께 일할 기회가 있었습니다.

이 HMR 문제의 뿌리는 HMR이 구현되는 방식만큼 악하다는 것이 아닙니다.

간단히 말해서 클라이언트가 주기적으로 서버를 폴링하도록 하는 것은 이상적이지 않습니다.

피상적인 관찰에서 CRA는 파일이 변경되었을 때만 클라이언트와 통신하는 소켓 연결을 사용하고 클라이언트가 페이지를 다시 로드하는 것으로 보입니다. 이 구성표를 사용하면 작업이 다음 폴링 간격에 종속되지 않으므로 브라우저 새로 고침이 더 빨라집니다.

CRA는 오픈 소스 입니다. 시간과 관심이 있는 사람이 Next의 HMR을 업그레이드하여 CRA 모델을 따라갈 수 있다면 좋을 것입니다(물론 쉽게 비활성화할 수도 있습니다 :-)

@gihrig 사람들이 HMR을 비활성화하려는 몇 가지 다른 이유가 있을 수 있습니다.

내가 이해하는 바에 따르면 react-hot-loader는 애플리케이션 작성 방법, 상태 모델링 방법, 중요한 개체 ID 부재에 대한 특정 가정이 필요합니다. 이러한 가정은 일반적으로 올바르게 작성된 redux 기반 앱에 적용되지만 다른 접근 방식을 사용하여 설계된 앱에는 적용되지 않을 수 있습니다. 나는 문제가 HMR이 나쁘다는 것이 아니라는 데 동의합니다. 단지 일반적인 도구가 아니라는 것뿐입니다. 이것은 이러한 디자인 결정에 대해 불가지론적인 프레임워크의 맥락에서 약간의 불일치를 만듭니다.

폴링에서 웹 소켓으로 전환하는 것은 좋은 생각일 수 있지만 폴링은 "문제의 근본"이 아니거나 여기 사람들이 직면한 문제 중 적어도 일부와 관련이 없습니다.

마지막 2개의 댓글은 모두 잘못된 가정을 합니다.

• Next.js는 react-hot-loader를 사용하지 않으며 변경 사항이 발생하면 구성 요소 트리를 다시 렌더링합니다.
• Next.js는 변경 사항을 수신하기 위해 폴링을 수행하지 않고, 어떤 페이지가 여전히 보고 있는지 표시하기 위해 폴링을 수행합니다. 카나리아에서는 사용자가 devtools에서 발생하는 폴링을 볼 수 없도록 웹 소켓으로 변경되었습니다. 이 HMR을 더 확장하려면 이벤트 소스 연결을 사용하여 작동합니다. 즉, 서버가 이벤트(파일 변경 시)를 브라우저로 보냅니다.

@timneutkens 정말

사실, 이제 ES2017 빌드를 dev에서 실행할 수 있습니다!

사람들이 HMR에 대해 불평한지 2년이 지난 지금도 공식적으로 비활성화할 수 있는 방법이 없다?!

내 NON next.js 앱에서 이 로그인이 GET /_next/on-demand-entries-ping?page=/인 이유는 무엇입니까?

-- self-resolved: 로거를 주석 처리해야 했습니다. app.use.(morgan(dev)) 이상한 점은 Morgan이 next.js가 없는 다른 앱에 설치되었다는 것입니다. 모건, 왜 이런 일이 일어나는지 알고 싶습니다. 이것은 다른 프로젝트에 next.js를 설치하기 전에는 발생하지 않았습니다.

문제는 확실히 해결되지 않았습니다.

+1