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 !
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">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.
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é.
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.
- Installez-la en tant que dépendance de développement et commencez uniquement avec la version par défaut. paramètres.
- Utilisez l'option expérimentale
inlineCss
pour intégrer le CSS critique si cela fonctionne pour votre site. - 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.