Accueil Technologies Next JS – Un framework ReactJS performant, adoré par les robots Google
Next JS - Un framework ReactJS performant, adoré par les robots Google

Next JS – Un framework ReactJS performant, adoré par les robots Google

par Jérémy PASTOURET
Publié : Mis à jour le

En ce moment le Javascript a le vent en poupe, pour le backend comme pour le frontend. Évidemment, limiter le nombre de langages à connaître est un plus pour les nouvelles générations de développeurs. Moins de PHP, de Python, de Java pour les nouveaux développeurs Web et plus de HTML/CSS/Javascript. Mais une éternelle question subsiste dans le monde du développement. Quel framework choisir ? Dans cet article, j’ai décidé de vous présenter uniquement Next JS, sans réaliser de comparatif. L’objectif : prendre connaissance de ce framework en étant le plus objectif possible.

Qu’est-ce que Next JS ?

Next JS est un framework basé sur ReactJS, une bibliothèque Javascript. L’histoire de ce framework commence en août 2016, dans l’entreprise Zeit : à l’époque, le framework se nommait Now.

Avec cette vidéo, vous l’aurez compris : l’objectif principal consiste à disposer d’une solution simple pour créer, déployer et partager des applications web.

Aujourd’hui la société derrière Next JS se nomme Vercel. Elle se spécialise dans le serverless cloud computing.

Les points forts de Next JS

Les points forts de Next JS

La plus-value de ce framework est la génération d’applications statiques. Cette volonté de leadership dans le domaine du JAMSTACK est démontrée dans la nouvelle version du framework.

Si vous n’êtes pas familier avec le terme JAMSTACK, voici une explication : C’est une couche technologique qui permet de développer des applications légères, écologiques et pré-compilées.

Pour faire simple : si vous possédez un site de type blog, vous devez compiler en amont vos articles en fichier .html. De cette manière, il est possible d’accroître les performances. Plus besoin d’effectuer des requêtes vers la base de données en temps réel, en fonction des demandes utilisateurs.

Entre les fonctions, la documentation et les tutoriels clairs de Next JS, vous avez toutes les cartes en main pour appliquer le JAMSTACK.

Pourquoi Next JS est-il performant et adapté au référencement ?

Bannière composants

Next JS propose des fonctionnalités hybrides de SSG (Static Generation) & SSR (Server-side Rendering).

  • getStaticProps (Génération statique) -> Récupère les données au moment de la compilation de votre application.
  • getStaticPaths (Génération statique) -> Utilisé pour des pages dynamiques. Le framework pré-compile la page en se basant sur des données.
  • getServerSideProps (Rendu côté serveur) -> Récupère les données pour chaque requête.

Vous l’aurez donc compris : toutes ces fonctions permettent de générer en amont le code HTML/CSS afin de le transmettre directement au client. C’est la méthode parfaite si vous cherchez à optimiser votre SEO. Contrairement au SPA (Single Page Application), le SSG & le SSR sont compréhensibles par le moteur d’indexation de Google. En effet les SPA sont chargés sur une seule page, les données changent grâce au Javascript… et les robots n’y comprennent rien.

Pour mieux vous rendre compte des avantages utilisateurs et SEO, je vous invite à consulter cet exemple Next JS très optimisé. Même l’affichage progressif des images a été optimisé. Vous pouvez aussi analyser ce site avec Google, ou utiliser le module de Vercel qui analyse la performance de vos sites web.

Conclusion

Bannière conclusion

Je vous conseille d’utiliser Next JS si vous avez un fort besoin de performance utilisateur et SEO. Les composants de base du framework permettent de développer une solution JAMSTACK assez rapidement. Ainsi, Next JS s’avère très pratique pour créer un blog ou un site vitrine optimisé.

💻 Et vous, utilisez-vous Next JS pour vos projets ? Quel est votre retour d’expérience ?

Pour finir, je vous invite à découvrir le nouveau framework CSS du moment nommé Tailwind CSS. Attention : après avoir lu cet article, vous risquez de dire au revoir à Bootstrap.

Vous pourriez aussi aimer

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.