Comment générer des sites Web statiques avec React
React est souvent utilisé pour créer des applications Web dynamiques qui répondent aux entrées des utilisateurs, mais il est également très utile pour les sites statiques. Les sites React peuvent même être prégénérés pendant le processus de construction pour économiser de précieuses millisecondes lors du chargement de la page.
Qu'est-ce qu'un site statique?
Les sites statiques sont du HTML qui est livré directement à l'utilisateur, plutôt que de générer la page pour chaque demande. Par exemple, cet article que vous lisez a été généré dynamiquement par WordPress parlant à une base de données, ce qui a provoqué le rendu du code PHP par des paragraphes HTML.
React est un framework populaire utilisé pour créer des applications Web dynamiques. Il divise le HTML en fichiers de composants en utilisant un format appelé JSX et utilise JavaScript pour rendre les pages de manière dynamique. C'est très utile, mais il y a un problème: les temps de chargement sont beaucoup plus longs que les pages de base sans JavaScript. React fonctionne en chargeant un bundle.js fichier sur le client, qui restitue la page, mais cela prend du temps. Les temps de chargement des pages affectent directement l'expérience utilisateur, et sur des sites importants comme les pages de destination, chaque milliseconde peut affecter directement les revenus.
Pour résoudre ce problème, React dispose de quelques outils tiers pour générer des sites statiques. L’idée de base est que, plutôt que le rendu côté client, il effectue le rendu sur la machine de développement pendant le processus de construction, économisant ainsi les temps de chargement. Vous prenez ensuite le code HTML de ce site statique et le diffusez comme une page Web ordinaire.
La question est alors la suivante: pourquoi se donner la peine de faire tous ces efforts pour utiliser un framework JavaScript à part entière comme React, pour une application non Web qui ne changera pas? Eh bien, même si la page ne change pas à la demande de chaque utilisateur, les pages Web ne restent généralement pas les mêmes au fil du temps. La plupart des entreprises mettront fréquemment à jour leurs sites, comme chaque fois que vous lancez un nouveau produit, lancez une promotion ou souhaitez simplement rafraîchir les choses pour un nouveau look.
L'avantage offert par React est une mise à jour de code beaucoup plus facile que de ne pas utiliser de framework. Si vous ne faites que créer votre site avec du HTML et du CSS, vous devrez faire plus de travail pour apporter de petites modifications de style, et vous devrez faire beaucoup de travail pour apporter des modifications importantes aux modèles. Avec React, même si vous utilisez le même composant plusieurs fois, il vous suffit de mettre à jour le fichier d'un composant, et il appliquera les modifications partout où vous l'utiliserez dans votre projet.
Bien sûr, ce n'est pas pour tout le monde, car React nécessite un peu de connaissances JavaScript pour être utilisé correctement. Alternativement, si vous cherchez simplement à créer un site Web simple qui ne sera pas difficile à mettre à jour, vous devriez vous pencher sur un système de gestion de contenu (CMS) comme SquareSpace ou même WordPress.
Il existe quelques frameworks «React Static» concurrents, qui apportent souvent des fonctionnalités supplémentaires et un contrôle supplémentaire utiles pour les grandes applications de production. Gatsby est très populaire, tout comme Next.js. Pour ce guide, nous utiliserons react-static, qui fournit simplement un moyen simple et léger de générer des sites statiques, et est facile à utiliser pour les débutants.
Une remarque avant de commencer: parce que le rendu se produit tout du côté client (sauf si vous utilisez le rendu côté serveur), React est techniquement «Statique» en ce qui concerne votre serveur Web. Les fichiers que vous hébergez sur votre serveur Web ne changent pas en réponse aux demandes comme le ferait PHP. Cependant, c'est en grande partie une technicité, car les pages sont toujours rendues dynamiquement, juste sur le client.
Utilisation de React-Static
react-static est assez facile à utiliser. Tout d'abord, vous devez installer Node.JS et NPM sur votre ordinateur. react-static est simplement un package NPM, que vous pouvez installer globalement:
npm i -g react-static
Ensuite, vous pouvez exécuter l'outil de création de projet:
react-static create
Donnez un nom à votre projet et sélectionnez le modèle à utiliser. L'option «basique» est JS standard, mais il existe également une variante TypeScript, que beaucoup de gens préfèrent au JavaScript standard pour les projets plus importants. Si vous êtes plus familier avec les langages à typage statique, choisissez TypeScript, sinon, sélectionnez "basique".
Cela prendra une seconde pour installer certaines dépendances NPM et configurer le projet. Les principaux fichiers sont en /src/, avec index.jsx étant la racine même de l'application, et App.jsx étant le routeur principal qui contrôle les pages que l'utilisateur voit. Dans /dist/, vous allez affiner la sortie de la compilation (après l'avoir exécutée) que vous placerez sur votre serveur Web.
Dans App.jsx, vous trouverez le début du rendu. le Router composant rend chaque page dans /src/pages/, en fonction de l'URL. La configuration pour cela est gérée dans static.config.js.
Vous pouvez en fait avoir des routes dynamiques dans votre application – n’importe quelle route configurée avec le
Pour lancer l'application, vous pouvez démarrer le serveur de développement:
npm run start
Pour exécuter une compilation à déployer sur votre serveur Web, faites run build:
npm run build
Les fichiers sortis seront au format /dist/. Vous trouverez bien sûr que chaque page HTML doit être rendue à l'avance, toutes les pages dynamiques chargeant encore des binaires React.
