reactjs / reactjs/react.dev

Handling different client and server content - not showing initial render

Ouverte
#6,190 9 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug: confirmed
Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le playground intégré à la page hydrateRoot et comparez son comportement avec celui du sandbox externe ouvert via le bouton fork. Reproduisez l’exemple et suivez la manière dont le playground gère l’hydratation et son rendu initial. C’est terminé lorsque l’exemple intégré affiche brièvement "Is Server" avant de passer à "Is Client", conformément au comportement documenté.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
documentation
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.