React Streaming : Rendu Progressif côté Serveur pour une Expérience Utilisateur Optimisée

Dans le monde du développement web, offrir une expérience utilisateur rapide et réactive est primordial. Les utilisateurs s'attendent à ce que les sites web se chargent rapidement et soient interactifs sans délai. React, une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur, propose une technique puissante appelée Rendu Côté Serveur en Streaming (SSR) pour relever ce défi. Cet article explore le concept du React Streaming SSR, en examinant ses avantages, sa mise en œuvre et son impact sur les performances du site web et l'expérience utilisateur.

Qu'est-ce que le Rendu Côté Serveur (SSR) ?

Le rendu côté client (CSR) traditionnel implique que le navigateur télécharge les fichiers HTML, JavaScript et CSS, puis rend le contenu côté client. Bien que flexible, cette approche peut entraîner un délai de rendu initial, car l'utilisateur doit attendre que toutes les ressources soient téléchargées et que le JavaScript s'exécute avant de voir le contenu. Le SSR, quant à lui, rend les composants React sur le serveur et envoie le HTML entièrement rendu au client. Cela se traduit par un temps de chargement initial plus rapide, car le navigateur reçoit un HTML entièrement formé qui peut être affiché immédiatement.

Les Limites du SSR Traditionnel

Bien que le SSR traditionnel offre une amélioration significative par rapport au CSR, il présente ses propres limites. Dans le SSR traditionnel, l'intégralité de l'application doit être rendue sur le serveur avant que tout HTML ne soit envoyé au client. Cela peut constituer un goulot d'étranglement, en particulier pour les applications complexes comportant plusieurs composants et dépendances de données. Le Temps de Premier Octet (TTFB) peut être élevé, entraînant une lenteur perçue par l'utilisateur.

Entrez dans le React Streaming SSR : Une Approche Progressive

Le React Streaming SSR surmonte les limites du SSR traditionnel en adoptant une approche progressive. Au lieu d'attendre que toute l'application soit rendue sur le serveur, le Streaming SSR décompose le processus de rendu en petits morceaux et envoie ces morceaux au client au fur et à mesure qu'ils deviennent disponibles. Cela permet au navigateur de commencer à afficher le contenu beaucoup plus tôt, améliorant ainsi les performances perçues et réduisant le TTFB. Considérez cela comme un restaurant qui prépare votre repas par étapes : l'apéritif est servi en premier, puis le plat principal, et enfin le dessert, plutôt que d'attendre que tout le repas soit prêt d'un coup.

Avantages du React Streaming SSR

Le React Streaming SSR offre de nombreux avantages pour les performances des sites web et l'expérience utilisateur :

• Temps de Chargement Initial plus Rapide : En envoyant des morceaux de HTML au client, le navigateur peut commencer à afficher le contenu beaucoup plus tôt, ce qui se traduit par un temps de chargement perçu plus rapide et un engagement utilisateur accru.
• Amélioration du Temps de Premier Octet (TTFB) : Le Streaming SSR réduit le TTFB en envoyant le premier morceau de HTML dès qu'il est prêt, au lieu d'attendre que toute l'application soit rendue.
• Expérience Utilisateur Améliorée : Un temps de chargement initial plus rapide conduit à une meilleure expérience utilisateur, car les utilisateurs n'ont pas à attendre l'apparition du contenu.
• Meilleur SEO : Les moteurs de recherche peuvent explorer et indexer le contenu plus efficacement, car le HTML est facilement disponible sur le serveur.
• Hydratation Progressive : Le Streaming SSR permet l'hydratation progressive, où le code React côté client attache progressivement les écouteurs d'événements et rend l'application interactive au fur et à mesure que les morceaux de HTML sont diffusés.
• Utilisation Améliorée des Ressources : En décomposant le processus de rendu en petits morceaux, le Streaming SSR peut améliorer l'utilisation des ressources sur le serveur.

Comment Fonctionne le React Streaming SSR

Le React Streaming SSR utilise l'API ReactDOMServer.renderToPipeableStream() pour diffuser des morceaux de HTML au client. Cette API renvoie un flux lisible qui peut être redirigé vers l'objet de réponse du serveur. Voici une illustration simplifiée de son fonctionnement :

1. Le serveur reçoit une requête pour une page.
2. Le serveur appelle ReactDOMServer.renderToPipeableStream() pour rendre l'application React en un flux.
3. Le flux commence à émettre des morceaux de HTML à mesure que les composants React sont rendus.
4. Le serveur redirige le flux vers l'objet de réponse, envoyant les morceaux de HTML au client.
5. Le navigateur reçoit les morceaux de HTML et commence à les afficher progressivement.
6. Une fois tous les morceaux de HTML reçus, le navigateur hydrate l'application React, la rendant interactive.

Mise en Œuvre du React Streaming SSR

Pour mettre en œuvre le React Streaming SSR, vous aurez besoin d'un serveur Node.js et d'une application React. Voici un guide étape par étape :

1. Configuration d'un serveur Node.js : Créez un serveur Node.js en utilisant un framework comme Express ou Koa.
2. Installation de React et ReactDOMServer : Installez les packages react et react-dom.
3. Création d'une application React : Créez une application React avec les composants que vous souhaitez rendre sur le serveur.
4. Utilisation de ReactDOMServer.renderToPipeableStream() : Dans votre code serveur, utilisez l'API ReactDOMServer.renderToPipeableStream() pour rendre votre application React en un flux.
5. Redirection du flux vers l'objet de réponse : Redirigez le flux vers l'objet de réponse du serveur pour envoyer les morceaux de HTML au client.
6. Gestion des erreurs : Implémentez la gestion des erreurs pour attraper toutes les erreurs qui pourraient survenir pendant le processus de rendu.
7. Ajout d'une balise script pour l'hydratation : Incluez une balise script dans le HTML pour hydrater l'application React côté client.

Extrait de Code Exemple (Côté Serveur) :

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Votre composant React

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Point d'entrée côté client
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Désolé, une erreur est survenue
');
    }
  });

  setTimeout(abort, 10000); // Optionnel : Délai pour éviter une boucle infinie
});

app.use(express.static('public')); // Servir les actifs statiques

app.listen(port, () => {
  console.log(`Serveur écoutant sur http://localhost:${port}`);
});

Extrait de Code Exemple (Côté Client - `client.js`) :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Exemple de Composant d'Application React (App.js) :

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Données chargées avec succès !");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simuler un délai de chargement
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Bienvenue dans le Streaming SSR React !
      
Ceci est une démonstration du streaming SSR React.
      Chargement...
}>