apply to pages router

devjiwonchoi · devjiwonchoi · commit a9dcb3880a2c · 2025-09-19T15:30:43.000+02:00
diff --git a/packages/next/src/client/dev/hot-reloader/pages/websocket.ts b/packages/next/src/client/dev/hot-reloader/pages/websocket.ts
@@ -26,14 +26,18 @@ export function sendMessage(data: string) {
 let reconnections = 0
 let reloading = false
 let serverSessionId: number | null = null
+let mostRecentCompilationHash: string | null = null
 
 export function connectHMR(options: { path: string; assetPrefix: string }) {
   function init() {
     if (source) source.close()
 
+    const url = getSocketUrl(options.assetPrefix)
+    const newSource = new window.WebSocket(`${url}${options.path}`)
+
     function handleOnline() {
       if (isTerminalLoggingEnabled) {
-        logQueue.onSocketReady(source)
+        logQueue.onSocketReady(newSource)
       }
       reconnections = 0
       window.console.log('[HMR] connected')
@@ -66,16 +70,33 @@ export function connectHMR(options: { path: string; assetPrefix: string }) {
         serverSessionId = message.data.sessionId
       }
 
+      // Track webpack compilation hash for server restart detection
+      if (
+        message.type === HMR_MESSAGE_SENT_TO_BROWSER.SYNC &&
+        'hash' in message
+      ) {
+        // If we had previously reconnected and the hash changed, the server may have restarted
+        if (
+          mostRecentCompilationHash !== null &&
+          mostRecentCompilationHash !== message.hash
+        ) {
+          window.location.reload()
+          reloading = true
+          return
+        }
+        mostRecentCompilationHash = message.hash
+      }
+
       for (const messageCallback of messageCallbacks) {
         messageCallback(message)
       }
     }
 
     let timer: ReturnType<typeof setTimeout>
     function handleDisconnect() {
-      source.onerror = null
-      source.onclose = null
-      source.close()
+      newSource.onerror = null
+      newSource.onclose = null
+      newSource.close()
       reconnections++
       // After 25 reconnects we'll want to reload the page as it indicates the dev server is no longer running.
       if (reconnections > 25) {
@@ -89,13 +110,12 @@ export function connectHMR(options: { path: string; assetPrefix: string }) {
       timer = setTimeout(init, reconnections > 5 ? 5000 : 1000)
     }
 
-    const url = getSocketUrl(options.assetPrefix)
+    newSource.onopen = handleOnline
+    newSource.onerror = handleDisconnect
+    newSource.onclose = handleDisconnect
+    newSource.onmessage = handleMessage
 
-    source = new window.WebSocket(`${url}${options.path}`)
-    source.onopen = handleOnline
-    source.onerror = handleDisconnect
-    source.onclose = handleDisconnect
-    source.onmessage = handleMessage
+    source = newSource
   }
 
   init()
