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 entreprise tierce qui précharge les pages de votre site dans des fichiers HTML statiques. Cela peut améliorer First Paint fois dans votre application.

Voici une comparaison d'une même application avec et sans préaffichage lors d'une simulation de connexion 3G et d'appareil mobile:

<ph type="x-smartling-placeholder">
</ph> 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 des applications monopages volumineuses est l'utilisateur doit attendre que le ou les groupes JavaScript qui composent le site soient terminés télécharger avant de pouvoir voir le vrai contenu. Plus les groupes sont grands, plus longtemps, l’utilisateur devra attendre.

Pour résoudre ce problème, de nombreux développeurs adoptent l'approche consistant à afficher l'application sur le serveur au lieu de le démarrer uniquement sur le navigateur. Chaque de page ou de routage, le code HTML complet est généré sur le serveur et envoyé à le navigateur, ce qui réduit le temps de chargement des pages le délai avant le premier octet.

Le préaffichage est une technique distincte, moins complexe que celle mais permet aussi d'améliorer les délais First Paint application. Un navigateur sans interface utilisateur (headless) est utilisé. pour générer des fichiers HTML statiques de chaque itinéraire pendant la création des compilations. Ces fichiers peuvent ensuite être expédiés avec les kits JavaScript requis pour application.

CANNOT TRANSLATE

react-snap utilise Puppeteer pour créer des fichiers HTML prérendus de différentes routes dans votre application. À 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"
}

Cela exécuterait automatiquement la commande react-snap chaque fois qu'une nouvelle compilation de les applications créées (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, ce qui 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). Dans ce cas, ReactDOM.hydrate est utilisé à la place pour joindre l'événement. les écouteurs 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 par exemple, en cliquant sur l'URL de la requête HTML, puis sur le bouton 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)

Même si 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 contenu" (FOUC). Cela peut être particulièrement visible si vous utilisez un CSS-in-JS pour générer des sélecteurs, car le bundle JavaScript devra se terminer avant d'appliquer un style.

Pour éviter cela, le CSS critique ou la quantité minimale de CSS nécessaires à l'affichage de la page initiale, peut être intégré directement à <head> du document HTML. react-snap utilise une autre bibliothèque tierce minimalcss, pour extraire CSS essentiel pour différentes routes. Vous pouvez l'activer en spécifiant le dans le 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 des utilisateurs.

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