Comment faire un rendu côté serveur avec Reactjs ?

Le rendu côté serveur (SSR, Server Side Rendering) est une méthode populaire pour rendre des applications React plus rapidement. Au lieu de servir un fichier HTML vide avec un fichier JavaScript lié (où tout le contenu de l’application est injecté dans le fichier HTML via le navigateur), le serveur génère le HTML avec le contenu déjà présent et envoie cette page pré-rendue au client. Cela signifie que le navigateur peut commencer à afficher la page pendant qu’il télécharge le JavaScript nécessaire pour rendre l’application interactive.

Voici un exemple de base de la façon dont vous pouvez implémenter le rendu côté serveur avec React :

1. Premièrement, installez les packages nécessaires :

\`\`\` npm install express react react-dom \`\`\`

1. Ensuite, créez un fichier pour votre serveur Express, par exemple “server.js”. Dans ce fichier, vous pouvez afficher une application React de base en utilisant le package react-dom/server, qui a une méthode appelée renderToString. Cette méthode prend un élément React, le rend en HTML et le retourne comme une chaîne :

\`\`\`javascript const express = require(‘express’); const React = require(‘react’); const ReactDOMServer = require(‘react-dom/server’) const app = express(); const App = () => { return React.createElement(‘div’, null, ‘Hello World’); }; app.get(‘/’, (req, res) => { const htmlStr = ReactDOMServer.renderToString(React.createElement(App)); res.send(\` My <span class="caps">SSR</span> React App

${htmlStr}

\`); }); app.listen(3000, () => console.log(‘Server is running…’)); \`\`\` Cet exemple est très simplifié. Dans une application réelle, vous devez gérer des choses comme la synchronisation de l’état initial entre le serveur et le client, le routage, le chargement différé des données, etc. Il existe des bibliothèques comme Next.js qui simplifient cela.

1. Pour démarrer le serveur, utilisez la commande :

```
node server.js
```
Vous pouvez maintenant accéder à votre application depuis un navigateur web à l’adresse localhost:3000.

Notez que ce service sera très basique et que dans une application réelle, vous voudrez probablement utiliser un système comme Redux pour gérer l’état de l’application et React Router pour la gestion des routes.