Pré-rendu des routes avec réactif-snap

Vous n'utilisez pas le rendu côté serveur, mais souhaitez tout de même améliorer les performances de votre site React ? Essayez le prérendu !

Houssein Djirdeh

react-snap est une bibliothèque tierce qui précharge les pages de votre site dans des fichiers HTML statiques. Cela peut améliorer les temps de First Paint dans votre application.

Voici une comparaison de la même application avec et sans prérendu, chargée sur une connexion 3G simulée et sur un appareil mobile:

Une comparaison avec le chargement côte à côte. La version utilisant le prérendu se charge 4,2 secondes plus vite.

En quoi est-ce utile ?

Le principal problème de performances avec les applications volumineuses sur une seule page est que l'utilisateur doit attendre la fin du téléchargement du ou des bundles JavaScript qui composent le site avant de pouvoir consulter du contenu réel. Plus les lots sont grands, plus l'utilisateur devra attendre.

Pour résoudre ce problème, de nombreux développeurs adoptent l'approche qui consiste à afficher l'application sur le serveur au lieu de la démarrer uniquement dans le navigateur. À chaque transition de page ou de route, le code HTML complet est généré sur le serveur et envoyé au navigateur, ce qui réduit les délais First Paint, mais a un coût plus lent.

Le prérendu est une technique distincte, moins complexe que le rendu sur serveur, mais qui permet également d'améliorer les délais First Paint dans votre application. Un navigateur sans interface utilisateur (headless) est utilisé pour générer des fichiers HTML statiques de chaque route pendant la création. Ces fichiers peuvent ensuite être envoyés avec les bundles JavaScript nécessaires à l'application.

CANNOT TRANSLATE

react-snap utilise Puppeteer pour créer des fichiers HTML prérendus de différentes routes dans votre application. Pour commencer, installez-la en tant que dépendance de développement:

npm install --save-dev react-snap

Ajoutez ensuite un script postbuild dans votre package.json:

"scripts": {
  //...
  "postbuild": "react-snap"
}

La commande react-snap est alors exécutée automatiquement chaque fois qu'une nouvelle compilation des applications est créée (npm build).

La dernière chose à faire est de modifier le mode de démarrage de l'application. Remplacez le fichier src/index.js par le code suivant:

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

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Au lieu d'utiliser uniquement ReactDOM.render pour afficher l'élément React racine directement dans le DOM, cette méthode vérifie si des nœuds enfants sont déjà présents pour déterminer si le contenu HTML a été préaffiché (ou affiché sur le serveur). Si tel est le cas, ReactDOM.hydrate est utilisé à la place pour associer des écouteurs d'événements au code HTML déjà créé au lieu de le recréer.

La création de l'application va maintenant générer des fichiers HTML statiques en tant que charges utiles pour chaque itinéraire exploré. Vous pouvez voir à quoi ressemble la charge utile HTML en cliquant sur l'URL de la requête HTML, puis sur l'onglet Aperçus dans les outils pour les développeurs Chrome.

Une comparaison avant/après. Le plan post-séquence montre que le contenu s&#39;est affiché.

Contenu sans style (Flash)

Bien que le code HTML statique s'affiche désormais presque immédiatement, il reste sans style par défaut, ce qui peut entraîner l'affichage d'un "Flash de contenu sans style" (FOUC). Cela peut s'avérer particulièrement visible si vous utilisez une bibliothèque CSS-in-JS pour générer des sélecteurs, car le bundle JavaScript doit terminer l'exécution avant de pouvoir appliquer des styles.

Pour éviter cela, le code CSS essentiel, c'est-à-dire la quantité minimale de CSS nécessaire pour que la page initiale s'affiche, peut être directement intégré à l'élément <head> du document HTML. react-snap utilise une autre bibliothèque tierce, minimalcss, pour extraire les CSS critiques pour différentes routes. Vous pouvez l'activer en spécifiant ce qui suit dans votre fichier package.json:

"reactSnap": {
  "inlineCss": true
}

L'aperçu de la réponse dans les outils pour les développeurs Chrome affiche désormais la page stylisée avec le CSS essentiel intégré.

Une comparaison avant/après. Le plan post-clic montre que le contenu s&#39;est affiché et qu&#39;il est stylisé grâce au code CSS essentiel intégré.

Conclusion

Si vous n'utilisez pas de routes de rendu côté serveur dans votre application, utilisez react-snap pour préafficher du code HTML statique auprès de vos utilisateurs.

  1. Installez-la en tant que dépendance de développement et commencez uniquement avec les paramètres par défaut.
  2. Utilisez l'option expérimentale inlineCss pour intégrer le CSS critique si votre site fonctionne.
  3. Si vous utilisez le fractionnement de code au niveau d'un composant dans une route, veillez à ne pas préafficher un état de chargement pour vos utilisateurs. Le fichier react-snap README aborde ce point plus en détail.