les avantages et les inconvénients de réagir ssr avec la division du code et maintenant

Question

Je suis un peu confus quant aux avantages du fractionnement de code ssr et de code et du fractionnement de code effectué uniquement sur le client.

Mes pensées sont que le rendu de la page par le serveur en premier conduira à une meilleure expérience sans que tout le javascript ait à être analysé puis rendu par le serveur.

Je ne comprends pas comment la division de code s'intègre dans le modèle RSR. Est-ce que SSR rend le premier résultat, puis la division de code est ensuite effectuée sur le client?

React.Lazy tient à préciser que react.client est entièrement effectué sur le client. En quoi cela diffère-t-il de la division du code sur le serveur? Est-ce que si vous allez sur une route spécifique, vous récupérez ce morceau pour le premier rendu?

Je crois comprendre que React.Lazy est entièrement utilisé par les clients et ils ont bien tenu à le dire. En quoi cela diffère-t-il si cela est fait sur le serveur?.

La séparation de code présente-t-elle un réel avantage? N'a-t-il pas simplement ajouté de la complexité?

Divyanshu Maithani · Accepted Answer

tl; dr

Selon votre cas d'utilisation, vous pouvez utiliser uniquement le SSR, uniquement le fractionnement de code ou combiner les deux à la demande.

Mérites de la RSS

Meilleur référencement puisque les robots de recherche ont des balises pour travailler (et ne dépendent pas nécessairement de l'exécution de javascript) pour l'indexation.
Rendu initial plus rapide puisque le balisage est envoyé depuis le serveur, le navigateur n'a pas besoin d'attendre l'exécution du javascript pour le rendre. (Bien que le balisage manquera toujours d'interactivité jusqu'à ce que Rea soit hydraté du côté client).
Fournit les CSS critiques en premier. Le CSS critique pour le rendu de la page initiale peut être aligné, meilleure UX puisque le balisage chargé aura déjà des styles prêts.
Fractionnement plus simple de la route. SSR imo simplifie le raisonnement sur le fractionnement de route de votre application. Par exemple, vous pouvez avoir différentes pages pour /about et /home que vous pouvez router par division pour réduire la taille de l'ensemble (et précharger d'autres routes du côté client si nécessaire).

Combinaison de code divisant vos composants et votre SSR

Il ne sera peut-être pas nécessaire que votre serveur rende votre page entière. Par exemple, considérons que votre page d’accueil (que vous souhaitez rendre au serveur) inclut un composant Chat afin que les utilisateurs puissent vous poser directement des questions.

Si ce composant est volumineux, vous pouvez décider de ne pas le restituer sur le serveur afin que l'utilisateur puisse d'abord obtenir les éléments les plus importants de la page. Cela réduirait votre chargement initial de page en divisant par code ce composant dans votre composant page d'accueil.

Lorsque le navigateur a analysé le balisage, il charge votre composant Chat après le bundle principal. De cette façon, vous pouvez identifier et garder la taille de vos paquets en échec.

Seulement en utilisant le partage de code

C’est un excellent moyen de créer votre application imo si les avantages du SSR ne vous intéressent pas.

Par exemple, si votre application est un tableau de bord d'utilisateurs authentifiés, il peut être préférable de ne pas vous préoccuper du tout de la SSR et de simplement diviser le code en code par votre application. Notez également que le rendu de votre application par le serveur prendra plus de temps pour envoyer une réponse sur le serveur (au lieu des API simples REST), car le balisage doit être généré.

Venir à vos questions:

Je ne comprends pas comment la division de code s'intègre dans le modèle RSS, est-ce que SSR rend le premier résultat, puis la division de code est ensuite effectuée sur le client?

Oui, un peu. Le navigateur reçoit la charge initiale du serveur, après que ce client se charge de charger les bits nécessaires. Maintenant, vous pouvez décider de précharger vos composants côté serveur et de tout envoyer également (veuillez vérifier react-loadable que je mentionne à la fin de cette réponse).

En quoi cela diffère-t-il de la division du code sur le serveur? Est-ce que si vous allez sur une route spécifique, vous récupérez ce morceau pour le premier rendu?

lazy est simplement une API plus propre prenant en charge Suspense pour le fractionnement de code. Idéalement, lors du premier chargement d'un itinéraire, vous devez restituer le balisage initial au serveur, puis laisser le client se charger du chargement des bits suivants et du routage. Imo Next.js le fait vraiment bien.

En quoi cela diffère-t-il si cela est fait sur le serveur?.

Vous pouvez précharger tous vos composants ou uniquement les bits nécessaires. Veuillez vérifier la section Combinaison de code divisant vos composants et la section SSR.

La séparation de code présente-t-elle un réel avantage? N'a-t-il pas simplement ajouté de la complexité?

Tout a son propre compromis ici imo. Comme je l'ai mentionné dans la section Uniquement en utilisant la division de code, il est tout à fait correct de n'utiliser que la division de code si votre cas d'utilisation ne nécessite pas le mérite de la SSR.

Remarque

Actuellement lazy (dans React v16.6.1) ne prend pas complètement en charge le SSR. Vous voudrez peut-être consulter react-loadable pour gérer les cas dans lesquels vous souhaitez précharger les composants côté serveur.

Joaquin Timerman · Answer

Rendu côté serveur

Utile pour les pages de sujets SEO

Lorsque la page est demandée, le serveur traite la demande et crée la page HTML finale qui est ensuite transmise au client.

Cette approche privilégie pages de contenu SEO puisque le contenu final est disponible dans la première demande, les moteurs de recherche peuvent donc l'indexer.

Code-splitting

Utile pour les pages où le contenu est chargé à différents moments

Si tout votre site Web utilise trop de ressources à différents temps de chargement, le fractionnement de code est la technique à utiliser pour optimiser les performances. Au lieu de charger toutes les ressources lors de la première requête, vous retardez le chargement jusqu'à ce que la ressource soit nécessaire.

Mettre en œuvre les deux ensemble

Étant donné que vous avez un site Web avec beaucoup de ressources et que vous souhaitez afficher l'intégralité de la page demandée avant de la traiter au client, vous pouvez implémenter ces deux techniques.

React.lazy ()

React.lazy () a été implémenté dans React v16.6.0 en tant que nouvelle méthode d’utilisation du composant Suspense pour effectuer le fractionnement du code.

Remarque

This feature is not yet available for server-side rendering. Suspense support will be added in a later release.

Pour résumer

Suspense + React.lazy () ne prend pas encore en charge le rendu côté serveur.
Le rendu côté serveur + la scission du code permettent au client d’obtenir la page rendue demandée sans ressources supplémentaires qui ne sont pas nécessaires pour le moment.

Dani Shulman · Answer

Vous posez beaucoup de questions ici. A mon avis, le fractionnement de code est utile pour les applications plus grandes, où votre paquet construit est trop volumineux pour une charge unique. Le rendu côté serveur est utile pour les styles de page de destination moins volumineux, ce qui réduit le temps de calcul dans le navigateur.