SSE Bypass for HMR

Describe the bug

When developing on the Next.js with next dev, No problem for a while, but suddenly the server becomes unresponsive.

Environment

• msw: 0.29.0
• nodejs: 14.16.0
• npm: 0.0.0
• next: 10.2.3

Please also provide your browser version.

Chrome: Version 91.0.4472.164 (Official Build) (x86_64)

To Reproduce

Steps to reproduce the behavior:

1. npm run next dev
2. Edit some code many times.
3. Suddenly the server becomes unresponsive.

Expected behavior

Server always responds.

Screenshots

The below capture is the Network tab when no response is returned.

Workaround

It looks like there is a problem in webpack-hmr?page=xxxx. As a workaround, I added the below SSE Bypass in generated mockServiceWorker.js. Then, I was able to solve the problem that the response did not come back.

self.addEventListener("fetch", function (event) {
  const { request } = event;

  // Bypass server-sent events.
  if (request.headers.get("accept") === "text/event-stream") {
    return;
  }

  // Bypass navigation requests.
  if (request.mode === "navigate") {
    return;
  }
  ...
}

This Bypass is useful to us, but what do you think?

[kettanaito]

Analyzing NextJS

Here’s where the EventSource is being established on the client:

evtSource = getEventSourceWrapper({
  path: `${assetPrefix}/_next/webpack-hmr?page=${currentPage}`,
  timeout: 5000,
})

next.js/packages/next/client/dev/on-demand-entries-utils.js

The server-side of NextJS just bypasses this route:

• In the hot-middleware
• In the route handler

It appears that the SSE established is not coming from webpack but from NextJS. Huh, so there’s no straightforward way to put this in an integration test in this repo.

[takefumi-yoshii]

Do you think this may be the root cause for #785 and #788?

I feel that both are related, but I can’t reply without reproduce environment. But I think it’s worth having a reporter try this bypass. The same is true for developer who do not need to intercept SSE.

Please, would you be interested in opening a pull request with your fix?

Of course! I hope it helps until it is fundamentally resolved. Wait a minute. @kettanaito