De nos jours, la vitesse de chargement d’un site est l’un des critères les plus importants pour le référencement Google et les internautes. Avec l’explosion des frameworks et autres librairies Javascript, il est important aujourd’hui de se demander dans quel cas la génération de site statique est pertinente. Avec la montée en puissance de la Jamstack, l’intérêt pour le SSG (Static Site Generation) est aujourd’hui quasi incontournable. Nous faisons donc face à une émergence d’outils permettant de mettre à bien ce type de projet rapidement. Et c’est dans ce contexte qu’est né Next.JS.

1. Quelques définitions

Commençons par définir la Jamstack, ce fameux buzzword que nous rencontrons de plus en plus en tant que développeurs. Ce terme désigne en fait l’agrégat de 3 choses: Javascript, API et Markup.

Dans le cas du SSG, les pages web statiques affichent exactement les mêmes informations à tous les utilisateurs. À l’inverse des sites dynamiques qui, eux, affichent des éléments différents en fonction de l’utilisateur. Cela permet une mise en cache plus importante, moins de temps de process et donc moins de temps de chargement. Du point de vue du développeur, le seul moyen de changer un élément de la page est donc de modifier le code source en amont.

Le SSG s’appuie sur le fonctionnement du Server Side Rendering (SSR), qui lui permet de builder une page en interne sur le serveur et renvoie la page lors de la réception de la requête utilisateur. La page peut ensuite dialoguer avec le serveur grâce à des requêtes HTTP classiques, ce procédé est très utilisé dans le cas des Progressive Web App (PWA).

2. Le cas Next.JS

Next.js est un framework développé par Vercel : Develop. Preview. Ship. For the best frontend teams – Vercel

Cette plateforme tend à se faire connaitre pour plusieurs raisons : leur environnement de déploiement éponyme qui a un pricing très intéressant et leur framework de développement (Next.JS pour React, et Nuxt.JS pour Vue.js).

L’intérêt principal pour le développeur est de retrouver dans ses frameworks le back-end et le front-end sous un même projet, mais assez bien séparés pour ne pas confondre l’un et l’autre.

Système de route basé sur les fichiers

Dans le cas d’un projet Next, pour chaque fichier Javascript présent dans le dossier Pages, le framework se charge de créer une route du même nom. Du point de vue du développeur, cela permet une bonne modularité et un gain de temps assez conséquent.

Déploiement

Autre avantage d’utiliser Next : il vient avec un CLI (Command Line Interpreter) assez complet – de la création de projet au déploiement sur leur plateforme, jusqu’aux statistiques sur le pourcentage de pages statiques dans le projet… il peut tout faire d’une commande. Si on choisit d’utiliser Vercel comme plateforme de déploiement, le CDN est déjà inclus gratuitement, en plus du Certificat SSL.

Comparaison avec une app web classique

Traditionnellement, les applications web marchent de la façon suivante:
-une requête est envoyée au serveur avec les paramètres utilisateur
-le serveur crée la page en fonction de ses paramètres
-pendant ce temps, l’utilisateur a une phase de chargement plus ou moins longue
-une fois cette étape finie, le serveur renvoie la page HTML générée dynamiquement qui s’affiche à l’utilisateur

Ces étapes sont donc effectuées pour chaque utilisateur qui accède à l’application, contrairement à Next.JS (ou ces concurrents) qui buildent une page générique pour tous les utilisateurs. Quelle que soit la requête ou l’utilisateur, le serveur renvoie toujours la même page.

3. Les avantages du SSG et Next.JS

Si on distingue les applications web dynamiques – qui la plupart du temps sont faites sous la forme d’une Single Page App, avec un framework front (Angular, React, Vue), et les pages statiques, qui, elles, sont souvent orientés marketing comme une vitrine ou un pricing, sans besoin de login.

Dans le premier cas, si votre site nécessite un login, cela prend donc en compte que les données chargées sont dépendantes de l’utilisateur. Dans ce cas, le SSG ne sera plus la meilleure solution.

Grâce au SSG et au SSR, Next JS va créer toutes les pages que peut avoir le site en dur dès le build, c’est-à-dire au moment où vous créez votre site. Le serveur n’aura donc plus à créer la page lors de la réception d’une requête. Elle pourra être mise en cache pour être servie d’autant plus rapidement. C’est la solution la plus rapide pour livrer une page web.

Bien sûr, le SSG (et donc le SSR) n’est pas adapté à toutes les problématiques, il est pertinent dans le cas où la majorité du contenu n’évolue pas beaucoup dans le temps et où le résultat est le même, quelle que soit la requête.

4. Conclusion

Next.JS permet au développeur de créer un site statique de manière simple, en prenant en charge une partie de l’architecture du code et en offrant un CLI pertinent, rapide et simple d’utilisation.

Si le site ne doit pas changer le contenu selon l’utilisateur, et que le contenu ne change pas fréquemment, Next.JS est une solide option à considérer – par exemple pour une vitrine, un marketplace, un e-commerce ou un blog.

En revanche, pour les cas où le site demande un chargement de données dépendant de l’utilisateur comme les réseaux sociaux, cela ne s’y prête absolument pas.

De nos jours plusieurs outils mettent à disposition de la génération de site statique comme Gatsby, Docusaurus ou Docsify. Si vous souhaitez avoir plus de détails, le lien de l’organisation Jamstack est ici : For fast and secure sites | Jamstack

Antoine JIMENEZ | Développeur web, Klanik