React & Next.JS
Vous en avez déjà surement entendu parler, vous l’utilisez au quotidien, vos projets sont basés sur cette technologie, quel que soit votre profil React ne vous est surement pas complètement étranger.
En effet, cette librairie javascript conçue par Facebook s’est fait une place d’or sur le marché du développement web depuis 2013. Next.js elle, est un peu moins grand public, mais tout aussi populaire. Nous allons vous expliquer ici pourquoi nous aimons ces technologies et pourquoi nous les utilisons sur nos derniers projets !
Un peu d’histoire (mais pas trop)
React est imaginé en 2011 chez Facebook pour leurs besoins internes, la bibliothèque est utilisée sur le projet. C’est en 2013 qu’ils décident de rendre générique cette dernière, pour pouvoir la publier sous licence Apache et ainsi la proposer à la communauté. Next.js elle est plus tardive, et apparait fin 2016 pour résoudre des problématiques de génération de pages côté serveur, pour des questions de performance, de sécurité, de comportement utilisateur et j’en passe. La technologie est basée sur Node.js et… notre cher React.
Pourquoi React a conquis le marché ?
React est arrivé (plus ou moins en même temps que d’autres technologies, comme Vue.js, Angular) en proposant une nouvelle philosophie pour concevoir un site internet. Au lieu de laisser faire le navigateur pour explorer un site web, c’est à dire envoyer une requête HTTP lorsque l’on veut récupérer un nouveau contenu à afficher, React nous a proposé de télécharger l’ensemble du site lors du premier chargement, puis de naviguer et interagir côté client, sans intervention bloquante du serveur.
C’est pour ca que la librairie est catégorisée comme librairie de site “monopage”, c’est à dire une page unique, mais qui possède plusieurs “états” pour des affichages différents. Cela s’est traduit par une navigation de l’utilisateur bien plus fluide, ressentie bien plus rapide, malgré le chargement initial.
D’autre part, la manière de développer en React permet de concevoir des “composants” que l’on peut facilement réutiliser, enrichir dans d’autres parties de notre applicatifs. En plus de gagner en cohérence, on gagne en évolutivité, efficacité, rapidité de développement à long terme. Enfin, un mot sur React Native. C’est une technologie qui permet de créer des applications mobiles dites “hybrides”, tout ça en développant en… React. Plutôt pratique alors pour adapter des composants d’un projet web dans la conception d’une application mobile.
Et que vient faire Next.js là dedans?
Le soucis lorsqu’on utilise uniquement React, c’est que pour communiquer avec le serveur, il faut donc le faire côté client, en javascript. Donc attendre que l’ensemble de l’application soit chargée, pour récupérer ensuite une information. Un autre soucis évidemment, c’est que si l’application est assez lourde, le premier temps de chargement pourrait prendre plusieurs secondes voir dizaines de secondes, et d’autant plus lorsqu’on repense aux connexions mobiles de l’époque.
C’est là qu’interviennent des technologies comme Next.js ou Gatsby, qui s’exécutent elles côté serveur. Ce sont grâce à ces dernières que nous sommes capables de bloquer un utilisateur qui n’aurait pas les droits sur un contenu avant même qu’il ait reçu une information de la part du serveur. Ces technologies sont également capables de générer uniquement une partie d’un applicatif, en fonction des demandes des utilisateurs, pour générer les autres à la volée, réduisant considérablement le temps de premier chargement.
Enfin, elles sont capables de générer des parties statiques lorsqu’un premier utilisateur regarde une page, par exemple un article de blog, pour proposer cette même génération aux dizaines d’autres utilisateurs qui arriveraient dans la foulée, et ainsi réduire drastiquement le temps de travail.
Et pourquoi pas Vue.js ?
Oui c’est vrai ca, pourquoi pas. Certains choisissent plutôt Vue, d’autres React. A Maespirit nous ne pensons pas que l’un est meilleur que l’autre, en dehors de points stratégiques comme la taille de la communauté à l’international, qui est plus importante sur React. Renaud, notre directeur technique, préfère la philosophie React à celle de Vue; il n’aime pas le concept d’enrichir le HTML avec des directives comme le fait cette dernière, mais admet aisément que c’est une question de goût.
Alors pour l’instant, on est sur React ! Jusqu’à la prochaine techno qui nous fera vibrer, car ce que l’on aime le plus, c’est rester à la page !
Des exemples de société qui utilisent le combo Next.js + React
React & Next.JS nous offre une grande flexibilité en tant que développeur. Son approche modulaire nous permet de gagner en efficacité et en rapidité tout au long du cycle de vie du projet.
De plus, l'apport du SSR (rendu côté serveur) ou du SSG (rendu statique) via Next.JS nous permet d'augmenter considérablement la visibilité de nos partenaires dans les moteurs de recherche, ce qui leur donne un sérieux avantage compétitif.