L'un des plus grands avantages de React.js est censé être le rendu côté serveur . Le problème est que la fonction clé React.renderComponentToString()
est synchrone, ce qui rend impossible le chargement de données asynchrones lorsque la hiérarchie des composants est rendue sur le serveur.
Disons que j'ai un composant universel pour les commentaires que je peux déposer à peu près n'importe où sur la page. Il n'a qu'une seule propriété, une sorte d'identifiant (par exemple l'id d'un article sous lequel les commentaires sont placés), et tout le reste est géré par le composant lui-même (chargement, ajout, gestion des commentaires).
J'aime beaucoup l' architecture Flux car elle facilite beaucoup de choses et ses magasins sont parfaits pour partager l'état entre le serveur et le client. Une fois que mon magasin contenant des commentaires est initialisé, je peux simplement le sérialiser et l'envoyer du serveur au client où il est facilement restauré.
La question est de savoir quelle est la meilleure façon de peupler mon magasin. Au cours des derniers jours, j'ai beaucoup cherché sur Google et je suis tombé sur quelques stratégies, dont aucune ne me paraissait vraiment bonne compte tenu de la "promotion" de cette fonctionnalité de React.
À mon avis, le moyen le plus simple est de peupler tous mes magasins avant le début du rendu réel. Cela signifie quelque part en dehors de la hiérarchie des composants (accroché à mon routeur par exemple). Le problème avec cette approche est que je devrais définir à peu près deux fois la structure de la page. Prenons une page plus complexe, par exemple une page de blog avec de nombreux composants différents (article de blog réel, commentaires, articles associés, articles les plus récents, flux Twitter ...). Je devrais concevoir la structure de la page à l'aide des composants React, puis ailleurs, je devrais définir le processus de remplissage de chaque magasin requis pour cette page actuelle. Cela ne me semble pas être une bonne solution. Malheureusement, la plupart des didacticiels isomorphes sont conçus de cette façon (par exemple ce grand didacticiel sur les flux ).
Réagissez-async . Cette approche est parfaite. Cela me permet simplement de définir dans une fonction spéciale dans chaque composant comment initialiser l'état (peu importe que ce soit de manière synchrone ou asynchrone) et ces fonctions sont appelées lorsque la hiérarchie est rendue en HTML. Cela fonctionne de telle sorte qu'un composant n'est pas rendu tant que l'état n'est pas complètement initialisé. Le problème est qu'il nécessite des fibresqui est, pour autant que je sache, une extension Node.js qui modifie le comportement JavaScript standard. Bien que j'aime beaucoup le résultat, il me semble toujours qu'au lieu de trouver une solution, nous avons changé les règles du jeu. Et je pense que nous ne devrions pas être obligés de faire cela pour utiliser cette fonctionnalité de base de React.js. Je ne suis pas non plus sûr du support général de cette solution. Est-il possible d'utiliser la fibre sur l'hébergement Web standard Node.js?
Je réfléchissais un peu par moi-même. Je n'ai pas vraiment réfléchi aux détails de l'implémentation, mais l'idée générale est que j'étendrais les composants de la même manière que React-async, puis j'appellerais à plusieurs reprises React.renderComponentToString () sur le composant racine. Au cours de chaque passage, je collectais les rappels étendus, puis je les appelais au et du passage pour peupler les magasins. Je répéterais cette étape jusqu'à ce que tous les magasins requis par la hiérarchie actuelle des composants soient remplis. Il y a beaucoup de choses à résoudre et je ne suis particulièrement pas sûr de la performance.
Ai-je oublié quelque chose? Existe-t-il une autre approche / solution? En ce moment, je pense aller dans le sens de la réaction asynchrone / fibres mais je n'en suis pas complètement sûr, comme expliqué dans le deuxième point.
Discussion connexe sur GitHub . Apparemment, il n'y a pas d'approche officielle ni même de solution. Peut-être que la vraie question est de savoir comment les composants React sont destinés à être utilisés. Comme une simple couche de vue (à peu près ma suggestion numéro un) ou comme de vrais composants indépendants et autonomes?