reactjs / reactjs/react.dev

Handling different client and server content - not showing initial render

Open
#6,190 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug: confirmed
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

In the hydrateRoot page, it is mentioned that
"This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration."

which means that the initial render on the playground should show "Is Server", but it shows directly "Is Client" which is very confusing for learners and doesn't show the real behavior.
I tired opening the sandbox in external window, and it indeed shows "Is Server" first and then changing to "Is Client" as expected.

In the Website:
hydrate root playground

In The sandbox (using the fork button):
hydrate root sandbox

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the hydrateRoot page's embedded playground and compare its behavior with the external sandbox opened through the fork button. Reproduce the example and trace how the playground handles hydration and its initial render. Done means the embedded example briefly shows "Is Server" before changing to "Is Client", matching the documented behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.