skip hot reload sync event for applying hmr updates (#52270)

### Issue

x-ref:
https://github.com/vercel/next.js/actions/runs/5469070005/jobs/9957658991?pr=52282#step:27:526
metadata tests are failing as flaky recently, then after digging into
it, noticed it as a hmr issue.

**Steps to repro with metadata test app**

The later (after the 1st one) visited page with client components
imports sometimes throw an full reload refresh warning
> Fast Refresh will perform a full reload when you edit a file that's
imported by modules
outside of the React rendering tree.

Turns out there's some unexpected hmr events when `"sync"` event is
triggered, and client tries to apply the updates but then failed. This
PR excludes the triggering by `"sync"` for RSC pages updates. `'sync'`
event with errors/warnings will still be handled and then `'built'`
event will be handled with hot reload updates

Possibly related to #40184

packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx

@@ -335,9 +335,9 @@ function processMessage(
       )
 
       const isHotUpdate =
-        obj.action !== 'sync' ||
-        ((!window.__NEXT_DATA__ || window.__NEXT_DATA__.page !== '/_error') &&
-          isUpdateAvailable())
+        obj.action !== 'sync' &&
+        (!window.__NEXT_DATA__ || window.__NEXT_DATA__.page !== '/_error') &&
+        isUpdateAvailable()
 
       // Attempt to apply hot updates or reload.
       if (isHotUpdate) {

test/e2e/app-dir/metadata/app/api/manifest/route.ts

@@ -0,0 +1,7 @@
+export function GET() {
+  return new Response('{ "name": "metadata-app", }', {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+    },
+  })
+}

test/e2e/app-dir/metadata/app/api/preload/route.ts

@@ -0,0 +1,7 @@
+export function GET() {
+  return new Response('console.log("hello from preload")', {
+    headers: {
+      'Content-Type': 'application/javascript; charset=utf-8',
+    },
+  })
+}

test/e2e/app-dir/metadata/app/api/route.ts

@@ -1,5 +1,3 @@
-import { NextResponse } from 'next/server'
-
 export function GET() {
-  return new NextResponse('hello api route')
+  return new Response('hello api route')
 }

test/e2e/app-dir/metadata/app/basic-edge/client.tsx

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 // NOTE: atm preload/prefetch/prefetchDNS are only supported in the SSR and client, not in RSC yet
 export default function Client() {
   // @ts-ignore
-  ReactDOM.preload('/preload-url', { as: 'script' })
+  ReactDOM.preload('/api/preload', { as: 'script' })
   // @ts-ignore
   ReactDOM.preconnect('/preconnect-url', { crossOrigin: 'use-credentials' })
   // @ts-ignore

test/e2e/app-dir/metadata/app/basic-edge/page.tsx

@@ -27,7 +27,7 @@ export const metadata: Metadata = {
   authors: [{ name: 'huozhi' }, { name: 'tree', url: 'https://tree.com' }],
   themeColor: { color: 'cyan', media: '(prefers-color-scheme: dark)' },
   colorScheme: 'dark',
-  manifest: 'https://www.google.com/manifest',
+  manifest: '/api/manifest',
   viewport: {
     width: 'device-width',
     initialScale: 1,

test/e2e/app-dir/metadata/app/basic/client.tsx

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 // NOTE: atm preload/prefetch/prefetchDNS are only supported in the SSR and client, not in RSC yet
 export default function Client() {
   // @ts-ignore
-  ReactDOM.preload('/preload-url', { as: 'script' })
+  ReactDOM.preload('/api/preload', { as: 'script' })
   // @ts-ignore
   ReactDOM.preconnect('/preconnect-url', { crossOrigin: 'use-credentials' })
   // @ts-ignore

test/e2e/app-dir/metadata/app/basic/page.tsx

@@ -25,7 +25,7 @@ export const metadata: Metadata = {
   authors: [{ name: 'huozhi' }, { name: 'tree', url: 'https://tree.com' }],
   themeColor: { color: 'cyan', media: '(prefers-color-scheme: dark)' },
   colorScheme: 'dark',
-  manifest: 'https://www.google.com/manifest',
+  manifest: '/api/manifest',
   viewport: {
     width: 'device-width',
     initialScale: 1,

test/e2e/app-dir/metadata/app/title-template/extra/inner/page.tsx

@@ -7,9 +7,9 @@ export default function Page() {
         to /
       </Link>
       <br />
-      <Link href="/basic" id="to-basic">
+      {/* <Link href="/basic" id="to-basic">
         to /basic
-      </Link>
+      </Link> */}
     </>
   )
 }

test/e2e/app-dir/metadata/metadata.test.ts

@@ -217,10 +217,10 @@ createNextDescribe(
         })
 
         await matchMultiDom('link', 'rel', 'href', {
-          manifest: 'https://www.google.com/manifest',
+          manifest: '/api/manifest',
           author: 'https://tree.com',
           preconnect: '/preconnect-url',
-          preload: '/preload-url',
+          preload: '/api/preload',
           'dns-prefetch': '/dns-prefetch-url',
         })
 
@@ -251,10 +251,10 @@ createNextDescribe(
         })
 
         await matchMultiDom('link', 'rel', 'href', {
-          manifest: 'https://www.google.com/manifest',
+          manifest: '/api/manifest',
           author: 'https://tree.com',
           preconnect: '/preconnect-url',
-          preload: '/preload-url',
+          preload: '/api/preload',
           'dns-prefetch': '/dns-prefetch-url',
         })