Fast refresh / Hot reload does not work right away - takes minutes to kick in

[nodeworks]

I've been using next.js for a couple years and i'd say the past year or so i've had this problem of HMR and more recently fast refresh. When I load a page in the browser it doesn't hook up to fast refresh right away. If I make changes it doesn't do anything for about the first 5 minutes. Then randomly it will kick in at some point. How can I start with debugging this?

NextJS: 9.5.3
Docker for Mac: 2.3.6.1

[nodeworks]

Updated screenshots:

This is when I load the page and it doesn't work for a while (minutes):

This is when it starts working and kicking in:

[timneutkens]

Do you have a leftover service-worker from another project maybe? That would generally cause issues as it does not know how to handle certain requests.

[nodeworks]

Just checked and there are no service works for the domain.

[nodeworks]

I think I may have actually tracked down the source. so I use traefik as a reverse proxy. I think that may be causing the issue. I'm going to dive into it more and see if I can pinpoint why and where.

[nodeworks]

The issue is related to compression:

traefik.http.routers.node.middlewares: compress_mid@docker
traefik.http.middlewares.compress_mid.compress: true

Having gzip compression enabled was causing the issue. For traefik that config is here (https://docs.traefik.io/middlewares/compress/).

Turning it off fixes the issue.