Next.js 의 Fast Refresh 는 하나의 브라우저 세션과만 동작한다

Next.js 프로젝트에서 http서버와 https 서버를 둘다 띄워서 사용하고 있는 상황

 

세팅 참고 : [Next.js] 로컬(localhost)에 https 적용하기

[Next.js] 로컬(localhost)에 https 적용하기

 

 

크롬에서 브라우저에서 2개의 탭을 열었음

 

http://localhost:3000

 

https://localhost:3001

 

 

처음에는 https 만 코드 fast refresh 가 적용이 되지 않는 줄 알았다

근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서버를 내렸다 올렸다, 브라우저를 리프레쉬했다 이랬다 저랬다 하는데, 이번에는 http 브라우저세션이 fast refresh 안됨

 

행동패턴을 살펴보니, 처음 서버를 올리고 건드린 브라우저에서는 fast refresh 가 되고, 다른건 안됨

 

 

=> Next.js 는 최초 사용되는 웹소켓 서버와 바인딩 함

1. Single WebSocket Connection for HMR:
   • Next.js uses WebSocket connections for HMR to update the browser with changes in real-time.
   • Typically, the WebSocket server binds to a single address and port, usually the same as your HTTP server (e.g., http://localhost:3000).

• When you run npm run dev, Next.js binds its WebSocket server for HMR to the address used first. If you refresh http://localhost:3000 first, the HMR WebSocket connection will be bound to the HTTP server.
• Conversely, if you refresh https://localhost:3001 first after starting the server, the HMR WebSocket connection will be bound to the HTTPS server.

 

 

[참고 링크]

https://gseok.github.io/tech-talk-2022/2022-01-24-what-is-HMR/

HMR 이해하기