Uma das maiores vantagens do React.js deve ser a renderização do lado do servidor . O problema é que a função chave React.renderComponentToString()
é síncrona, o que torna impossível carregar quaisquer dados assíncronos conforme a hierarquia do componente é renderizada no servidor.
Digamos que eu tenha um componente universal para comentários que posso colocar em qualquer lugar da página. Possui apenas uma propriedade, algum tipo de identificador (por exemplo id de um artigo abaixo do qual os comentários são colocados), e todo o resto é tratado pelo próprio componente (carregar, adicionar, gerenciar comentários).
Eu realmente gosto da arquitetura Flux porque torna muitas coisas muito mais fáceis, e seus armazenamentos são perfeitos para compartilhar estado entre servidor e cliente. Assim que minha loja contendo comentários for inicializada, posso apenas serializá-la e enviá-la do servidor para o cliente, onde é facilmente restaurada.
A questão é qual é a melhor forma de povoar minha loja. Nos últimos dias, tenho pesquisado muito no Google e encontrei poucas estratégias, nenhuma das quais parecia muito boa, considerando o quanto esse recurso do React está sendo "promovido".
Na minha opinião, a maneira mais simples é preencher todas as minhas lojas antes que a renderização real comece. Isso significa algum lugar fora da hierarquia do componente (conectado ao meu roteador, por exemplo). O problema com essa abordagem é que eu teria que definir a estrutura da página duas vezes. Considere uma página mais complexa, por exemplo, uma página de blog com muitos componentes diferentes (postagem real do blog, comentários, postagens relacionadas, postagens mais recentes, fluxo do Twitter ...). Eu teria que projetar a estrutura da página usando componentes React e então em outro lugar eu teria que definir o processo de preencher cada loja necessária para esta página atual. Isso não parece uma boa solução para mim. Infelizmente, a maioria dos tutoriais isomórficos são projetados dessa maneira (por exemplo, este ótimo tutorial de fluxo ).
React-async . Essa abordagem é perfeita. Ele me permite simplesmente definir em uma função especial em cada componente como inicializar o estado (não importa se de forma síncrona ou assíncrona) e essas funções são chamadas conforme a hierarquia está sendo renderizada em HTML. Funciona de forma que um componente não seja renderizado até que o estado seja completamente inicializado. O problema é que requer fibrasque é, até onde eu entendo, uma extensão Node.js que altera o comportamento padrão do JavaScript. Embora goste muito do resultado, ainda me parece que, em vez de encontrar uma solução, mudamos as regras do jogo. E acho que não devemos ser forçados a fazer isso para usar esse recurso central do React.js. Também não tenho certeza sobre o suporte geral dessa solução. É possível usar o Fiber na hospedagem padrão da Web Node.js?
Eu estava pensando um pouco por conta própria. Eu realmente não pensei nos detalhes de implementação, mas a ideia geral é que eu estenderia os componentes de maneira semelhante ao React-async e, em seguida, chamaria repetidamente React.renderComponentToString () no componente raiz. Durante cada passagem, eu coletaria os retornos de chamada estendidos e depois os chamaria no e do passe para preencher as lojas. Eu repetiria esta etapa até que todos os armazenamentos exigidos pela hierarquia de componentes atual fossem preenchidos. Há muitas coisas a serem resolvidas e estou particularmente inseguro quanto ao desempenho.
Perdi alguma coisa? Existe outra abordagem / solução? No momento, estou pensando em adotar o método de reação assíncrona / fibras, mas não estou completamente certo sobre isso, conforme explicado no segundo ponto.
Discussão relacionada no GitHub . Aparentemente, não existe uma abordagem oficial ou mesmo solução. Talvez a verdadeira questão seja como os componentes React devem ser usados. Como camada de visualização simples (basicamente minha sugestão número um) ou como componentes reais independentes e autônomos?