`suppressHydrationWarning` deactivates hydration completely

[derweili]

Link to the code that reproduces this issue

https://github.com/derweili/nextjs-hydration-issue/

To Reproduce

1. Start the dev server and open the page. Alternatively use the hosted example I deployed to vercel.
2. Ensure you are using a different timezone in your browser/OS then UTC.
3. Click in the nav on "Example 1: Without supressed warning".
4. You can see that the date is first rendered using the servers timezone (UTC) but during hydration, the date is changed to the users timezone. You can also see a error happpening in the console: Text content does not match server-rendered HTML.
5. Click on the nav on "Example 2: With supressed warning".
6. You can now see the exact same page with only one difference: the div wrapping the time has a supressHydrationWarning set. But you can now also see, the date is not localized to uses timezone anymore. Instead the server time is shown.
7. Still on the same page (Example 2), open you console, you can see that the console log, called in the LocalizedDateTime is actually called and loggs the localized that should have been shown on the page. So "hydration execution" still seams to happen, but the HTML is not added to the DOM.
8. Click on the nav on "Example 3: combined"
9. Here you can see the date twice, one with supressHydrationWarning and one without. This time both are localized.

Current vs. Expected behavior

Following the steps from the previous section, I would expect that the date always gets localized to the users timezone during hydration. The only difference I would expect is that when suppressHydrationWarning is set, only the warning disappears, but the hydration should still happen.

Even the nextjs docs mention timestamps as a situation where suppressHydrationWarning could be used.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

I tested on multiple environments, Mac, Windows, Deployed on Vercel. So its not a environment specific issue.

[byron-okta]

I got the same issue when working with timestamps. When using suppressHydrationWarning, the timestamp rendered on the page was not updated.