reactjs / reactjs/react.dev

Handling different client and server content - not showing initial render

Aberta
#6,190 9 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

bug: confirmed
Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece pelo playground incorporado da página hydrateRoot e compare seu comportamento com o sandbox externo aberto pelo botão de fork. Reproduza o exemplo e rastreie como o playground lida com a hidratação e sua renderização inicial. O trabalho estará concluído quando o exemplo incorporado mostrar brevemente "Is Server" antes de mudar para "Is Client", correspondendo ao comportamento documentado.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation
Tipo de issue
Bug
Dificuldade
3/5
Tempo estimado
1-2 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
42/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.