web-dev-qa-db-fra.com

Rendu côté serveur ReactJS vs rendu côté client

J’ai juste commencé à étudier ReactJS et j’ai constaté qu’il vous donne deux façons de rendre des pages: côté serveur et côté client. Mais je ne comprends pas comment l'utiliser ensemble. S'agit-il de 2 manières différentes de construire l'application, ou peuvent-elles être utilisées ensemble? 

Si nous pouvons l'utiliser ensemble, comment le faire - devons-nous dupliquer les mêmes éléments côté serveur et côté client? Ou pouvons-nous simplement construire les parties statiques de notre application sur le serveur et les parties dynamiques côté client, sans aucune connexion au côté serveur déjà pré-rendue?

javascriptnode.jsclient-serverreactjs
87
Simcha

Pour un site Web/une application Web donnés, vous pouvez utiliser réagir soit côté client, côté serveur ou les deux.

Côté client

Ici, vous exécutez complètement ReactJS sur le navigateur. C'est la configuration la plus simple et comprend la plupart des exemples (y compris ceux sur http://reactjs.org ). Le code HTML initial rendu par le serveur est un espace réservé et l'interface utilisateur entière est restituée dans le navigateur une fois tous vos scripts chargés.

Du côté serveur

Pensez à ReactJS comme un moteur de templates côté serveur (comme du jade, du guidon, etc.). Le code HTML rendu par le serveur contient l'interface utilisateur telle qu'elle devrait être et vous n'attendez pas que des scripts soient chargés. Votre page peut être indexée par un moteur de recherche (s'il n'exécute pas de javascript).

Puisque l'interface utilisateur est rendue sur le serveur, aucun de vos gestionnaires d'événements ne fonctionnerait et il n'y a pas d'interactivité (vous avez une page statique).

Tous les deux

Ici, le rendu initial est sur le serveur. Par conséquent, le code HTML reçu par le navigateur a l'interface utilisateur comme il se doit. Une fois les scripts chargés, le DOM virtuel est à nouveau rendu pour configurer les gestionnaires d'événements de vos composants.

Ici, vous devez vous assurer de re-restituer exactement le même DOM virtuel (composant ReactJS racine) avec le même props que celui que vous utilisiez auparavant sur le serveur. Sinon, ReactJS se plaindra que les DOM virtuels côté serveur et côté client ne correspondent pas.

Puisque ReactJS diffère les DOM virtuels entre les restitutions, le DOM réel n'est pas muté. Seuls les gestionnaires d'événements sont liés aux éléments DOM réels.

88
Gautham Badhrinathan

Source de l'image: Blog sur l'ingénierie de Walmart Labs

 SSR

 CSR

NB: SSR (rendu côté serveur), CSR (rendu côté client).

La principale différence est qu'avec le SSR, la réponse des serveurs au navigateur du client inclut le code HTML de la page à restituer . Il est également important de noter que, même avec le SSR, la page s'affiche plus rapidement. La page ne sera pas prête pour l'interaction de l'utilisateur jusqu'à ce que les fichiers JS aient été téléchargés et que le navigateur ait exécuté React.

Un inconvénient est que le SSR TTFB (Time to First Byte) peut être légèrement plus long. Cela se comprend, car la création du document HTML par le serveur prend un certain temps, ce qui augmente la taille de la réponse du serveur.

26
JSON C11

En fait, je me demandais pas mal de recherches et même si la réponse que vous recherchez a été donnée dans les commentaires, mais j'estime qu'elle devrait être plus visible, c'est pourquoi j'écris ce post (que je mettrai à jour dès que je pourrai meilleure solution car je trouve la solution architecturale au moins douteuse).

Vous devez écrire vos composants avec les deux sens à l’esprit, ce qui vous permet de placer les commutateurs if partout pour déterminer si vous êtes sur le client ou sur le serveur, puis effectuez une requête de base de données (ou toute autre action appropriée sur le serveur) ou une autre solution. Appel REST (sur le client). Ensuite, vous devez écrire les points de terminaison qui génèrent vos données et les exposent au client, et le tour est joué.

Encore une fois, heureux d'apprendre une solution plus propre.

3
SGD

S'agit-il de 2 manières différentes de construire l'application, ou peuvent-elles être utilisées ensemble?

Ils peuvent être utilisés ensemble.

Si nous pouvons l’utiliser ensemble, comment le faire - devons-nous dupliquer le mêmes éléments côté serveur et côté client? Ou pouvons-nous simplement construire les parties statiques de notre application sur le serveur, et le parties dynamiques côté client, sans aucune connexion au serveur côté qui était déjà pré-rendu?

Il est préférable que la même disposition soit rendue afin d'éviter les opérations de refusion et de repeinte, moins de scintillement/clignotement, votre page sera plus lisse. Cependant, ce n'est pas une limitation. Vous pouvez très bien mettre en cache le code html SSR (quelque chose que Electrode fait pour réduire le temps de réponse)/envoyer un code html statique qui est écrasé par le représentant du client.

Si vous ne faites que commencer avec la SSR, je vous recommanderais de commencer simplement, la SSR peut devenir très complexe très rapidement. Construire du HTML sur le serveur signifie perdre l’accès à des objets tels que window, document (vous en avez sur le client), perdre la possibilité d’incorporer des opérations asynchrones (prêtes à l’emploi), et généralement beaucoup de modifications de code pour rendre votre code compatible SSR ( puisque vous devrez utiliser webpack pour emballer votre bundle.js). Des choses comme les importations CSS, nécessitent vs importation commencent soudainement à vous mordre (ce n'est pas le cas dans l'application React par défaut sans WebPack).

Le schéma général de la SSR ressemble à ceci. Un serveur Express servant des demandes:

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

Ma suggestion aux personnes commençant par SSR serait de servir du HTML statique. Vous pouvez obtenir le code HTML statique en exécutant l'application CSR SPA:

document.getElementById('root').innerHTML

N'oubliez pas que les seules raisons d'utiliser le SSR devraient être:

  1. SEO
  2. Charges plus rapides (je déconseillerais cela)

Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

0
Kira