Comment créer une application isomorphique avec Reactjs ?

La création d’une application isomorphique (également appelée universelle) avec ReactJS implique que votre application peut être rendu aussi bien côté serveur que côté client. C’est-à-dire que votre application sera d’abord rendue côté serveur, puis «hydratée» par du JavaScript côté client pour pouvoir interagir avec elle.

Voici comment créer une application isomorphique avec ReactJS:

1. Initialisation de l’application: Créez une nouvelle application ReactJS à l’aide de `create-react-app` ou de toute autre méthode que vous préférez.

1. Installation des dépandances: Vous aurez besoin de quelques modules supplémentaires, vous pouvez les installer en utilisant npm ou yarn. Ces modules sont: `express`, `react-dom`.

1. Configuration du serveur: Créez un nouveau fichier appelé `server.js` à la racine du projet, ce fichier sera utilisé pour rendre les composants React côté serveur. Utilisez le framework Express pour gérer les routes et middleware. Utilisez `ReactDOMServer.renderToString` pour rendre le composant React en une chaîne HTML.

1. Hydratation: Dans le fichier `index.js` (point d’entrée côté client), utiliser `ReactDOM.hydrate` au lieu de `ReactDOM.render`. Cela permettra d’ajouter des gestionnaires d’événements aux éléments existants rendus par `ReactDOMServer.renderToString`.

1. La création des routes: Les routes doivent être partagées entre le client et le serveur. Vous pouvez utiliser `react-router` pour ce faire, elle supporte aussi bien le routage côté client que côté serveur.

1. Ajoutez les scripts côté serveur: Dans votre `package.json`, ajoutez un script pour démarrer le serveur.

Un exemple de configuration peut ressembler à ceci:

Dans `server.js`:

```
const express = require(‘express’);
const ReactDOMServer = require(‘react-dom/server’);
const App = require(‘./src/App’);

const app = express();

app.get(‘/*’, (req, res) => { const app = ReactDOMServer.renderToString(); res.send(app);
});

app.listen(3000, () => console.log(‘Server started’));
```

Dans `index.js`:

```
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;

ReactDOM.hydrate( , document.getElementById(‘root’)
);
```

N’oubliez pas que vous devrez probablement également gérer des choses comme le partage de l’état entre le serveur et le client, et le chargement des données avant le rendu du serveur.