React est souvent utilisé pour créer des applications Web dynamiques qui répondent aux entrées des utilisateurs, mais c'est aussi 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 code 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 êtes en train de lire a été généré dynamiquement par WordPress parlant à une base de données, ce qui a amené le code PHP à restituer des paragraphes de HTML.
React est un framework populaire utilisé pour créer des applications Web dynamiques. Il divise le HTML en fichiers de composants à l'aide d'un format appelé JSX et utilise JavaScript pour restituer 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 fichier bundle.js sur le client, ce qui affiche 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 de rendre du côté client, il est rendu sur la machine du développeur pendant le processus de construction, économisant ainsi sur les temps de chargement. Vous prenez ensuite le code HTML de ce site statique et le servez comme une page Web normale.
La question est alors de savoir pourquoi s'embêter à faire tous ces efforts pour utiliser un framework JavaScript à part entière comme React, pour une application non Web qui ne va pas changer ? Eh bien, même si la page ne change pas pour chaque demande d'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, par exemple chaque fois que vous lancez un nouveau produit, organisez une promotion ou souhaitez simplement actualiser les éléments pour un nouveau look.
Publicité
L'avantage offert par React est une mise à jour du code beaucoup plus facile par rapport à l'absence de framework. Si vous ne faites que créer votre site avec HTML et 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 plusieurs fois le même composant, 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 une bonne connaissance de 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 tourner vers un système de gestion de contenu (CMS) comme SquareSpace ou même WordPress.
Il y a quelques concurrents “React Static” frameworks, qui apportent souvent des fonctionnalités et un contrôle supplémentaires 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 note avant de commencer : parce que le rendu se fait du côté client (à moins que vous n'utilisiez 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, il s'agit en grande partie d'un détail technique, car les pages sont toujours rendues dynamiquement, uniquement sur le client.
Utiliser React-Static
react-static est assez facile à utiliser. Tout d'abord, vous devez installer Node.JS et NPM sur votre machine. 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. Le “de base” L'option 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 “basic.”
Publicité
Cela prendra une seconde pour installer certaines dépendances NPM et configurer le projet. Les fichiers principaux se trouvent dans /src/, 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 affinerez la sortie de la compilation (après l'avoir exécutée) que vous mettrez sur votre serveur Web.
Dans App.jsx, vous trouverez le début du rendu. Le composant Routeur affiche chaque page dans /src/pages/, en fonction de l'URL. La configuration pour cela est gérée dans static.config.js.
Vous pouvez réellement avoir routes dans votre application—toute route configurée avec le <Dynamic /> le composant ne sera pas affecté par le moteur de rendu statique.
Pour lancer l'application, vous pouvez démarrer le serveur de développement :
npm run start
Pour exécuter un build à déployer sur votre serveur Web, do run build :
npm run build
Les fichiers générés seront dans /dist/. Vous trouverez, bien sûr, chaque page HTML à afficher à l'avance, toutes les pages dynamiques chargeant toujours les binaires React.