Repository: next.js
Issue: Random non-deterministic React hydration error 418 using appDir that only happens on prod Vercel
Labels: bug

### Verify canary release

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

### Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.18.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.15.0
    Relevant packages:
      next: 13.0.5-canary.2
      eslint-config-next: 13.0.4
      react: 18.2.0
      react-dom: 18.2.0

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

Chrome

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

Vercel

### Describe the Bug

I have been driving myself insane for the past few days trying to debug this problem.

I am experiencing very occasional React hydration errors (418) **that only repro on production Vercel**, making the root cause extremely difficult to pinpoint. They do not repro during `next dev` with/without react strict mode, and I have been unable to repro with a local `next build` + `next start`.

Note: this is using Next.js 13 `appDir`.

I have a feeling this is a **race condition** somewhere, either in Next.js or React 18 because it happens only occasionally in production, and the rest of the time the exact same pages load fine.

I have read all of the associated threads & discussions surrounding hydration errors.. I'm not using any date strings, have double checked DOM nesting, have disabled `swcMinify`, added `Suspense` boundaries, etc — all in an attempt to mitigate these errors but to no avail.

```
Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at zh (796-3c8db907cc96f9a4.js:9:55756)
    at ...
```

### Expected Behavior

These pages should load fine 100% of the time instead of 98% of the time.

### Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/transitive-bullshit/next-movie

### To Reproduce

This [branch](https://github.com/transitive-bullshit/next-movie/tree/feature/next-themes-beta) repros consistently ([vercel deployment](https://next-movie-kkvlhk1y6-saasify.vercel.app/)), though it is using an untested beta of `next-themes` via https://github.com/pacocoursey/next-themes/issues/152, so I'm not sure if this branch is a good representative example.

The `main` branch repros sporadically as described above ([vercel prod deployment](https://next-movie.transitivebullsh.it/)). If you open devtools and sit there and refresh either the main page or a simpler movie detail page for a few minutes, eventually you may (or may not :sigh:) run into this hydration error.

The difficulty of reproducing the issue has been extremely frustrating for me, and given that it only happens randomly on prod, it makes things very, very difficult to debug. Honestly, I've never experienced this much frustration with Next.js / React before in the 5-6 years I've been in the ecosystem, but I can't deploy things to Vercel as things stand if some percentage of my users will experience random errors.