Hydration error with appDir client-only component

[advancingu]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #33~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Jan 30 17:03:34 UTC 2
Binaries:
  Node: 18.14.2
  npm: 9.5.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.2.2-canary.1
  eslint-config-next: 13.2.2-canary.1
  react: 18.2.0
  react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/advancingu/nextjs-13.2-hydration-repro

To Reproduce

1. Check out the reproduction repository
2. npm i
3. npm run dev
4. Open http://localhost:3000/fe in browser
5. Open browser dev tools and set a cookie myCookie with e.g. a value of value to cookie storage
6. Fully reload the page
7. Observe browser JS console output

Describe the Bug

JS console contains a hydration error:

Warning: Text content did not match. Server: "" Client: "value"
p
[...]

Expected Behavior

Client components that use useState() should not cause hydration errors due to server client content mismatch as by definition their content can only be fully rendered on the client.

Possibly related to #45246

Which browser are you using? (if relevant)

Firefox 110

How are you deploying your application? (if relevant)

No response

[rreeves8]

having similar issue

[timneutkens]

Please read the documentation here: https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components.

Client components are still server-side rendered, they're equivalent to the components you write in pages today. The only new part is server components which only render on the server.
As such you can still create hydration mismatches based on reading values only available in the browser, those should be read in useEffect.

From looking at the code you're using you should be able to use the new cookies() function in server components for the use-case.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.