Dans les deux cas, le code React Javascript est exécuté par Node.js (ou Deno, ou tout ce que vous utilisez). Mais ils produisent des choses différentes.
Ensuite, généralement via la configuration SSR, React est réexécuté côté client, s'exécutant sur le même code HTML rendu et effectuant des tâches telles que la connexion des gestionnaires de clics et l'ajout d'interactivité. Cela nécessite que le serveur et le client aient les mêmes données à restituer. Cela se fait en sérialisant les données sur le serveur en balises
En utilisant React à la fois sur le serveur et sur le client, le chargement initial de la page peut être SSR, puis les chargements de page suivants peuvent être côté client. Pour le chargement initial de la page, SSR est beaucoup plus rapide que le rendu côté client, qui est encore plus rapide une fois que toutes les ressources Javascript ont été téléchargées. Next.js applique cette stratégie par défaut lorsque vous utilisez SSR.
Composants du serveur
Les composants du serveur ne sont pas rendus sous forme de chaînes HTML.
Les « composants » de React sont des fonctions ou des classes qui renvoient des « éléments » de React. Un « élément » React est une représentation objet de l’arborescence à restituer. En mode de fonctionnement normal, ReactDOM prend ces objets éléments et les restitue dans le DOM.
Le composant serveur réagira
éléments au client. Sur le serveur, le composant s'exécute et génère des éléments, qui sont transmis au client (essentiellement au format JSON). Ces éléments sont ensuite rendus sur le client et placés dans le DOM.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dans les deux cas, le code React Javascript est exécuté par Node.js (ou Deno, ou tout ce que vous utilisez). Mais ils produisent des choses différentes.
Rendu côté serveur
Le rendu côté serveur se produit lorsque React utilise la méthode renderToString() de ReactDom et envoie cette chaîne HTML au client, comme n'importe quel serveur envoyant du HTML statique.
Ensuite, généralement via la configuration SSR, React est réexécuté côté client, s'exécutant sur le même code HTML rendu et effectuant des tâches telles que la connexion des gestionnaires de clics et l'ajout d'interactivité. Cela nécessite que le serveur et le client aient les mêmes données à restituer. Cela se fait en sérialisant les données sur le serveur en balisesEn utilisant React à la fois sur le serveur et sur le client, le chargement initial de la page peut être SSR, puis les chargements de page suivants peuvent être côté client. Pour le chargement initial de la page, SSR est beaucoup plus rapide que le rendu côté client, qui est encore plus rapide une fois que toutes les ressources Javascript ont été téléchargées. Next.js applique cette stratégie par défaut lorsque vous utilisez SSR.
Composants du serveur
Les composants du serveur ne sont pas rendus sous forme de chaînes HTML.
Les « composants » de React sont des fonctions ou des classes qui renvoient des « éléments » de React. Un « élément » React est une représentation objet de l’arborescence à restituer. En mode de fonctionnement normal, ReactDOM prend ces objets éléments et les restitue dans le DOM.
Le composant serveur réagiraéléments au client. Sur le serveur, le composant s'exécute et génère des éléments, qui sont transmis au client (essentiellement au format JSON). Ces éléments sont ensuite rendus sur le client et placés dans le DOM.