Implement HMR on the server

[johannesschaffer]

Edit by @jmikrut on 19 Dec, 2022:

The below was filed as a bug report initially, but it's moreso a feature request asking to implement HMR on the server, which would be great.

Bug Report

Always have to manually reload the page after each change.
Error:
GET http://localhost:3000/__webpack_hmr net::ERR_CONNECTION_RESET 200 (OK)

Steps to Reproduce

Didn't change any default config

Other Details

Payload v.1.3.4

[jmikrut]

Hey @johannesschaffer — this will happen if you change server-side code, like adding a new field or adding a new collection. If you are updating admin-only components like .tsx, .scss, or .jsx files, the hot reloading will work.

This is because the server relies on nodemon and actually does restart. However, there are a few discussions happening on Discord about opening up a way to use HMR on the server as well which would be awesome. I will convert this to a discussion regarding server HMR and we can track progress accordingly!

[johannesschaffer]

Ok, that makes sense. Don't even know whether Next.js can hot-reload server-side changes? It would however be awesome to have auto-refresh & the restart takes quite long (even with top of the line CPU). Currently I have to wait about 4-8s, then refresh manually. That's obviously not a very important issue;), but would still greatly improve developer experience, not having to wait as long to see changes (and I mean DX is what Payload is all about 😉)

[jmikrut]

Totally agreed. This is certainly important. I will mark it as Priority 2 on our roadmap!

I should also note that we are currently working toward improving server start time as well and that will be done within a few weeks actually.

[denolfe]

Possible implementation idea here: #2563

[jmikrut]

Update - this will be solved via moving to Next.js. Going to remove this from the roadmap and defer to the Next.js move:

#4202