Comment faire une application SSR avec Reactjs ?

SSR signifie “Server-Side Rendering”, qui est une technique populaire pour rendre une application monopage ou une application basée sur JavaScript côté serveur. SSR est une solution pour les problèmes de référencement communs aux applications monopages.

Étapes pour créer une application SSR avec Reactjs :

1. Configurer le Serveur de Rendu : Pour commencer, vous devez créer un serveur. Nous pouvons utiliser Express.js comme serveur. Commencez par installer Express et d’autres packages nécessaires :

```
npm install —save express react react-dom react-router
```

Ensuite, créez un serveur `server.js` :

```
const express = require(‘express’);
const app = express();
app.listen(3000, () => console.log(‘Server is running…’));
```

1. Configurer le Rendu Initial : Maintenant que nous avons configurez le serveur, il faut le faire afficher une page HTML. Nous devons transformer du JSX React en HTML à l’aide de `renderToString()` de `react-dom/server`.

```
const { renderToString } = require(‘react-dom/server’);
const React = require(‘react’);

const HTMLString = renderToString(

Hello World

);
app.get(‘/*’, (req, res) => { res.send(` <span class="caps">SSR</span> React App

${HTMLString}

`)
});
```

1. Configurer le Rendu Côté Client : Nous devons maintenant exécuter notre code React dans le navigateur, en créant une nouvelle application React pour gérer le rendu côté client.

```
// App.js
const React = require(‘react’);

function App() { return

Hello World from Server

}

module.exports = App;

// ReactDOM.hydrate instead of ReactDOM.render
const { hydrate } = require(‘react-dom’);
const App = require(‘./src/App’);

hydrate(, document.getElementById(‘app’));
```

1. Configurer le Routage et la Compilation Babel : Vous devrez ajouter le support pour le routage React afin d’obtenir différents contenus pour différentes routes. Vous aurez également besoin de Babel pour compiler votre code JSX en code JavaScript compréhensible par le navigateur.

```
npm install —save react-router-dom babel/core babel/preset-env @babel/preset-react babel-loader
```

1. Configurez Webpack : Webpack est utilisé pour empaqueter nos modules JavaScript pour l’usage côté client. Vous devez installer webpack et autres packages requis :

```
npm install —save webpack webpack-cli webpack-node-externals
```

Configurez votre fichier `webpack.config.js`.

1. Final Configuration : Enfin, vous devez modifier votre fichier `package.json` avec les scripts nécessaires pour démarrer et développer votre application.

Voici les différentes étapes pour créer une application SSR avec Reactjs. Cependant, pour les applications plus grandes et complexes, je vous conseille d’utiliser Next.js qui facilite la création d’applications SSR.