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éaffiche les pages de votre site dans des fichiers HTML statiques. Cela peut réduire le temps de First Paint dans votre application.

Voici une comparaison d'une même application avec et sans préaffichage chargé sur une connexion 3G et un appareil mobile simulés:

Remarque : react-snap n'est pas la seule bibliothèque pouvant préafficher du contenu HTML statique pour votre application React. react-snapshot est une autre alternative.

En quoi est-ce utile ?

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

Pour résoudre ce problème, de nombreux développeurs ont l'approche d'afficher l'application sur le serveur au lieu de la démarrer uniquement dans le navigateur. À chaque transition de page/route, le code HTML complet est généré sur le serveur et envoyé au navigateur, ce qui réduit le temps First Paint, mais s'accompagne d'un délai de chargement du premier octet plus lent.

Le prérendu est une autre technique moins complexe que le rendu du serveur, mais elle permet également d'améliorer les temps de First Paint dans votre application. Un navigateur sans interface utilisateur ou sans interface utilisateur permet de générer des fichiers HTML statiques de chaque route pendant la compilation. Ces fichiers peuvent ensuite être envoyés avec les bundles JavaScript nécessaires à l'application.

réagir-snap

react-snap utilise Puppeteer pour créer des fichiers HTML préaffichés de différents itinéraires dans votre application. Pour commencer, installez-le en tant que dépendance de développement:

npm install --save-dev react-snap

Ajoutez ensuite un script postbuild dans package.json:

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

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

Remarque : npm prend en charge les commandes pre et post pour les scripts principaux et arbitraires qui s'exécutent toujours directement avant ou après le script d'origine, respectivement. Pour en savoir plus, consultez la documentation npm.

La dernière chose à faire est de modifier le mode de démarrage de l'application. Modifiez le fichier src/index.js comme suit:

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 directement l'élément React racine dans le DOM, cette méthode vérifie si des nœuds enfants sont déjà présents afin de déterminer si le contenu HTML a été préaffiché (ou affiché sur le serveur). Dans ce cas, utilisez ReactDOM.hydrate à la place pour associer des écouteurs d'événements au code HTML déjà créé au lieu de le recréer.

La compilation de l'application génère désormais des fichiers HTML statiques en tant que charges utiles pour chaque route explorée. Pour voir à quoi ressemble la charge utile HTML, cliquez sur l'URL de la requête HTML, puis sur l'onglet Aperçus dans les outils pour les développeurs Chrome.

Remarque : react-snap peut être utilisé pour d'autres frameworks que React! Cela inclut Vue et Preact. Pour obtenir des instructions supplémentaires à ce sujet, consultez le fichier README de react-snap.

Flash de contenu sans style

Bien que le code HTML statique s'affiche désormais presque immédiatement, il n'est toujours pas stylisé par défaut, ce qui peut entraîner l'affichage d'un "flash de contenu sans style" (FOUC). Cela peut être particulièrement perceptible si vous utilisez une bibliothèque CSS-in-JS pour générer des sélecteurs, car le bundle JavaScript devra terminer l'exécution avant que des styles puissent être appliqués.

Pour éviter cela, le CSS critique, c'est-à-dire la quantité minimale de CSS nécessaire pour afficher la page initiale, peut être directement intégré à l'élément <head> du document HTML. react-snap utilise en arrière-plan une autre bibliothèque tierce, minimalcss, afin d'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é.

Attention : L'option inlineCSS est encore au stade expérimental. Il est utile de vérifier que les styles sont correctement appliqués à vos itinéraires.

Conclusion

Si vous ne définissez pas d'itinéraires de rendu côté serveur dans votre application, utilisez react-snap pour préafficher le code HTML statique aux utilisateurs.

1. Installez-le 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 code CSS essentiel si elle fonctionne pour votre site.
3. Si vous utilisez le fractionnement de code au niveau d'un composant dans des routes, veillez à ne pas préafficher un état de chargement pour vos utilisateurs. Le fichier README react-snap aborde ce sujet plus en détail.