Accueil / TUTORIELS / Programmation / Top 5 Générateurs de sites statiques React à utiliser en 2019

Top 5 Générateurs de sites statiques React à utiliser en 2019

Les sites statiques sont des reliques qui ont longtemps domine avant que les CMS’s n’envahissent le web. Aujourd’hui, ils reprennent de l’envergure avec l’apparition  des générateurs de sites statiques tournant sous des Framework modernes tels que React, Vue et Angular.

Tournant sous la puissance des Framework dotés des outils modernes tels que Web Pack ainsi que les techniques avancées du CSS, Les Générateurs des sites statiques static site generators (SSGs) en Anglais vous permettent de créer et de déployer des très beaux sites web avec des contenus ultra modernes sans fournir trop d’efforts.

En 2019, La scène est ouverte aux SSG tournant sous Reactjs et ayant des composants créant une expérience utilisateur unique et ultra puissante.

Sur ce, l’équipe Kivu Makers vous a préparé un très bon guide vous montrant un aperçu des Meilleurs Générateurs des Sites Statiques React vous permettant des construire des sites internet ayant une très belle expérience utilisateurs ainsi qu’une interface utilisateur proposant les meilleurs composants.

1) Gatsby

Top 5 Générateurs de sites statiques React à utiliser en 2019

Réalisé en 2015, Gatsby est probablement le générateur des sites statiques en React.js le plus populaire au monde. Même le site officiel de Reactjs fut réalisé en Gatsby. Alors pourquoi Gatsby est-il aussi populaire ?

Premièrement, Gatsby tourne à merveille avec l’écosystème de React, allant des composants React a WebPack ainsi que les techniques avancées du CSS. Il renferme aussi un grand nombre d’extensions qui permettent de récupérer et d’utiliser les donnes (Via GraphQL) provenant des parties tierces ainsi que d’APIs. Donc vous pouvez enrichir votre expérience avec des vraies données

Gatsby est aussi facile à déployer et travail très rapidement avec un temps d’attente proche de 0 lorsqu’il est conçu et déployé correctement. Il possède aussi une très grande variété de Template ainsi qu’une documentation riche  en accord avec les règlementations sur la conception des PWAs.

Site Officiel de Gatsby

 

2) React-Static

Top 5 Générateurs de sites statiques React à utiliser en 2019

De même que Gatsby et Next.js (juste en dessous), l’équipe travaillant sur React static est décidé de créer le meilleur est la plus simple expérience pour les développeurs. Cela veut dire une manière plus directe et plus précise de récupérer le données allant de la source au routes, une meilleure séparation des Templates Reacts et autres.

React-Static peut être fier d’un temps de formation assez court qui est dû au manque de syntaxes particulières, c’est juste du réacs et du JavaScript, un moyen très simple de récupération et d’injection des données, les requetés ainsi que le mapping en un seul endroit, sans données dynamiques et colocations.

De même que Gatsby et Next, l’utilisateur aura un site statique optimise en SEO, rapide et performant. J’aimerai juste signaler qu’il ne détient pas encore un écosystème comme celui de Gatsby, React-Static est simple, direct ainsi qu’un moyen ultra rapide de réaliser des sites web statiques.

Site officiel React-Static

 

3) Next.js

Top 5 Générateurs de sites statiques React à utiliser en 2019

Le projet Next.js provient de Zeit. C’est un Framework puissant pour la conception des sites statiques React ainsi que des Applications React Dynamiques, qui travaille aussi comme un SSG de React quand on l’exploite toutes ses capacités.

La commande next export vous permet d’exécuter votre application Next.js comme un site statique sans pour autant recourir à un serveur Node.js. Cette commande transforme toutes les pages en HTML en se basant sur le mapping de la clé pathname de l’objet page, appelé exportPathMap. Par défaut Next.js ne requiert aucune configuration, et va générer un exportPathMap par défaut contenant les routes vers les pages se trouvant dans le dossier pages. Cela veut dire que vous pouvez développer une webApp sous next.js, et même l’exporter avec toutes les fonctionnalités, les animations, … comme un site web statique.

Mais souvent, l’approche isomorphique de Next.js n’est toujours pas compatible avec le flux de travail et peut créer des pièges lors de l’exportation en version statique, ce qui peut ralentir le travail. Mais à part cela Next.js reste un choix judicieux.

Site officiel de Next.js

 

4) CuttleBelle

Top 5 Générateurs de sites statiques React à utiliser en 2019

Cuttlebelle est moins connue mais il propose aussi un SSG React assez impressionnant, conçu avec comme objectif de séparer l’Edition du code avec les différentes dépendances. Il permet d’utiliser un composant pour une partie de la page et de proprement séparer les contenus du code. Vous pouvez étendre CuttleBelle avec des composants React, cela ouvre des tonnes de possibilités.

En gros, vous pouvez créer une structure pour chaque portion de la page et les mettre ensemble afin de créer une page statique. Créer des templates avec du  JSX, composer des structures, récupérer des données provenances des APIs tierces, tester avec Jest et déployer partout

Dans l’écosystème des composants de 2019, avec des librairies telles que React et des outils comme Bit, les possibilites sont infinies. Sentez vous libre de l’essayer et d’y jouer un peu.

 

Site officiel de CuttleBelle

 

5) Jekyll avec React

Top 5 Générateurs de sites statiques React à utiliser en 2019

Jekyll n’a pas été conçu réellement pour React, il est jusqu’à présent le générateur de sites statiques le plus connu au monde, généralement utilise pour les Blogs et les boutiques en ligne. Une grande partie de son succès est attribué à ses migrations rapides, utilisant importers. Il est conçu en Ruby et intégré dans les pages de Git hub, il détient aussi un très riche écosystème de thèmes, Templates et plugins. Il vous offre même un hébergement gratuit avec des pages Git hub, c’est qui est un plus.

Site officiel de Jekyll

Vous pouvez aussi lire Comment lancer son projet react-native sur un emulateur android genymotion sous windows

EN définitive disons que cette liste n’est pas exhaustive car nous n’avons pas traite tous les SSG react (par exemple Hugo, Phenomic, Antwar, etc.) mais que nous listons ci-haut les SSG probables de conquérir le web en 2019. Libre à vous de les tester et de trouver celui qui répond parfaitement à vos besoins. Sur ce n’oubliez pas de partager cet article ou même de commenter pour toute préoccupation.

Recevez un eBook Gratuit d'Ethical Hacking
Entrez votre adresse email et cliquez sur le bouton demarer
J'accepte que mes informations personnelles soient protegés
Nous respectons votre vie privée

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *