Repository: next.js
Issue: Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering
Labels: bug,Navigation

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
"next dev"
node：16.16.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue or a replay of the bug

pages index.tsx

### To Reproduce

index.tsx pages
----------
import React from 'react'
import HOCFetchSiteData from '@middleware/HOCFetchSiteData'

const Index: React.FC<any> = (props: any) => {

  return (
    <div>555</div>
  );
};

export default HOCFetchSiteData(Index);
======================================================
HOCFetchSiteData.tsx pages
----------
import React from 'react'
import { SpinLoading } from 'antd-mobile'
import isServer from '@utils/is-server'
const style = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: "100%",
    height: '100vh'
}
const Loading: React.FC<any> = (props) => {
    return <div style={style}>
        <SpinLoading color='primary' />
    </div>
}

const HOCFetchSiteData = (Components: React.FunctionComponent<any>) => {
    return (props: any) => {
        if (!isServer()) {
            return <Loading />;
        }
        return <Components {...props} />;
    };
};



export default HOCFetchSiteData

### Describe the Bug

Uncaught Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
    at mountSyncExternalStore (react-dom.development.js:16784:1)
    at Object.useSyncExternalStore (react-dom.development.js:17727:1)
    at useSyncExternalStore (react.development.js:1676:1)
    at useMotionReduced (reduce-and-restore-motion.js:34:30)
    at eval (spin-loading.js:19:41)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at updateSimpleMemoComponent (react-dom.development.js:19425:1)
    at updateMemoComponent (react-dom.development.js:19284:1)
    at beginWork (react-dom.development.js:21673:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:1)
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

### Expected Behavior

const style = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: "100%",
    height: '100vh'
}
const Loading: React.FC<any> = (props) => {
    return <div style={style}>
        <SpinLoading color='primary' />
    </div>
}

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_