Next.js: Hot reloading extremely slow. Goes through every iteration only when page is viewed.

[MarkLyck]

Bug report

It used to be that when you made a code change, the page would hot-reload in the background and I'd barely be able to switch to my browser before the page was re-rendered.

However with Next: 9.2.0 when I make let's say 100 keystroke changes. in. my app doesn't automatically re-render in the background. Instead, it waits till I navigate to my browser and then it will re-render 100 times, 1 at a time and wait for it to finish.

For example, if I'm just changing the text in a <p> tag a few times and I go to my localhost:3000 I will see every keystroke change I did render 1 by 1.

It takes forever to wait for and is extremely inefficient. I get the arguable appeal of not re-rendering in the background. But I have absolutely no need for 99% of these re-renders. I just want to see what the current state it. Not see how it changed with every single keystroke I did editing my app.

I assume this must be a bug???

Additional context

• OS: macOs (2016 Macbook Pro)
• Browser: Google Chrome
• Version of Next.js: 9.2.0

I'm not using Typescript so it's not due to Typechecking or the Fork typescript provider.

I believe this started happening when I updated form next 8.x to 9.x

[timneutkens]

Sounds unexpected, hard to say what exactly you're experiencing without a reproduction / repository to look at.

[MarkLyck]

Difficult to provide. It's a pretty standard app, nothing special. But it's pretty big with 10 pages and +100 components. You have recommendations on how I could attempt to resolve this?

[timneutkens]

It's difficult to debug hence why we need a reproduction. Can't recommend anything specific, you'd need to figure out what events are sent through the webpack-hmr eventsource connection and then check how they're applied and in what order, eg if they're stacked until navigation for whatever reason (really not sure based on the provided description). Using development Next.js (see contributing.md) you'd be able to change code to debug.

[madsfaerch]

@MarkLyck I'm experiencing the same issue. I thought it was just how Next works. I did find it amusing to see a super quick timelapse of all changes I've done since my last visit to the browser, but I agree it's not optimal.

Maybe we can compare setups to find a source for the behavior?

[madsfaerch]

@MarkLyck just to confirm, is this the issue you're describing?

1. Have Next project open in a tab with next dev active
2. Focus a different tab
3. Make several code changes, resulting in recompilations
4. Focus browser
5. Focus tab with Next project
6. Observe all the changes applied sequentially

[MarkLyck]

@madsfaerch Yes that's exactly what I'm experiencing, except my app's main page is pretty hefty with many components & animations and a lot of data being fetched, so it takes 50x longer to render each iteration than yours.

But yes, that looks. like the exact same issue, I'm having.

[timneutkens]

@madsfaerch thanks! That makes it a lot clearer on where to look, must be related to the ping getting shut down and then when focusing back restarting the ping: https://github.com/zeit/next.js/blob/canary/packages/next/client/dev/on-demand-entries-client.js#L16-L23

Then after the ping resumes webpack probably sends every event separately and those get applied after eachother.

It'd help if either of you could provide a reproduction that makes it very clear that it happens, based on what @MarkLyck is saying probably adding in a bunch of animations? When we have one we can add tests for it and I can have someone from my team investigate it 🙏

[madsfaerch]

@timneutkens happy to help!

I just tried to make a quick reproduction by doing

• yarn create next-app
• yarn dev
• Open localhost:3000
• Focus different tab
• Edit pages/index multiple times
• Return to browser and focus localhost tab
• Observe the “buffered” changes applied

I checked in FF and Chrome on macOS Catalina. My node version is ~9 and I also observe this in another env with Chrome, node ~10 and macOS Mojave.

It’s pretty much a non-issue on light pages, but I can imagine it being an impediment on heavy pages.

I’d be happy to spend some time researching this, but I’m not well versed in HMR configurations.

[madsfaerch]

How would you like a repro supplied? A github repo?

[timneutkens]

@madsfaerch if those are the definitive steps to reproduce that's all we'll need 👍 Will have someone investigate if we can improve it 💯 Thanks for providing really clear what you were seeing, it really helps a lot.

[madsfaerch]

@timneutkens Great! Thank you so much for developing these amazing products. I am in awe of your work (and the pace of it)!

[Timer]

Just tested this on the latest Next.js and it appears to be fixed by Fast Refresh. We added a feature that delays re-rendering until all updates are processed.