Repository: next.js
Issue: Hydration error on refresh
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: linux
      Arch: x64
      Version: #43~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Apr 21 16:51:08 UTC 2
    Binaries:
      Node: 18.16.0
      npm: 9.6.6
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.10
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
```

### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/laclance/app-hydration-error

### To Reproduce

Login in to home page and refresh browser. 

### Describe the Bug

App continues to run fine but with the errors below in browser console.
My app, which is a very large app compared to the example repo I made, ends up crashing.
Adding the following code to the Providers component removes the errors but makes rendering the app much slower:

```
  const [showChild, setShowChild] = useState(false);

  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return <p>loading</p>;
  }
  ```

Errors:
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "Authorizing" Client: "Hello world"
    at p
    at AuthGuard (webpack-internal:///(app-client)/./src/AuthGuard.tsx:16:11)
    at HomeMain (webpack-internal:///(app-client)/./src/HomeMain.tsx:19:74)
    at div
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at Suspense
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:80:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:106:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:213:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:342:11)
    at AuthContextProvider (webpack-internal:///(app-client)/./src/AuthContext.tsx:27:11)
    at Providers (webpack-internal:///(app-client)/./src/app/Providers.tsx:10:11)
    at main
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:80:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:106:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:387:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)
window.console.error @ app-index.js:32
console.error @ hydration-error-info.js:45
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
checkForUnmatchedText @ react-dom.development.js:31261
diffHydratedProperties @ react-dom.development.js:33370
hydrateInstance @ react-dom.development.js:34453
prepareToHydrateHostInstance @ react-dom.development.js:6974
completeWork @ react-dom.development.js:18647
completeUnitOfWork @ react-dom.development.js:24707
performUnitOfWork @ react-dom.development.js:24512
workLoopConcurrent @ react-dom.development.js:24487
renderRootConcurrent @ react-dom.development.js:24443
performConcurrentWorkOnRoot @ react-dom.development.js:23321
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537


Uncaught Error: Text content does not match server-rendered HTML.
    at checkForUnmatchedText (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31269:11)
    at diffHydratedProperties (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:33370:9)
    at hydrateInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:34453:10)
    at prepareToHydrateHostInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:6974:23)
    at completeWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:18647:17)
    at completeUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24707:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24512:5)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24487:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24443:9)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23321:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:537:21)
checkForUnmatchedText @ react-dom.development.js:31269
diffHydratedProperties @ react-dom.development.js:33370
hydrateInstance @ react-dom.development.js:34453
prepareToHydrateHostInstance @ react-dom.development.js:6974
completeWork @ react-dom.development.js:18647
completeUnitOfWork @ react-dom.development.js:24707
performUnitOfWork @ react-dom.development.js:24512
workLoopConcurrent @ react-dom.development.js:24487
renderRootConcurrent @ react-dom.development.js:24443
performConcurrentWorkOnRoot @ react-dom.development.js:23321
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537

Uncaught Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
    at updateDehydratedSuspenseComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:16436:48)
    at updateSuspenseComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:16044:16)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17357:14)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25650:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24501:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24487:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24443:9)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23321:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:537:21)
updateDehydratedSuspenseComponent @ react-dom.development.js:16436
updateSuspenseComponent @ react-dom.development.js:16044
beginWork$1 @ react-dom.development.js:17357
beginWork @ react-dom.development.js:25650
performUnitOfWork @ react-dom.development.js:24501
workLoopConcurrent @ react-dom.development.js:24487
renderRootConcurrent @ react-dom.development.js:24443
performConcurrentWorkOnRoot @ react-dom.development.js:23321
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537
```

### Expected Behavior

Would be great to be able opt in per component allowing of client to replace server content instead of a hydration error then can render a loader or something similar to what's expected on the client to create a better ux experience instead of just rendering null on the server.

### Which browser are you using? (if relevant)

latest brave and firefox

### How are you deploying your application? (if relevant)

_No response_